Tab切换类Lix Tabs 0.1发布

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 : ElementById(id);};var $$=function(tag,elm){ElementsByTagName(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<l;i++){st(ts[i].className)){classArr.push(ts[i]);}}return classArr;}var cutover=function(arr,cur,c1,c0){for(var i=0,l=arr.length;i<l;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.w = 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.sum;i++){t.tabtag[i].to = i;t.tabtag[i].onmouseover = function(){t.now = ;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();useover = function(){clearTimeout(t.run);}useout = 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.w,this.hdtagcur,this.hdtagno);cutover(this.w,this.bdtagcur,this.bdtagno);}};

Lix Tabs的说明:

1,基本说明:

有默认参数如下:

items:{hdtag:'DIV',//tab头的标签hdcn:'tabhd',//tab头的classNamehdtagcur:'cur',//tab头中当前标签的classNamehdtagno:'',//tab头中非当前标签的classNamebdtag:'DIV',//tab内容区的标签bdcn:'tabbd',//tab内容区的classNamebdtagcur:'cur',//tab内容区中当前标签的classNamebdtagno:''//tab内容区中非当前标签的className
}

<div class="inner" id="tabLite"><div class="tabhd"><a class="cur" title="" href="#">城市指数</a><a title="" href="#" class="">名牌指数</a><a title="" href="#" class="">网上百货</a></div><div class="tabbd"><div class="cur"><ul><li>·<a title="" href="#">0上海起火楼工程多萨斯附属卡</a></li><li>·<a title="" href="#">损失达5亿 忠犬不吃了快速扩大解放</a></li></ul></div><div class=""><ul><li>·<a title="" href="#">1上海起火楼工程多</a></li><li>·<a title="" href="#">损失达5亿 忠犬不吃</a></li></ul></div><div class=""><ul><li>·<a title="" href="#">2上海起火楼工程多</a></li><li>·<a title="" href="#">损失达5亿 忠犬不吃</a></li></ul></div></div></div>

2,使用指南：

Lix Tabs有三个重要的外置函数,即$id=>getElementById,$$=>getElementsByTagName,$C=&具体请看源码

有一个必需参数,就是到底是哪个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吧：

/* 批量定义 */
        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最新版：点击查看0.2

----------------------------------------------------------------------------------

结语:Lix Tabs是个功能非常简单的JS类,所以尽量精简.这次发布的是0.1版,如果以后我的JS水平提高了,肯定会改进+优化,但应该不会添加过渡特效...

以下内容可无视:

感叹几句,我的JS水平真差,不说别的,博客园上的JS文章我只有很少能看懂的;JS真的有点难;好想面对面向高手们学学;最后,活着真不容易,拿着3000不到的工资,还要养老婆,我擦

转载于:.html