一个不错的页面选项卡标签效果源代码

king_tt

浏览: 2118099 次
性别:
来自: 深圳

最近访客更多访客>>

u012363178

liangjijiang

jacky_dai

ljmomo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2017-01 ( 5)
2016-12 ( 132)
2016-11 ( 17)
更多存档...

摘一个很不错的网页选项卡效果的源代码，经测试可用：

经常看到人问选项卡或者类似选项卡的切换效果
这里封装了个js，希望对大家有用
所有代码都在下面了
代码不多的，只有几k，如果压缩下还要小几k
前面有一处漏了附加样式
修正下。。

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

<scripttype="text/javascript">

选项卡封装

by井底的蛙

2008-2-4

opCard=function()

{

this.bind=newArray();

this.index=0;//默认显示哪个选项卡，从0开始

this.style=newArray();//["","",""]

this.overStyle=false;//选项是否有over,out变换样式事件，样式为this.style[2]

this.overChange=false;//内容是否用over,out直接激活

this.menu=false;//菜单类型

this.nesting=[false,false,"",""];//是否嵌套，后面2个参数是指定menu,info的子集深度所用id

this.auto=[false,1000];//自动滚动[true,2000]

this.timerID=null;//自动播放的

this.menutimerID=null;//菜单延时的

this.creat=function(func)

{

var_arrMenu=document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]);

var_arrInfo=document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]);

varmy=this,i;

varargLen=arguments.length;

vararrM=newArray();

if(this.nesting[0]||this.nesting[1])//有选项卡嵌套

{//过滤出需要的数据

vararrMenu=this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;

vararrInfo=this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;

}

else

{

vararrMenu=_arrMenu;

vararrInfo=_arrInfo;

}

varl=arrMenu.length;

if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量如果需要，你可以放一个空的在那占位。")}

//修正

if(this.menu){this.auto=false;this.overChange=true;}//如果是菜单，则没有自动运行，有over,out直接激活

//循环添加各个事件等

for(i=0;i<l;i++)

{

arrMenu[i].cName=arrMenu[i].className;

arrMenu[i].className=(i!=this.index||this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]);//加载样式，菜单的话统一样式

if(arrMenu[i].getAttribute("skip"))//需要跳过的容器

{

if(this.overStyle||this.overChange)//有over,out改变样式或者激活

{

arrMenu[i].onmouseover=function(){changeTitle(this,2);autoStop(this,0);}

arrMenu[i].onmouseout=function(){changeTitle(this,0);autoStop(this,1);}

}

arrMenu[i].onclick=function(){if(argLen==1){func()}}

arrInfo[i].style.display="none";

continue;

}

if(i!=this.index||this.menu){arrInfo[i].style.display="none"};//隐藏初始化，菜单的话全部隐藏

arrMenu[i].index=i;//记录自己激活值[序号]

arrInfo[i].index=i;

if(this.overChange)//有鼠标over,out事件

{

arrMenu[i].onmouseover=function(){changeOption(this);my.menu?changeMenu(1):autoStop(this,0);}

arrMenu[i].onmouseout=function(){changeOption(this);my.menu?changeMenu(0):autoStop(this,1);}

}

else//onclick触发

{

arrMenu[i].onclick=function(){changeOption(this);autoStop(this,0);if(argLen==1){func()}}

if(this.overStyle)//有over,out改变样式

{

arrMenu[i].onmouseover=function(){changeTitle(this,2);autoStop(this,0);}

arrMenu[i].onmouseout=function(){changeTitle(this,0);autoStop(this,1);}

}

else//没有over,out改变样式

{

if(this.auto[0])//有自动运行

{

arrMenu[i].onmouseover=function(){autoStop(this,0);}

arrMenu[i].onmouseout=function(){autoStop(this,1);}

}

if(this.auto[0]||this.menu)//arrinfo控制自动播放

{

arrInfo[i].onmouseover=function(){my.menu?changeMenu(1):autoStop(this,0);}

arrInfo[i].onmouseout=function(){my.menu?changeMenu(0):autoStop(this,1);}

}

}//for结束

if(this.auto[0])

{

this.timerID=setTimeout(autoMove,this.auto[1])

}

//自动播放

functionautoMove()

{

varn;

n=my.index+1;

if(n==l){n=0};

while(arrMenu[n].getAttribute("skip"))//需要跳过的容器

{

n+=1;

if(n==l){n=0};

}

changeOption(arrMenu[n]);

my.timerID=setTimeout(autoMove,my.auto[1]);

}

//onmouseover时，自动播放停止。num：0为over，1为out。obj暂时无用。-_-!!

functionautoStop(obj,num)

{

if(!my.auto[0]){return;}

//if(obj.index==my.index)

num==0?clearTimeout(my.timerID):my.timerID=setTimeout(autoMove,my.auto[1]);

}

//改变选项卡

functionchangeOption(obj)

{

arrMenu[my.index].className=getClass(arrMenu[my.index],my.style[0]);//修改旧内容

arrInfo[my.index].style.display="none";//隐藏旧内容

obj.className=getClass(obj,my.style[1]);//修改为新样式

arrInfo[obj.index].style.display="";//显示新内容

my.index=obj.index;//更新当前选择的index

}

只有onclick时，overStyle的onmouseover,onmouseout事件。用来预激活

obj：目标对象。num：1为over，0为out

functionchangeTitle(obj,num)

{

if(!my.overStyle){return;};

if(obj.index!=my.index){obj.className=getClass(obj,my.style[num])}

}

菜单类型时用

obj：目标对象。num：1为over，0为out

functionchangeMenu(num)

{

if(!my.menu){return;}

num==0?my.menutimerID=setTimeout(menuClose,1000):clearTimeout(my.menutimerID)

}

//关闭菜单

functionmenuClose()

{

arrInfo[my.index].style.display="none";

arrMenu[my.index].className=getClass(arrMenu[my.index],my.style[0]);

}

//得到className（防止将原有样式覆盖）

functiongetClass(o,s)

{

if(o.cName==""){returns}

else{returno.cName+""+s}

}

//嵌套情况下得到真正的子集

functiongetChilds(arrObj,id,num)

{

vardepth=0;

varfirstObj=my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]);//得到第一个子集

