发一个比较漂亮的选项卡动态增删的效果
2007-09-28 20:04
459 查看
先放个图片,我改下代码。
163邮箱选项卡效果 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; } /*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('//www.jb51.net//upload/20070928200415937.jpg') 0 0 no-repeat; } .default { background:url('//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*/ 1.代码效果示例: 注:以上代码为DOM动态组织的代码参考 2.点击下表,更换内容
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
代码说明
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,那么也就是正常的选项卡效果了。
163邮箱选项卡效果 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; } /*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('//www.jb51.net//upload/20070928200415937.jpg') 0 0 no-repeat; } .default { background:url('//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*/ 1.代码效果示例: 注:以上代码为DOM动态组织的代码参考 2.点击下表,更换内容
- 蓝色理想
- Google中国
- Email-126
- 艾泽拉斯
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
代码说明
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,那么也就是正常的选项卡效果了。
相关文章推荐
- 发一个比较漂亮的选项卡动态增删的效果
- 发一个选项卡动态增删的效果..
- 一个选项卡动态增删的效果..
- 比较漂亮的一个导航条的效果DIV+CSS
- 最近比较迷flash professional cc 做PPT,做一个flash做动态打字效果的教程
- 最近比较迷flash professional cc 做PPT,做一个flash做动态打字效果的教程
- 比较漂亮的一个导航条的效果DIV+CSS
- 分享一个快速开发动态互动HTML5可视化图形效果的Javascript类库 - Envisio...
- 一个代码简、效果很好的3D动态交互饼图DEMO
- 一个挺漂亮的鼠标跟随效果
- Android Design Support Library(一)用TabLayout实现类似网易选项卡动态滑动效果
- 工作中需要做一个根据音频动态绘制能量柱的功能,(非原创-有改动-增加倒影效果)废话补多少,看效果-有美女-详细注释
- 通过js写的一个比较简单的点击切换图片效果
- 一个比较有趣的 Android 动画效果
- ColorViewPager--动态改变ViewPager的背景,给你一个漂亮的ViewPager
- 一个自动动态播放图片的类(downmoon)新增图片效果
- 一个封装了的选项卡效果js
- 一个比较帅的页面加载效果!
- Android用TabLayout实现类似网易选项卡动态滑动效果
- 一个比较有趣的 Android 动画效果