[转载]Tab切换类Lix Tabs 0.1发布 – 十年灯 – 博客园.
近期正在做的这个网站中,有的页面同时会出现好几个tab切换效果。在没有写这个类之前,每碰到多一个TAB我就得复制一遍tab函数,关键是这函数其实功能与前几个没什么两样。但不复制又不行,因为那tab函数是没法重用的。每当做到这里,都让我苦不堪言。
在博客园上参观了几位牛人的JavaScript实例后,我就开始琢磨着写这么一个类。这是否能叫类呢,我也不确定,不过确定能用就行了。修修改改 用了两周+的时间,发现好像没什么bug了,于是发布出来,斗胆加上个自己的代号吧。顺便放出源码供新人参考,高手看了也不要批我,我真的是新手。
功能与示例:
可以实现同一页面N个tab切换(n>0),效果可参考网易首页的那一整篇tab菜单,或点击查看示例页
Lix Tabs的源码:
var $id=function(id){ return (typeof id == "Object") ? id : document.getElementById(id); }; var $$=function(tag,elm){ return elm.getElementsByTagName(tag); }; var $C=function(cn,tag,elm){ if(!tag) tag='*'; var ts = $$(tag,elm); var classArr = []; var filter = new RegExp("(^|\\s)"+cn+"(\\s|$)"); for(var i=0,l=ts.length;i if(filter.test(ts[i].className)){ classArr.push(ts[i]); } } return classArr; } var cutover=function(arr,cur,c1,c0){ for(var i=0,l=arr.length;i arr[i].className = (i ==cur) ? c1 : c0; } } var Tabs = function (elm){ if(elm == null){return false;} var t=this; /*开始缓存传入参数*/ t.hdtag =arguments[1].hdtag || t.items.hdtag; t.hdcn =arguments[1].hdcn || t.items.hdcn; t.hdtagcur =arguments[1].hdtagcur || t.items.hdtagcur; t.hdtagno =arguments[1].hdtagno || t.items.hdtagno; t.bdtag =arguments[1].bdtag || t.items.bdtag; t.bdcn =arguments[1].bdcn || t.items.bdcn; t.bdtagcur =arguments[1].bdtagcur || t.items.bdtagcur; t.bdtagno =arguments[1].bdtagno || t.items.bdtagno; /*缓存参数完成*/ t.tabhd = $C(t.hdcn,t.hdtag,elm)[0]; t.tabtag = t.tabhd.children; t.tabbd = $C(t.bdcn,t.bdtag,elm)[0]; t.tabcon = t.tabbd.children; t.now = 0; t.time =arguments[1].auto; t.sum = t.tabtag.length; if(t.sum != t.tabcon.length) { alert('Tab标签个数与内容个数不匹配'); return true; } (function(){ for(var i=0;i t.tabtag[i].to = i; t.tabtag[i].onmouseover = function(){ t.now = this.to; t.change(); } } })(); if(t.time) { function go(){ t.change(); t.now = (t.now == t.sum-1) ? 0 : t.now+1; t.run =setTimeout(arguments.callee,t.time); }; go(); elm.onmouseover = function(){clearTimeout(t.run);} elm.onmouseout = function(){t.run =setTimeout(go,t.time);} } } Tabs.prototype = { items:{ hdtag:'DIV', hdcn:'tabhd', hdtagcur:'cur', hdtagno:'', bdtag:'DIV', bdcn:'tabbd', bdtagcur:'cur', bdtagno:'' }, change:function(){ cutover(this.tabtag,this.now,this.hdtagcur,this.hdtagno); cutover(this.tabcon,this.now,this.bdtagcur,this.bdtagno); } };
Lix Tabs的说明:
1,基本说明:
有默认参数如下:
items:{ hdtag:'DIV',//tab头的标签 hdcn:'tabhd',//tab头的className hdtagcur:'cur',//tab头中当前标签的className hdtagno:'',//tab头中非当前标签的className bdtag:'DIV',//tab内容区的标签 bdcn:'tabbd',//tab内容区的className bdtagcur:'cur',//tab内容区中当前标签的className bdtagno:''//tab内容区中非当前标签的className }
绕晕了?实例对照:
<div id="tabLite" class="inner"> <div class="tabhd"><a class="cur" href="#">城市指数</a><a href="#">名牌指数</a><a href="#">网上百货</a></div> <div class="tabbd"> <div class="cur"> <ul> <li>·<a href="#">0上海起火楼工程多萨斯附属卡</a></li> <li>·<a href="#">损失达5亿 忠犬不吃了快速扩大解放</a></li> </ul> </div> <div> <ul> <li>·<a href="#">1上海起火楼工程多</a></li> <li>·<a href="#">损失达5亿 忠犬不吃</a></li> </ul> </div> <div> <ul> <li>·<a href="#">2上海起火楼工程多</a></li> <li>·<a href="#">损失达5亿 忠犬不吃</a></li> </ul> </div> </div> </div>
2,使用指南:
Lix Tabs有三个重要的外置函数,即$id=>getElementById,$$=>getElementsByTagName,$C=>getElementsByClassName…具体请看源码
有一个必需参数,就是到底是哪个HTML对象要切换(注:参数是html对象而不是字符串!)
调用:
参数默认时:var t1 = new Tabs($id(‘t1’));(划线位置即是一个通过$id得到的HTML元素)
自传参数:
var t1= new Tabs($id( 'blog' ),{hdcn: 'tab-hd' ,hdtagcur: 'tab-u current' ,hdtagno: 'tab-u' ,bdcn: 'tab-bd' ,bdtagcur: 'current' ,bdtagno: 'tab-con' ,auto:4000}); |
注:auto的值就是自动切换的间隔时间,如果不想自动切换,不传auto即可.
如果tab太多,那像上面那样一个一个new无疑太麻烦了。这时也可批量定义,给需要tab的地方都加上一个共同的class吧:
/* 批量定义 */ <br> var as = $C( 'as' , 'DIV' ,document); |
for ( var i=0,l=as.length;i<l;i++){ |
as[i].tab = new Tabs(as[i],{hdtag: 'UL' ,hdcn: 'sn' ,hdtagcur: 'now' ,bdcn: 'imgs' ,bdtagcur: 'cur' ,auto:2000}); |
} |
注:批量定义适于类似网易首页的多tab结构甚至CSS都相同的情况.
容错能力:
只对最常见的错误–Tabs(elm)的elm拼错了而导致找不到HTML对象–有容错能力,Tabs会忽略这个错误,所以不会影响后续调用.
Lix Tabs的优缺点:
优点:代码少,纯代码大概2.3K;可批量应用;可设置是否自动切换;自动识别tab标签个数…貌似没了
缺点:切换无过渡特效,一点也不炫;也许有暂未发现的效率问题;也许源代码不够优化;参数也许有点多…
已知问题:在得到tab元素时使用的是children而非childNodes,所以不符合W3C标准。。。有w3c强迫症的人群慎用
完整实例下载:点击下载
———————————————————————————-
结语:Lix Tabs是个功能非常简单的JS类,所以尽量精简.这次发布的是0.1版,如果以后我的JS水平提高了,肯定会改进+优化,但应该不会添加过渡特效…