学步园

经过几次修改，Tab切换类Lix Tabs 0.2正式发布，有人鼓掌么？没有！那算了。。。

Lix Tabs 0.1及使用方式请点这里

Lix Tabs 0.2的源码：

/* 
	类:Lix Tabs
	版本:0.2
	作者:十年灯 http://www.cnblogs.com/lixlib/
	说明:欢迎使用,欢迎转载,但请勿据为已有
	
 */	
	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 Bind = function(object, fun) {
		return function() {
			return fun.apply(object);
		}
	}
	var Tabs = function (elm,items){
		if(elm == null){return false;}
		var t=this;
		var a=items;
		
		/*开始缓存传入参数*/
		t.hdtag =a.hdtag || 'DIV';
		t.hdcn =a.hdcn || 'tabhd';
		t.hdtagcur =a.hdtagcur || 'cur';
		t.hdtagno =a.hdtagno || '';
		t.bdtag =a.bdtag || 'DIV';
		t.bdcn =a.bdcn || 'tabbd';
		t.bdtagcur =a.bdtagcur || 'cur';
		t.bdtagno =a.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.yes = true;
		t.time =a.auto;
		t.sum = t.tabtag.length;
		if(t.sum != t.tabcon.length) {
			alert('Tab标签个数与内容个数不匹配');
			return true;
		}
		/**/
		for(var i=0;i<t.sum;i++){
			t.tabtag[i].to = i;
			t.tabtag[i].onmouseover = function(){
				t.now = this.to;
				t.yes = false;
				this.run = setTimeout(Bind(t,t.change),300);
			}
			t.tabtag[i].onmouseout = function(){
				t.yes = true;
				clearTimeout(this.run);
			}
		}
		this.change();
		if(t.time){
			elm.onmouseover = function(){
				t.stop()
			}
			elm.onmouseout = function(){
				t.go()
			}
			
		}
	}
	Tabs.prototype = {
		change:function(){
			cutover(this.tabtag,this.now,this.hdtagcur,this.hdtagno);
			cutover(this.tabcon,this.now,this.bdtagcur,this.bdtagno);
			if(this.time && this.yes){
				this.now = (this.now == this.sum-1) ? 0 : this.now+1;
				this.go();
			}
		},
		go:function(){
			this.stop();
			this.auto = setTimeout(Bind(this,this.change),this.time)
		},
		stop:function(){
			clearTimeout(this.auto);
		}
	};

相对于0.1来说，Lix Tabs 0.2做了如下改进：

1. 加入了切换延迟：为防止不经意划过也产生了切换的情况，为切换加入了300ms的延迟，如果鼠标在切换标签上停留未超过0.3秒就移开了，则不会进行切换
2. 取消了0.1中的items默认参数。主要是个人觉得非必要加入这个参数然后又来读取，现在采用直接赋值的方式，例如t.hdcn =a.hdcn || 'tabhd'，减少了读取深度
3. 为Tabs增加了一个参数。对应第2点，现在是function (elm,items)，多了一个items，用来接收变量，但调用方式未变。
4. 增加了一个外部函数Bind。这是从cloudgamer大哥那儿偷的，去掉了一些对Tabs无用的代码；这个函数的作用是转嫁函数，相当于JS中的apply。谢谢cloudgamer
5. 去掉了原来的初始化函数。0.1中的初始化函数其实就是个匿名函数，定义后就立即执行了，执行一次就扔了，所以我干脆把里面的代码移出来，放到了函数主体内
6. 增加了一个变量yes。主要是为了防止在自动切换的对象上，当用鼠标触发了切换后，它还是会继续自动切换的情况。现在是必须鼠标离开tab标签才会继续自动切换

0.2相对于0.1的优化：

1. 总的来说变量更少了，速度也许有一点点提高
2. 切换，自动切换与停止自动切换都放到了prototype中，代码规范了一些

0.2依旧待改进的地方：

1. 初始化过程依旧在函数主体内放着
2. 虽然自动切换与停止都在prototype中，但触发自动切换停止与继续的函数依旧在函数主体内

效果预览：点这里

实例打包下载：点这里

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

总结：函数转接真的很重要，这次主要的看得见的改进就是加入了切换延迟，但就是这一点小功能简直让我束手无策。由于this的指向变了，老是让需要调用的函数执行出错。。呃