一个比较漂亮的选项卡动态增删的效果

最新推荐文章于 2023-12-05 16:17:39 发布

wind8303

最新推荐文章于 2023-12-05 16:17:39 发布

阅读量1.4k

点赞数

分类专栏： javascript 文章标签： function border url class float delete

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码：

<html> <head> <title>163邮箱选项卡效果</title> <mce:script type="text/javascript"></mce:script> <mce:style></mce:style><style mce_bogus="1"> ul,li { margin:0; padding:0; list-style:none; /*for close location*/ position:relative; } li { display:block; width:130px; height:25px; float:left; cursor:pointer; overflow:hidden; } span { font-size:10pt; color:#22b5d9; font-weight:bold; display:block; } #asgardCard li { font-size:10pt; font-weight:bold; color:#22b5d9; border:1px solid #22b5d9; margin:10px; text-align:center; line-height:1.5; } </style> <mce:style>http://www.blueidea.com/tech/web/2005/3065.asp*/ /*There is defect:the attribute-content hold one line place.*/ ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #cardContent { height:auto; min-height:300px; border:2px solid #cccccc; clear:both; } #itemsPanel li { display:block; width:130px; height:25px; float:left; cursor:pointer; overflow:hidden; } #cardFrame { width:100%;height:100%;border:1px solid #ffffff;margin:0; } .active { background:url('http://www.jb51.net//upload/20070928200415937.jpg') 0 0 no-repeat; } .default { background:url('http://www.jb51.net//upload/20070928200415937.jpg') 0 -25px no-repeat; } .title { font-size:10pt; font-weight:bold; line-height:2; padding-left:10px; display:block; width:105px; height:25px; } li .close { position:absolute; top:9px; left:115px; display:block; width:10px; height:10px; overflow:hidden; } .active .close { background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') 0 -50px no-repeat; } .default .title { color:#999999; } .active .title { color:#000000; } .active .close:hover { background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -10px -50px no-repeat; } .default .close { background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -20px -50px no-repeat; } .default .close:hover { background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -30px -50px no-repeat; } /*Asgard CardProgram Css End*/ --></mce:style><style mce_bogus="1"> /*Asgard CardProgram Css Start*/ #itemsPanel,#itemsPanel li { margin:0; padding:0; list-style:none; /*for close location*/ position:relative; } /*Clear Float：Referrence-->http://www.blueidea.com/tech/web/2005/3065.asp*/ /*There is defect:the attribute-content hold one line place.*/ ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #cardContent { height:auto; min-height:300px; border:2px solid #cccccc; clear:both; } #itemsPanel li { display:block; width:130px; height:25px; float:left; cursor:pointer; overflow:hidden; } #cardFrame { width:100%;height:100%;border:1px solid #ffffff;margin:0; } .active { background:url('http://www.jb51.net//upload/20070928200415937.jpg') 0 0 no-repeat; } .default { background:url('http://www.jb51.net//upload/20070928200415937.jpg') 0 -25px no-repeat; } .title { font-size:10pt; font-weight:bold; line-height:2; padding-left:10px; display:block; width:105px; height:25px; } li .close { position:absolute; top:9px; left:115px; display:block; width:10px; height:10px; overflow:hidden; } .active .close { background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') 0 -50px no-repeat; } .default .title { color:#999999; } .active .title { color:#000000; } .active .close:hover { background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -10px -50px no-repeat; } .default .close { background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -20px -50px no-repeat; } .default .close:hover { background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -30px -50px no-repeat; } /*Asgard CardProgram Css End*/ </style> </head> <body> <span>1.代码效果示例：</span> <ul> <li class="active"> <nobr class="title">Kiss</nobr> <a href="#nogo" mce_href="#nogo" class="close" title="关闭"></a> </li> <li class="default"> <nobr class="title">Andy</nobr> <a href="#nogo" mce_href="#nogo" class="close" title="关闭"></a> </li> </ul> <p /> <span>注：以上代码为DOM动态组织的代码参考<span> <p style="clear:both;" mce_style="clear:both;"/> <p /> <span>2.点击下表，更换内容</span> <ul id="asgardCard"> <li title="blueidea">蓝色理想</li> <li title="google">Google中国</li> <li title="email126">Email-126</li> <li title="ngacn">艾泽拉斯</li> </ul> <p style="clear:both;" mce_style="clear:both;"/> <span>3.以下为动态创建：</span> <div> <ul id="itemsPanel"> </ul> <div id="cardContent"> <iframe id="cardFrame"> </iframe> </div> </div> </body> <mce:script type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script> </html>

代码说明：

代码说明
1.我的CSS分割为2段了，第一段为此演视用，可自己定制，第二段为此框架必须。
2.script我也分割为2段，第一段为必须，第二段为客户定制的，我这里的代码是给一个实现参考。
3.以下的HTML代码为参考实现的必须容器代码

【代码】
<ul id="itemsPanel">
</ul>
<div id="cardContent">
<iframe id="cardFrame">
</iframe>
</div>

使用介绍:
1.ItemsPanel对象
构造方法：new Asgard.CardProgram.ItemsPanel("itemsPanel","cardFrame").
接受的2个参数，第一个为ul容器ID，第二个为我们需要展现标签对应的内容的irame的ID 。
ItemPanel对象使用addItem方法添加Item。
如果你需要创建多个ItemsPanel，可以自己参考我的范例来进行。
2.Item对象
构造方法：new Asgard.CardProgram.Item("index","时空创意","http://www.skst.com.cn",true)接受4个参数
第一个为打算创建的选项卡的id，第二个为打算创建的选项卡的标题，第三个为此选项卡对应的URL，第四个为是否为首页，因为我们也许会打算创建一个默认页面不允许关闭。当然如果你全部设置为true，那么也就是正常的选项卡效果了。