为啥提示tabItems.size is not a function
(function($){
var Tab = function(tab) {
var _this = this;
this.tab = tab;
//默认配置参数
this.config = {
"triggerType": "mouseover", //鼠标的触发类型，click/mouseover
"effect": "default", //内容切换效果，无效果/淡入淡出
"invoke": 1, //默认显示第几个tab
"auto": false //tab是否自动切换
}
//如果传了配置参数，就覆盖默认配置参数
if(this.getConfig()){
$.extend(this.config, this.getConfig())
}
this.tabItems = this.tab.find("ul.tab-nav li")
this.contentItems = this.tab.find("div.content-wrap .content-item")
var config = this.config;
if(config.triggerType === "click"){
this.tabItems.bind(config.triggerType,function(){
_this.invoke($(this))
})
}else if(config.triggerType === "mouseover" || config.triggerType != "click"){
this.tabItems.on('mouseover',function(){
_this.invoke($(this))
})
}
//自动切换
if(config.auto){
//定义一个全局定时器
this.timer = null;
//计数器
this.loop = 0;
this.autoplay()
}
};
Tab.prototype = {
//获取配置参数
getConfig:function() {
var config = this.tab.data('config') //对象
if(config && config!=""){
return config
}else{
return null
}
},
//切换
invoke:function(currentTab) {
var _this = this;
var index = currentTab.index()
//切换选项卡
currentTab.addClass('actived').siblings().removeClass('actived')
//切换内容（根据不同effect效果）
var effect = this.config.effect;
var contentItems = this.contentItems;
if(effect === "default" || effect != "fade"){
contentItems.eq(index).addClass('current').siblings().removeClass('current')
}else if(effect === "fade"){
contentItems.eq(index).fadeIn().siblings().fadeOut()
}
},
//自动切换
autoplay:function(){
var _this = this,
tabItems = this.tabItems,
tabLength = tabItems.size(),
config = this.config
this.timer = setInterval(function(){
_this.loop++;
if(_this.loop >= tabLength){
_this.loop = 0
}
tabItems.eq(_this.loop).trigger(config.triggerType)
}, config.auto)
}
};
window.Tab = Tab;
})(jQuery)
