Mikel
[转载]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水平提高了,肯定会改进+优化,但应该不会添加过渡特效…
