Tab切换类Lix Tabs 0.2
经过几次修改,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做了如下改进:
- 加入了切换延迟:为防止不经意划过也产生了切换的情况,为切换加入了300ms的延迟,如果鼠标在切换标签上停留未超过0.3秒就移开了,则不会进行切换
- 取消了0.1中的items默认参数。主要是个人觉得非必要加入这个参数然后又来读取,现在采用直接赋值的方式,例如t.hdcn =a.hdcn || 'tabhd',减少了读取深度
- 为Tabs增加了一个参数。对应第2点,现在是function (elm,items),多了一个items,用来接收变量,但调用方式未变。
- 增加了一个外部函数Bind。这是从cloudgamer大哥那儿偷的,去掉了一些对Tabs无用的代码;这个函数的作用是转嫁函数,相当于JS中的apply。谢谢cloudgamer
- 去掉了原来的初始化函数。0.1中的初始化函数其实就是个匿名函数,定义后就立即执行了,执行一次就扔了,所以我干脆把里面的代码移出来,放到了函数主体内
- 增加了一个变量yes。主要是为了防止在自动切换的对象上,当用鼠标触发了切换后,它还是会继续自动切换的情况。现在是必须鼠标离开tab标签才会继续自动切换
0.2相对于0.1的优化:
- 总的来说变量更少了,速度也许有一点点提高
- 切换,自动切换与停止自动切换都放到了prototype中,代码规范了一些
0.2依旧待改进的地方:
- 初始化过程依旧在函数主体内放着
- 虽然自动切换与停止都在prototype中,但触发自动切换停止与继续的函数依旧在函数主体内
效果预览:点这里
实例打包下载:点这里
------------------------------------------------------------------------
总结:函数转接真的很重要,这次主要的看得见的改进就是加入了切换延迟,但就是这一点小功能简直让我束手无策。由于this的指向变了,老是让需要调用的函数执行出错。。呃
推荐.NET配套的通用数据层ORM框架:CYQ.Data 通用数据层框架