do//计算深度

{

if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1}

firstObj=firstObj.parentNode;

}

while(firstObj.tagName.toLowerCase()!="body")//body强制退出。

vart;

vararr=newArray();

for(i=0;i<arrObj.length;i++)//过滤出需要的数据

{

t=arrObj[i],d=0;

{

if(t.parentNode.getAttribute("id")==id&&d==depth)

{

arr.push(arrObj[i]);break;//得到数据

}

else

{

if(d==depth){break};d+=1;

}

t=t.parentNode;

}

while(t.tagName.toLowerCase()!="body")//body强制退出

}

returnarr;

}

window.onload=function()

{

varaa=newopCard();

aa.bind=["a1","div","b1","div"];

aa.style=["a1_0","a1_1","a1_0"];

aa.index=0;

aa.nesting=[false,true,"",""]

aa.creat();

aa=null;

//默认的onclick中，第一个例子

varbba=newopCard();

bba.bind=["a2","li","b2","div"];

bba.style=["style1","style2","style3"];

bba.overStyle=true;

bba.creat();

bba=null;

//默认的onclick中，第二个例子

varbbb=newopCard();

bbb.bind=["a3","li","b3","div"];

bbb.style=["style1","style2","style3"];

bbb.overStyle=true;

bbb.creat();

bbb=null;

//onmousover触发中的例子

varcc=newopCard();

cc.bind=["a4","li","b4","div"];

cc.style=["style1","style2","style3"];

cc.overStyle=true;

cc.overChange=true;

cc.creat();

cc=null;

//自动播放auto第一个例子

vardd=newopCard();

dd.bind=["a5","li","b5","div"];

dd.style=["style1","style2","style3"];

dd.auto=[true,3000];

dd.creat();

dd=null;

//自动播放auto第二个例子

varee=newopCard();

ee.bind=["a6","li","b6","div"];

ee.style=["style1","style2","style3"];

ee.auto=[true,2000];

ee.overChange=true;

ee.creat();

ee=null;

//自动播放auto第三个例子

varff=newopCard();

ff.bind=["a7","li","b7","div"];

ff.style=["style1","style2","style3"];

ff.auto=[true,1000];

ff.overChange=true;

ff.overStyle=true;

ff.creat();

ff=null;

//菜单导航例子

vargg=newopCard();

gg.bind=["a8","li","b8","div"];

gg.style=["style1","style2","style3"];

gg.overStyle=true;

gg.menu=true;

gg.creat();

gg=null;

//其他应用

varhh=newopCard();

hh.bind=["a9","li","a9","li"];

hh.style=["style4","style4","style4"];

//hh.overStyle=true;

hh.auto=[true,1000];

hh.creat();

hh=null;

}

</script>

<styletype="text/css">

body{font-size:12px;font-family:Verdana,"宋体";}

p,ul{margin:0px;padding:0px;}

td,div{font-size:12px}

