发一个比较漂亮的选项卡动态增删的效果
2007-09-28 00:00
423 查看
先放个图片,我改下代码。
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('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*/
1.代码效果示例:
Kiss
Andy
注:以上代码为DOM动态组织的代码参考
2.点击下表,更换内容
蓝色理想
Google中国
Email-126
艾泽拉斯
3.以下为动态创建:
/*
* Field Declare ^-^
*/
var Asgard;
if(!Asgard)
Asgard={};
if(!Asgard.CardProgram)
Asgard.CardProgram={};
/*
*function:define Object ItemsPanel
*/
Asgard.CardProgram.ItemsPanel=function(id,frameId)
{
this.element=$(id);
this.register=new Array();
this.currentItem=null;
this.cardFrame=$(frameId);
this.element.className='itemsPanel';
}
/*
*function:add item from panel
*/
Asgard.CardProgram.ItemsPanel.prototype.addItem=function(item)
{
if(this.validateExist(item.element.getAttribute('id')))
return;
item.panel=this;
this.visitedRegister(item,"add");
this.element.appendChild(item.element);
}
/*
*function:delete item from panel
*/
Asgard.CardProgram.ItemsPanel.prototype.deleteItem=function(item)
{
this.visitedRegister(item,"delete");
this.element.removeChild(item.element);
}
/*
*Ajax or other
*/
Asgard.CardProgram.ItemsPanel.prototype.changeSubPage=function()
{
if(this.register.length==0)
{
this.cardFrame.src="";
return;
}
this.cardFrame.src=this.currentItem.url;
/*
*这里用户可以自己定义想要的页面,如果你想内嵌IFrame。
*/
}
Asgard.CardProgram.ItemsPanel.prototype.validateExist=function(id)
{
for(var i=0;i
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('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*/
1.代码效果示例:
Kiss
Andy
注:以上代码为DOM动态组织的代码参考
2.点击下表,更换内容
蓝色理想
Google中国
Email-126
艾泽拉斯
3.以下为动态创建:
/*
* Field Declare ^-^
*/
var Asgard;
if(!Asgard)
Asgard={};
if(!Asgard.CardProgram)
Asgard.CardProgram={};
/*
*function:define Object ItemsPanel
*/
Asgard.CardProgram.ItemsPanel=function(id,frameId)
{
this.element=$(id);
this.register=new Array();
this.currentItem=null;
this.cardFrame=$(frameId);
this.element.className='itemsPanel';
}
/*
*function:add item from panel
*/
Asgard.CardProgram.ItemsPanel.prototype.addItem=function(item)
{
if(this.validateExist(item.element.getAttribute('id')))
return;
item.panel=this;
this.visitedRegister(item,"add");
this.element.appendChild(item.element);
}
/*
*function:delete item from panel
*/
Asgard.CardProgram.ItemsPanel.prototype.deleteItem=function(item)
{
this.visitedRegister(item,"delete");
this.element.removeChild(item.element);
}
/*
*Ajax or other
*/
Asgard.CardProgram.ItemsPanel.prototype.changeSubPage=function()
{
if(this.register.length==0)
{
this.cardFrame.src="";
return;
}
this.cardFrame.src=this.currentItem.url;
/*
*这里用户可以自己定义想要的页面,如果你想内嵌IFrame。
*/
}
Asgard.CardProgram.ItemsPanel.prototype.validateExist=function(id)
{
for(var i=0;i
相关文章推荐
- 发一个比较漂亮的选项卡动态增删的效果
- 发一个选项卡动态增删的效果..
- 一个选项卡动态增删的效果..
- 比较漂亮的一个导航条的效果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 动画效果
- 一个自动动态播放图片的类(downmoon)新增图片效果
- ColorViewPager--动态改变ViewPager的背景,给你一个漂亮的ViewPager
- 一个封装了的选项卡效果js
- 一个比较帅的页面加载效果!
- Android用TabLayout实现类似网易选项卡动态滑动效果
- 一个比较有趣的 Android 动画效果