洛洛
2018-04-26 11:09
// 立即执行函数 ;(function($){ var Tab=function(tab){ var _this=this; this.tab=tab; this.config={ 'triggerType':"mouseover", 'effect':'default', 'invoke':1, 'auto':false }; // console.log(1) console.log(typeof this.getConfig());//object if(this.getConfig()) { $.extend(this.config,this.getConfig()) } // console.log(this.config) this.tabItems=this.tab.find("ul.tab-nav li"); this.contentItems=this.tab.find("div.content-box div.content-item") // 保存配置参数 var config=this.config; if(config.triggerType==='click') { this.tabItems.bind(config.triggerType,function(){ _this.invoke($(this)) }) } // config.triggerType!='click'是为了防止配置参数triggerType写成无效事件 else if(config.triggerType==='mouseover'||config.triggerType!='click') { this.tabItems.bind('mouseover',function(){ _this.invoke($(this)) }) } // 实现自动轮播 if(this.config.auto!=false) { this.timer=null; this.loop=0; this.autoPlay() var _this=this this.tab.hover(function(){ console.log(111) clearInterval(_this.timer) },function(){ _this.autoPlay() }) } // 设置默认第一显示 if(this.config.invoke>1) { this.invoke(this.tabItems.eq(this.config.invoke-1)) } } Tab.prototype={ getConfig:function(){ // config是一个字符串 var config=this.tab.attr("data-config"); // 确保有配置参数 if(config&&config!='') { return $.parseJSON(config) }else { return null } }, //事件驱动函数 invoke:function(currentTab){ currentTab.addClass("active").siblings().removeClass("active") // console.log(1) // 根据点击的tab的索引去显示下面的内容 var index=currentTab.index(); var effect=this.config.effect console.log(effect) // console.log(index) var contentitem=this.contentItems // console.log(contentitem.eq(index)) if(effect=="default") { console.log(1) contentitem.eq(index).addClass("current").siblings().removeClass("current") }else { contentitem.eq(index).fadeIn().siblings().fadeOut() } // 当手动去点击或者移动鼠标导致tab的index改变时,自动切换要跳到index的下一个 if(this.config.auto) { this.loop=index } }, // 自动播放事件 autoPlay:function() { var tabItems=this.tabItems; var length=tabItems.length; // console.log(length) var config=this.config var _this=this clearInterval(this.timer) this.timer=setInterval(function(){ _this.loop++; if(_this.loop>=length) { _this.loop=0; } tabItems.eq(_this.loop).trigger(config.triggerType) if (_this.config.auto) { tabItems.eq(_this.loop).trigger("mouseout"); } console.log(tabItems.eq(_this.loop)) console.log(1) },config.auto) } } // 把Tab注册到window全局上 // 在这个立即执行函数之外可以访问到Tab window.Tab=Tab; })(jQuery)
还没有人回答问题,可以看看其他问题
JS插件开发之-Tab选项卡
19821 学习 · 54 问题
相似问题