Tab切换类Lix Tabs 0.2

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

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

Lix Tabs 0.2的源码：

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

/*     类: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的指向变了，老是让需要调用的函数执行出错。。呃