管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

一个js封装的不错的选项卡效果代码

复制代码代码如下:

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

　　<html>

　　<head>

　　<title>管理资源吧选项卡效果 www.glzy8.com</title>

　　/*

　　选项卡封装

　　by 井底的蛙

　　2008-2-4

　　*/

　　opCard = function()

　　{

　　this.bind = new Array();

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

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

　　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]);

　　var my = this, i;

　　var argLen = arguments.length;

　　var arrM = new Array();

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

　　{ // 过滤出需要的数据

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

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

　　}

　　else

　　{

　　var arrMenu = _arrMenu;

　　var arrInfo = _arrInfo;

　　}

　　var l = arrMenu.length;

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

　　// 修正

　　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])

　　}

　　// 自动播放

　　function autoMove()

　　{

　　var n;

　　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暂时无用。 -_-!!

　　function autoStop(obj, num)

　　{

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

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

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

　　}

　　// 改变选项卡

　　function changeOption(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

　　*/

　　function changeTitle(obj, num)

　　{

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

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

　　}

　　/*

　　菜单类型时用

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

　　*/

　　function changeMenu(num)

　　{

　　if(!my.menu){return;}

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

　　}

　　//关闭菜单

　　function menuClose()

　　{

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

　　arrMenu[my.index].className = my.style[0];

　　}

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

　　function getClass(o, s)

　　{

　　if(o.cName==""){return s}

　　else{return o.cName + " " + s}

　　}

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

　　function getChilds(arrObj, id, num)

　　{

　　var depth = 0;

　　var firstObj = 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强制退出。

　　var t;

　　var arr = new Array();

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

　　{

　　t = arrObj[i], d = 0;

　　do

　　{

　　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强制退出

　　}

　　return arr;

　　}

　　window.onload = function()

　　{

　　var aa = new opCard();

　　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中，第一个例子

　　var bba = new opCard();

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

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

　　bba.overStyle = true;

　　bba.creat();

　　bba = null;

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

　　var bbb = new opCard();

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

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

　　bbb.overStyle = true;

　　bbb.creat();

　　bbb = null;

　　// onmousover触发中的例子

　　var cc = new opCard();

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

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

　　cc.overStyle = true;

　　cc.overChange = true;

　　cc.creat();

　　cc = null;

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

　　var dd = new opCard();

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

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

　　dd.auto = [true, 3000];

　　dd.creat();

　　dd = null;

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

　　var ee = new opCard();

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

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

　　ee.auto = [true, 2000];

　　ee.overChange = true;

　　ee.creat();

　　ee = null;

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

　　var ff = new opCard();

　　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;

　　//菜单导航例子

　　var gg = new opCard();

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

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

　　gg.overStyle = true;

　　gg.menu = true;

　　gg.creat();

　　gg = null;

　　//其他应用

　　var hh = new opCard();

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

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

　　//hh.overStyle = true;

　　hh.auto = [true, 1000];

　　hh.creat();

　　hh = null;

　　}

　　</script>

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

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

　　td,div{font-size:12px}

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

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

　　.test{text-decoration:underline;}

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

　　#b1 div.s strong{color:#0066FF;}

　　/* */

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

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

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

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

　　#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;}

　　#b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;}

　　#b8 div a{margin-right:20px;}

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

　　</style>

　　</head>

　　<body>

　　<tr>

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

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

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

　　</td>

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

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

　　<p>

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

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

　　（若不需要显示内容，只显示菜单话，可以这个在td标签上加<td skip="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>

　　<ul>

　　</ul>

　　</div>

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

　　<div>

　　var bba = new opCard();<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>

　　<ul>

　　</ul>

　　</div>

　　<div>

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

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

　　</div>

　　</div>

　　<ul>

　　</ul>

　　</div>

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

　　<div>

　　var cc = new opCard();<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>

　　<ul>

　　</ul>

　　</div>

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

　　<div>

　　var ee = new opCard();<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>

　　<ul>

　　</ul>

　　</div>

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

　　<div>

　　var dd = new opCard();<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>下面这个再来个<li skip="true">3</li>，且overStyle=true;</div>

　　<ul>

　　</ul>

　　</div>

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

　　<div>

　　var ff = new opCard();<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>

　　<ul>

　　</ul>

　　</div>

　　</div>

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

　　</div>

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

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

　　</div>

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

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

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

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

　　</div>

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

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

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

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

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

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

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

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

　　</div>

　　</td>

　　</tr>

　　</table>

　　</body>

　　</html>

教程首页更多教程