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

复制代码 代码如下:

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">




<script> <BR>/* <BR> 选项卡封装 <BR> by 井底的蛙 <BR> 2008-2-4 <BR>*/ <BR>opCard = function() <BR>{ <BR> this.bind = new Array(); <BR> this.index = 0; //默认显示哪个选项卡，从0开始 <br><br> this.style = new Array(); //["","",""] <BR> this.overStyle = false; //选项是否有over, out变换样式事件，样式为this.style[2] <BR> this.overChange = false; //内容是否用over, out直接激活 <BR> this.menu = false; //菜单类型 <BR> this.nesting = [false,false,"",""]; //是否嵌套，后面2个参数是指定menu,info的子集深度所用id <br><br> this.auto = [false, 1000]; //自动滚动[true,2000] <BR> this.timerID = null; //自动播放的 <BR> this.menutimerID = null; //菜单延时的 <br><br> this.creat = function(func) <BR> { <BR> var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]); <BR> var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]); <BR> var my = this, i; <BR> var argLen = arguments.length; <BR> var arrM = new Array(); <br><br> if(this.nesting[0] || this.nesting[1]) // 有选项卡嵌套 <BR> { // 过滤出需要的数据 <BR> var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu; <BR> var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo; <BR> } <BR> else <BR> { <BR> var arrMenu = _arrMenu; <BR> var arrInfo = _arrInfo; <BR> } <br><br> var l = arrMenu.length; <BR> if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量\n如果需要，你可以放一个空的在那占位。")} <br><br> // 修正 <BR> if(this.menu){this.auto=false;this.overChange=true;} //如果是菜单，则没有自动运行，有over, out直接激活 <br><br> // 循环添加各个事件等 <BR> for(i=0;i<l;i++) <BR> { <BR> arrMenu[i].cName = arrMenu[i].className; <BR> arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]); //加载样式，菜单的话统一样式 <br><br> if(arrMenu[i].getAttribute("skip")) // 需要跳过的容器 <BR> { <BR> if(this.overStyle || this.overChange) // 有over, out 改变样式 或者 激活 <BR> { <BR> arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);} <BR> arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);} <BR> } <BR> arrMenu[i].onclick = function(){if(argLen==1){func()}} <BR> arrInfo[i].style.display = "none"; <BR> continue; <BR> } <br><br> if(i!=this.index || this.menu){arrInfo[i].style.display="none"}; //隐藏初始化，菜单的话全部隐藏 <BR> arrMenu[i].index = i; //记录自己激活值[序号] <BR> arrInfo[i].index = i; <br><br> <BR> if(this.overChange) //有鼠标over, out事件 <BR> { <BR> arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);} <BR> arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);} <BR> } <BR> else //onclick触发 <BR> { <BR> arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}} <BR> if(this.overStyle) // 有over, out 改变样式 <BR> { <BR> arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);} <BR> arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);} <BR> } <BR> else // 没有over, out 改变样式 <BR> { <BR> if(this.auto[0]) // 有自动运行 <BR> { <BR> arrMenu[i].onmouseover = function(){autoStop(this, 0);} <BR> arrMenu[i].onmouseout = function(){autoStop(this, 1);} <BR> } <BR> } <BR> } <br><br> if(this.auto[0] || this.menu) //arrinfo 控制自动播放 <BR> { <BR> arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);} <BR> arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);} <BR> } <BR> } //for结束 <br><br> if(this.auto[0]) <BR> { <BR> this.timerID = setTimeout(autoMove,this.auto[1]) <BR> } <br><br> // 自动播放 <BR> function autoMove() <BR> { <BR> var n; <BR> n = my.index + 1; <BR> if(n==l){n=0}; <BR> while(arrMenu[n].getAttribute("skip")) // 需要跳过的容器 <BR> { <BR> n += 1; <BR> if(n==l){n=0}; <BR> } <BR> changeOption(arrMenu[n]); <BR> my.timerID = setTimeout(autoMove,my.auto[1]); <BR> } <br><br> // onmouseover时，自动播放停止。num：0为over，1为out。 obj暂时无用。 -_-!! <BR> function autoStop(obj, num) <BR> { <BR> if(!my.auto[0]){return;} <BR> //if(obj.index==my.index) <BR> num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]); <BR> } <br><br> // 改变选项卡 <BR> function changeOption(obj) <BR> { <BR> arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]); //修改旧内容 <BR> arrInfo[my.index].style.display = "none"; //隐藏旧内容 <br><br> obj.className = getClass(obj,my.style[1]); //修改为新样式 <BR> arrInfo[obj.index].style.display = ""; //显示新内容 <br><br> my.index = obj.index; //更新当前选择的index <BR> } <br><br> /* <BR> 只有onclick时，overStyle的onmouseover,onmouseout事件。用来预激活 <BR> obj：目标对象。 num：1为over，0为out <BR> */ <BR> function changeTitle(obj, num) <BR> { <BR> if(!my.overStyle){return;}; <BR> if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])} <BR> } <br><br> /* <BR> 菜单类型时用 <BR> obj：目标对象。 num：1为over，0为out <BR> */ <BR> function changeMenu(num) <BR> { <BR> if(!my.menu){return;} <BR> num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID) <BR> } <br><br> //关闭菜单 <BR> function menuClose() <BR> { <BR> arrInfo[my.index].style.display = "none"; <BR> arrMenu[my.index].className = my.style[0]; <BR> } <br><br> // 得到className（防止将原有样式覆盖） <BR> function getClass(o, s) <BR> { <BR> if(o.cName==""){return s} <BR> else{return o.cName + " " + s} <BR> } <br><br> //嵌套情况下得到真正的子集 <BR> function getChilds(arrObj, id, num) <BR> { <BR> var depth = 0; <BR> var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]); //得到第一个子集 <BR> do //计算深度 <BR> { <BR> if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1} <BR> firstObj = firstObj.parentNode; <BR> } <BR> while(firstObj.tagName.toLowerCase()!="body") // body强制退出。 <br><br> var t; <BR> var arr = new Array(); <BR> for(i=0;i<arrObj.length;i++) //过滤出需要的数据 <BR> { <BR> t = arrObj[i], d = 0; <BR> do <BR> { <BR> if(t.parentNode.getAttribute("id")==id && d == depth) <BR> { <BR> arr.push(arrObj[i]);break; //得到数据 <BR> } <BR> else <BR> { <BR> if(d==depth){break};d+=1; <BR> } <BR> t = t.parentNode; <BR> } <BR> while(t.tagName.toLowerCase()!="body") // body强制退出 <BR> } <BR> return arr; <BR> } <BR> } <BR>} <BR>window.onload = function() <BR>{ <BR> var aa = new opCard(); <BR> aa.bind = ["a1","div","b1","div"]; <BR> aa.style = ["a1_0","a1_1","a1_0"]; <BR> aa.index = 0; <BR> aa.nesting = [false,true,"",""] <BR> aa.creat(); <BR> aa =null; <br><br> // 默认的onclick中，第一个例子 <BR> var bba = new opCard(); <BR> bba.bind = ["a2","li","b2","div"]; <BR> bba.style = ["style1","style2","style3"]; <BR> bba.overStyle = true; <BR> bba.creat(); <BR> bba = null; <br><br> // 默认的onclick中，第二个例子 <BR> var bbb = new opCard(); <BR> bbb.bind = ["a3","li","b3","div"]; <BR> bbb.style = ["style1","style2","style3"]; <BR> bbb.overStyle = true; <BR> bbb.creat(); <BR> bbb = null; <br><br> // onmousover触发中的例子 <BR> var cc = new opCard(); <BR> cc.bind = ["a4","li","b4","div"]; <BR> cc.style = ["style1","style2","style3"]; <BR> cc.overStyle = true; <BR> cc.overChange = true; <BR> cc.creat(); <BR> cc = null; <br><br> //自动播放auto第一个例子 <BR> var dd = new opCard(); <BR> dd.bind = ["a5","li","b5","div"]; <BR> dd.style = ["style1","style2","style3"]; <BR> dd.auto = [true, 3000]; <BR> dd.creat(); <BR> dd = null; <br><br> //自动播放auto第二个例子 <BR> var ee = new opCard(); <BR> ee.bind = ["a6","li","b6","div"]; <BR> ee.style = ["style1","style2","style3"]; <BR> ee.auto = [true, 2000]; <BR> ee.overChange = true; <BR> ee.creat(); <BR> ee = null; <br><br> //自动播放auto第三个例子 <BR> var ff = new opCard(); <BR> ff.bind = ["a7","li","b7","div"]; <BR> ff.style = ["style1","style2","style3"]; <BR> ff.auto = [true, 1000]; <BR> ff.overChange = true; <BR> ff.overStyle = true; <BR> ff.creat(); <BR> ff = null; <br><br> //菜单导航例子 <BR> var gg = new opCard(); <BR> gg.bind = ["a8","li","b8","div"]; <BR> gg.style = ["style1","style2","style3"]; <BR> gg.overStyle = true; <BR> gg.menu = true; <BR> gg.creat(); <BR> gg = null; <br><br> //其他应用 <BR> var hh = new opCard(); <BR> hh.bind = ["a9","li","a9","li"]; <BR> hh.style = ["style4","style4","style4"]; <BR> //hh.overStyle = true; <BR> hh.auto = [true, 1000]; <BR> hh.creat(); <BR> hh = null; <BR>} <BR></script>




  
    
    
  

简单介绍          默认的onclick          onmousover触发          自动播放auto          菜单导航          关于嵌套          其他应用          一些说明

封装了一个选项卡，不过已经不像选项卡了-_-!!!             现稍微说明下吧，如果不明白的话，旁边有几个例子可能说明起来更清楚些                          obj.bind = ["a1","td","b1","div"];             绑定id="a1"下的td标签为菜单，绑定id="b1"下的div标签为内容，简单么？             td标签的数量和div标签的数量必须相同             （若不需要显示内容，只显示菜单话，可以这个在td标签上加

）             如果id="a1"下的td标签有嵌套表格，这样的话，就不是所有的td都是菜单，这时候需要用下nesting             obj.nesting = [false,true,"",""];             当标签tag有嵌套时，需要用到这个             比如选项卡内容是放在div容器里，而本身这个内容里也有div标签，这时就需要用到             菜单嵌套为false，内容嵌套为true，且会自动判断出内容标签，多数时候这样就可以了             判断方法为，认定getElementsByTagName后第一个标签为内容第一项，其他的就用这个第一项的深度来判断             但有些情况下，这样还是不行             我用后面2个参数做id来指定菜单或者内容的第一项nesting = [false,true,"","q2"];             这样就肯定不会错了（不明白的话看下例子就简单多了）             obj.index = 0;             默认显示第几个选项卡，序号从0开始             obj.style = ["c1","c2","c3"]             菜单加载的样式的className：             菜单未选中的className是c1             菜单选中的className是c2             菜单onmouseover的className是c3             obj.overStyle = false;             选项卡是否有onmouseover, onmouseout变换样式事件[非激活选项卡内容]，对应的样式为style[2]             obj.overChange = false;             选项卡内容是否用onmouseover, onmouseout直接激活             obj.menu = false;             选项卡是菜单类型             obj.auto = [false, 1000];             选项卡是否自动播放，播放速度（毫秒）             obj.creat();             开始生成选项卡，需要onclick触发事件的话，可以obj.creat(函数名)             所有的都会触发                                                                                1                2                3                4                                                 这个例子是用onclick触发的 并设置overStyle = true; (over，out改变样式,但不激活)                              var bba = new opCard();                 bba.bind = ["a2","li","b2","div"];                 bba.style = ["style1","style2","style1"];                 bba.overStyle = true;                 bba.creat();                 bba = null;                           33333              4444444                                                            1                2                3                4                                                                 这个例子是比上面增加skip="true" 即 4 所以选项卡4是没有内容的                 你可以为选项卡的文字直接加上链接，我这里就不加了                           222222              33333              4444444                                                                              1                2                3                4                                                 这个例子是用onmouseover触发的 (over，out直接激活) 并且 3 [选项卡3不会被激活] overStyle = true;                              var cc = new opCard();                 cc.bind = ["a4","li","b4","div"];                 cc.style = ["style1","style2","style1"];                 cc.overStyle = true;                 cc.overChange = true;                 cc.creat();                 cc = null;                           33333              4444444                                                                              1                2                3                4                                                 1111111 我每3秒切换一个选项卡                              var ee = new opCard();                 ee.bind = ["a6","li","b6","div"];                 ee.style = ["style1","style2","style1"];                 ee.auto = [true, 2000];                 ee.overChange = true;                 ee.creat();                 ee = null;                           33333 我每3秒切换一个选项卡              4444444 我每3秒切换一个选项卡                       注：鼠标在选项卡任意位置都会使停止播放 下面这个结合overChange一起                                                   1                2                3                4                                                 1111111 我每2秒切换一个选项卡                              var dd = new opCard();                 dd.bind = ["a5","li","b5","div"];                 dd.style = ["style1","style2","style1"];                 dd.auto = [true, 3000];                 dd.creat();                 dd = null;                           33333 我每2秒切换一个选项卡              4444444 我每2秒切换一个选项卡                       下面这个再来个 3 ，且overStyle=true;                                                   1                2                3                4                                                 1111111 我每1秒切换一个选项卡                              var ff = new opCard();                 ff.bind = ["a7","li","b7","div"];                 ff.style = ["style1","style2","style1"];                 ff.auto = [true, 1000];                 ff.overChange = true;                 ff.overStyle = true;                 ff.creat();                 ff = null;                           33333 我每1秒切换一个选项卡              4444444 我每1秒切换一个选项卡                                                                              首页                新闻                论坛                联系我们                                                              国内新闻国际新闻娱乐新闻体育新闻              蓝色理想blue idea                                    注：菜单延时一秒关闭 这里只是演示，实际可以设置下position什么的。-o- 多级菜单不知道能不能支持，没试过                               我见过的许多选项卡都不能用来嵌套 但还是有些时候会用到的             所以如您所见，这个演示本身就是一个嵌套，效果还不错                                        比如图片切换什么，不过我太懒了，不写了。。。             这个能干什么，我也不知道。。                             新年好啊                快过年了                天好冷啊                大家去抢红包吧                红包~！红包~！你在哪里啊？                                                         选项卡标题（或者菜单）必须和选项卡内容的数量相同，否则会出错 即使选项卡菜单skip="true"，内容也要放一个空的标签占位             其他好像暂时没发现什么             本来打算加入ajax的，但有些还没想好。             效率的话，应该还行，我这个演示放了几个选项卡，似乎还不错             写这个的目的就是以后弄选项卡只要处理样式就可以了，很多选项卡或者切换之类都是大同小异             本来是打算弄些特效在里面，考虑会增加不少代码，所以不加了，简洁点。             哦，还有选项卡是附加样式，不会取消原本设置的样式             如左边的下划线是原有的样式                   啥都没有1          啥都没有2          啥都没有3          啥都没有4