自己写的一个简单的Tab类

//------------- PS_DOM 功能函数 start----------------
var PS_DOM ={
indexOf: function(arr, e){
for(var i= 0; i<arr.length; i++){
if(arr[i]===e) return i;
}
return -1;
},
addClass: function(o,cls){
var arrCls = o.className.split(" ");
if( this.indexOf(arrCls,cls)==-1) {arrCls.push(cls); o.className =arrCls.join(" ").replace(/(^\s*|\s*$)/g,"");}
},
removeClass: function(o, cls){
var arrCls = o.className.split(" "),i;
if( (i=this.indexOf(arrCls,cls))!== -1){
arrCls[i]="";
o.className = arrCls.join(" ");
}
},
hasClass: function(o,cls){
var arrCls = o.className.split(" ");
return (this.indexOf(arrCls,cls)==-1) ? false : true;
},
$byClass: function(clsName,root,tag){
if(root){
if(typeof root=='string') root=document.getElementById(root);
}else{
root=document.body;
}

tag=tag||'*';
var arr=[],eles;
eles=root.getElementsByTagName(tag);

for(var i=0,n=eles.length;i<n;i++){
if(this.hasClass(eles[i], clsName)) arr.push(eles[i]);
}

return arr;
}
};
//------------- PS_DOM 功能函数 end ----------------

//--------------------- Tab类 start ------------------
function Tab(config){
this.root=config.root;
this.active_class=config.active_class;
var trigger=config.trigger?config.trigger:'click';
var tabCls = config.tabCls || 'tab-menu',
tabConCls = config.tabConCls || 'tab-content',
tabTag = config.tabTag || '*',
tabConTag = config.tabConTag || '*';

//获得tab_menus tab_contents
this.tab_menus=PS_DOM.$byClass(tabCls,this.root, tabTag);
this.tab_contents=PS_DOM.$byClass(tabConCls,this.root, tabConTag);
var len=this.tab_menus.length;
var menu_active=config.menu_active;

//若指定了默认激活的选项卡则激活之
if(menu_active>1 && menu_active<=len){
this.activeMenu(menu_active-1); //index=menu_active-1
this.menu_active_index=menu_active-1;
}else{
this.menu_active_index=0;
}
var that=this;
//循环遍历设置 tab-menu _index属性和点击事件监听器
for(var j=0;j<len;j++){
this.tab_menus[j]._index=j;
this.tab_menus[j]['on'+trigger]=(function(k){return function(){that.activeMenu(k)};})(j);}

}

Tab.prototype={
activeMenu:function(index){
for(var m=0;m<this.tab_menus.length;m++){
if(m!=index && PS_DOM.hasClass(this.tab_menus[m],this.active_class[0])){
PS_DOM.removeClass(this.tab_menus[m],this.active_class[0]);
PS_DOM.removeClass(this.tab_contents[m],this.active_class[1]);
}

if(index==m && (! PS_DOM.hasClass(this.tab_menus[m],this.active_class[0]) ) ){
PS_DOM.addClass(this.tab_menus[m],this.active_class[0]);
PS_DOM.addClass(this.tab_contents[m],this.active_class[1]);
}
}
}
};

// 调用示例：var mytab=new Tab({root:$id('mytab'),tabCls:'tab', tabConCls:'con', tabTag:'a', tabConTag:'div', trigger:'click',menu_active:1,active_class:['tab_menu_active','tab_content_active']});

//----------------------------------------------------- jQuery版本的Tab -----------------------------

function Tab(config){
var tabDiv = config.tabDivSelector || 'mytab',
tabCls = config.tabCls || 'tab',
conCls = config.conCls || 'con',
activeCls = config.activeCls || 'on';
trigger = config.trigger || 'click';

var tabs = $('.' +tabCls, tabDiv).eq(0).siblings('.'+tabCls).andSelf(), // ~~~当tabCon内再嵌套一个选项卡则会有问题，这里修正一下
cons = $('.'+conCls, tabDiv).eq(0).siblings('.'+conCls).andSelf();
//定义事件处理函数
tabs.bind(trigger,function(){
var clkIdx = $('.' +tabCls, tabDiv).index(this);
$(this).addClass(activeCls).siblings().removeClass(activeCls);
cons.eq(clkIdx).addClass(activeCls).siblings().removeClass(activeCls);
});
}
$.extend({'Tab':Tab});

$.Tab({tabDiv:'#tabDiv', tabCls:'tab', conCls:'tabCon',activeCls:'on'});

巴特西

自己写的一个简单的Tab类

最新文章

热门文章