Tab切换类Lix Tabs 0.2

Tab切换类Lix Tabs 0.2

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

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

Lix Tabs 0.2的源码：

/* 类:Lix Tabs版本:0.2作者:十年灯 :欢迎使用,欢迎转载,但请勿据为已有*/	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 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.w = s = 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 = ;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){useover = function(){t.stop()}useout = function(){t.go()}}}Tabs.prototype = {change:function(){cutover(this.w,this.hdtagcur,this.hdtagno);cutover(this.w,this.bdtagcur,this.bdtagno);if(this.time && s){w = (w == this.sum-1) ? 0 : w+();}},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的指向变了，老是让需要调用的函数执行出错。。呃

转载于:.html