.a1_0{border:1pxdotted#3399FF;width:120px;background-color:#f5f5f5;margin:3px;padding:2px0px;cursor:pointer;}

.a1_1{border:1pxsolid#FF9900;width:120px;margin:3px;padding:2px0px;cursor:pointer;}

.test{text-decoration:underline;}

#b1div.s{border:1pxsolid#999999;width:90%;height:500px;margin:3px;padding:10px;overflow-y:auto;line-height:18px;}

#b1div.sstrong{color:#0066FF;}

/**/

.style1{float:left;width:80px;background-color:#f5f5f5;border:1pxsolid#3399FF;text-align:center;margin-right:2px;list-style-type:none;cursor:pointer;}

.style2{float:left;width:80px;background-color:#f5f5f5;border:1pxsolid#FF9900;text-align:center;margin-right:2px;list-style-type:none;cursor:pointer;}

.style3{float:left;width:80px;background-color:#f5f5f5;border:1pxsolid#666666;text-align:center;margin-right:2px;list-style-type:none;cursor:pointer;}

#a2,#a3,#a4,#a5,#a6,#a7,#a8{height:22px;}

#b2div,#b3div,#b4div,#b5div,#b6div,#b7div{border:1pxsolid#FF9900;height:100px;width:400px;padding:5px;overflow-y:auto;}

#b8div{border:1pxsolid#FF9900;height:20px;width:350px;padding:2px5px;}

#b8diva{margin-right:20px;}

.style4{float:left;background-color:#999999;text-align:left;list-style-type:none;padding:2px5px;color:#FFFFFF;}

</style>

</head>

<body>

<tablewidth="100%"border="0"cellspacing="0"cellpadding="0">

<tr>

<tdid="a1"width="140"valign="top"align="center">

<divclass="test">简单介绍</div>

<divclass="test">默认的onclick</div>

<divclass="test">onmousover触发</div>

<divclass="test">自动播放auto</div>

<divclass="test">菜单导航</div>

<divclass="test">关于嵌套</div>

<divclass="test">其他应用</div>

<divclass="test">一些说明</div>

<divclass="test"> </div>

</td>

<tdid="b1"valign="top">

<divclass="s">

封装了一个选项卡，不过已经不像选项卡了-_-!!!<br><br>

现稍微说明下吧，如果不明白的话，旁边有几个例子可能说明起来更清楚些<br><br>

<p>

绑定id="a1"下的td标签为菜单，绑定id="b1"下的div标签为内容，简单么？<br>

td标签的数量和div标签的数量必须相同<br>

（若不需要显示内容，只显示菜单话，可以这个在td标签上加<tdskip="true">）<br>

如果id="a1"下的td标签有嵌套表格，这样的话，就不是所有的td都是菜单，这时候需要用下nesting<br><br>

<strong>obj.nesting=[false,true,"",""];</strong><br>

当标签tag有嵌套时，需要用到这个<br>

比如选项卡内容是放在div容器里，而本身这个内容里也有div标签，这时就需要用到<br>

菜单嵌套为false，内容嵌套为true，且会自动判断出内容标签，多数时候这样就可以了<br>

判断方法为，认定getElementsByTagName后第一个标签为内容第一项，其他的就用这个第一项的深度来判断<br>

但有些情况下，这样还是不行<br>

我用后面2个参数做id来指定菜单或者内容的第一项nesting=[false,true,"","q2"];<br>

这样就肯定不会错了（不明白的话看下例子就简单多了）<br><br>

<strong>obj.index=0;</strong><br>

默认显示第几个选项卡，序号从0开始<br><br>

<strong>obj.style=["c1","c2","c3"]</strong><br>

菜单加载的样式的className：<br>

菜单未选中的className是c1<br>

菜单选中的className是c2<br>

菜单onmouseover的className是c3<br><br>

<strong>obj.overStyle=false;</strong><br>

选项卡是否有onmouseover,onmouseout变换样式事件[非激活选项卡内容]，对应的样式为style[2]<br><br>

<strong>obj.overChange=false;</strong><br>

选项卡内容是否用onmouseover,onmouseout直接激活<br><br>

<strong>obj.menu=false;</strong><br>

选项卡是菜单类型<br><br>

<strong>obj.auto=[false,1000];</strong><br>

选项卡是否自动播放，播放速度（毫秒）<br><br>

<strong>obj.creat();</strong><br>

开始生成选项卡，需要onclick触发事件的话，可以obj.creat(函数名)<br>

所有的都会触发

</p>

</div>

<divclass="s">

<divid="a2">

<ul>

</ul>

</div>

<divid="b2">

<div>这个例子是用onclick触发的<br>并设置overStyle=true;<br>(over，out改变样式,但不激活)</div>

<div>

varbba=newopCard();<br>

bba.bind=["a2","li","b2","div"];<br>

bba.style=["style1","style2","style1"];<br>

bba.overStyle=true;<br>

bba.creat();<br>

bba=null;

</div>

</div><br>

<divid="a3">

<ul>

<liskip="true">4</li>

</ul>

</div>

<divid="b3">

<div>

这个例子是比上面增加skip="true"<br>即<liskip="true">4</li><br>所以选项卡4是没有内容的<br>

你可以为选项卡的文字直接加上链接，我这里就不加了

</div>

</div>

<divclass="s">

<divid="a4">

<ul>

<liskip="true">3</li>

</ul>

</div>

<divid="b4">

<div>这个例子是用onmouseover触发的<br>(over，out直接激活)<br>并且<liskip="true">3</li>[选项卡3不会被激活]<br>overStyle=true;</div>

<div>

varcc=newopCard();<br>

cc.bind=["a4","li","b4","div"];<br>

cc.style=["style1","style2","style1"];<br>

cc.overStyle=true;<br>

cc.overChange=true;<br>

cc.creat();<br>

cc=null;

</div>

</div>

<divclass="s">

<divid="a5">

<ul>

</ul>

</div>

<divid="b5">

<div>1111111<br>我每3秒切换一个选项卡</div>

<div>

varee=newopCard();<br>

ee.bind=["a6","li","b6","div"];<br>

ee.style=["style1","style2","style1"];<br>

ee.auto=[true,2000];<br>

ee.overChange=true;<br>

ee.creat();<br>

ee=null;

</div>

<div>33333<br>我每3秒切换一个选项卡</div>

<div>4444444<br>我每3秒切换一个选项卡</div>

</div>

<div>注：<strong>鼠标在选项卡任意位置都会使停止播放</strong><br><br>下面这个结合overChange一起</div>

<divid="a6">

<ul>

</ul>

</div>

<divid="b6">

<div>1111111<br>我每2秒切换一个选项卡</div>

<div>

vardd=newopCard();<br>

dd.bind=["a5","li","b5","div"];<br>

dd.style=["style1","style2","style1"];<br>

dd.auto=[true,3000];<br>

dd.creat();<br>

dd=null;<br>

</div>

<div>33333<br>我每2秒切换一个选项卡</div>

<div>4444444<br>我每2秒切换一个选项卡</div>

</div>

<div><br>下面这个再来个<liskip="true">3</li>，且overStyle=true;</div>

<divid="a7">

<ul>

<liskip="true">3</li>

</ul>

</div>

<divid="b7">

<div>1111111<br>我每1秒切换一个选项卡</div>

<div>

varff=newopCard();<br>

ff.bind=["a7","li","b7","div"];<br>

ff.style=["style1","style2","style1"];<br>

ff.auto=[true,1000];<br>

ff.overChange=true;<br>

ff.overStyle=true;<br>

ff.creat();<br>

ff=null;

</div>

<div>33333<br>我每1秒切换一个选项卡</div>

<div>4444444<br>我每1秒切换一个选项卡</div>

</div>

<divclass="s">

<divid="a8">

<ul>

<liskip="true">首页</li>

<liskip="true">联系我们</li>

</ul>

</div>

<divid="b8">

<div><ahref="#">蓝色理想</a><ahref="#">blueidea</a></div>

</div>

<div><strong>注：菜单延时一秒关闭</strong><br>这里只是演示，实际可以设置下position什么的。-o-<br>多级菜单不知道能不能支持，没试过</div>

</div>

<divclass="s">

我见过的许多选项卡都不能用来嵌套<br>但还是有些时候会用到的<br>

所以如您所见，这个演示本身就是一个嵌套，效果还不错

</div>

<divclass="s">

比如图片切换什么，不过我太懒了，不写了。。。<br>

这个能干什么，我也不知道。。

<divid="a9">

<li>大家去抢红包吧</li>

<li>红包~！红包~！你在哪里啊？</li>

</div>

<divclass="s">

选项卡标题（或者菜单）必须和选项卡内容的数量相同，否则会出错<br>即使选项卡菜单skip="true"，内容也要放一个空的标签占位<br>

其他好像暂时没发现什么<br><br>

本来打算加入ajax的，但有些还没想好。<br>

效率的话，应该还行，我这个演示放了几个选项卡，似乎还不错<br><br>

写这个的目的就是以后弄选项卡只要处理样式就可以了，很多选项卡或者切换之类都是大同小异<br>

本来是打算弄些特效在里面，考虑会增加不少代码，所以不加了，简洁点。<br><br>

哦，还有选项卡是附加样式，不会取消原本设置的样式<br>

如左边的下划线是原有的样式

</div>

<divclass="s">啥都没有1</div>

<divclass="s">啥都没有2</div>

<divclass="s">啥都没有3</div>

<divclass="s">啥都没有4</div>

</td>

</tr>

</table>

</body>

</html>

摘编自【http://bbs.blueidea.com/thread-2829065-1-1.html】

分享到：

45个新鲜出炉的jQuery插件 | 流行的图片新闻幻灯片播放控件代码

2008-03-09 13:27
浏览 450
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论