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<l;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<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.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.sum;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 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=>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吧：

/* 批量定义 */
        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不到的工资,还要养老婆,我擦