var Tab = function(tab,_params) {
var _this = this;
//保存单个Tab组件
this.tab = tab;
this.params = _params;
//默认配置参数
this.config = {
//用来定义鼠标的出发类型 "click"/mouseover
"triggerType": "mouseover",//用来定义内容切换效果,直接切换/淡入淡出
"effect": "default",//默认展示第几个Tab
"invoke": "1",//用来定义Tab是否自动切换,当指定了事件间隔,就表示自动切换,并指定了切换间隔
"auto": false
};
//如果配置参数存在,就扩展默认的配置参数
if(this.params){
$.extend(this.config,this.params);
}
//保存Tab标签列表,以及对应的内容列表
this.tabItem = this.tab.find("ul.tab-nav li");
this.contentItem = this.tab.find("div.content-wrap .content-item");
//保存配置参数
var config = this.config;
if(config.triggerType === "click") {
this.tabItem.bind(config.triggerType,function() {
_this.invoke($(this));
});
} else {
this.tabItem.mouseover(function(){
_this.invoke($(this));
});
}
//自动切换功能
if(config.auto) {
this.timmer = null;
//计数器
this.loop = 0;
this.autoPlay();
this.tab.hover(function() {
window.clearInterval(_this.timmer);
},function() {
_this.autoPlay();
});
}
//设置默认显示第几个Tab
if(config.invoke > 1) {
this.invoke(this.tabItem.eq(config.invoke - 1));
}
};
Tab.prototype = {
//事件驱动函数
invoke: function(currentTab) {
/**
- 1、执行Tab选中状态,当前选中Tab加上Active, 2、切换对应Tab内容,根据配置参数effect参数default|fade
/
var index = currentTab.index();
var conItem = this.contentItem;
//Tab切换
currentTab.addClass("active").siblings().removeClass("active");
//内容区域切换
var effect = this.config.effect;
if(effect === "fade") {
conItem.eq(index).fadeIn().siblings().fadeOut();
} else {
conItem.eq(index).addClass("current").siblings().removeClass("current");
}
//注意,如果配置了自动切换,记得把当前的loop值设置为当前的Tab的index
if(this.config.auto) {
this.loop = index;
}
},//自动间隔切换
autoPlay: function() {
var this = this,tabItems = this.tabItem,//临时保存Tab列表
tabLength = tabItems.size(),config = this.config;
this.timmer = window.setInterval(function() {
this.loop++;
if(this.loop >= tabLength) {
this.loop = 0;
}
tabItems.eq(_this_.loop).trigger(config.triggerType);
},config.auto);
}
};
Tab.init = function(tabs) {
var this = this;
tabs.each(function() {
new this($(this));
});
// var tab = new Tab($(".js-tab").eq(0));
};
//注册成JQuery方法
$.fn.extend({
etab: function(_param) {
this.each(function () {
new Tab($(this),_param);
});
return this;
}
});
window.Tab = Tab;
})(jQuery);