沉迷于OOP编程不可自拔。。
本博是关于tab选项卡切换的插件
HTML代码部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab选项卡切换</title> <style> *{ margin:0; padding:0; } ul,li{ list-style:none; } body{ padding:200px; background-color:#323232; font-size:12px; font-family:"Microsoft Yahei"; } .tab{ width:510px; } .tab .tab-nav{ height:30px; } .tab .tab-nav li{ float:left; margin-right:5px; background-color:#767676; border:3px 3px 0 0; } .tab .tab-nav li.active{ background-color:#fff; } .tab .tab-nav li.active a{ color:#777; } .tab .tab-nav li a{ display:block; height:30px; padding:0 20px; color:#fff; line-height:30px; text-decoration:none; } .tab .content-wrap{ background-color:#fff; padding:5px; height:300px; } .tab .content-wrap .content-item{ position:absolute; display:none; height:300px; } .current{ display:block; } </style> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> </head> <body> <div class="js-tab tab" data-config='{ "triggerType":"click", "effect":"fade", "invoke":1, "auto":1000 }'> <ul class="tab-nav"> <li class="active"><a href="#">新闻</a></li> <li><a href="#">娱乐</a></li> <li><a href="#">电影</a></li> <li><a href="#">科技</a></li> </ul> <div class="content-wrap"> <div class="content-item current"> <img src="images/1.jpg" alt=""> </div> <div class="content-item"> <img src="images/2.jpg" alt=""> </div> <div class="content-item"> <img src="images/3.jpg" alt=""> </div> <div class="content-item"> <img src="images/4.jpg" alt=""> </div> </div> </div> <script src="js/tab.js"></script> <script type="text/javascript"> $(function(){ $(".js-tab").tab() }) </script> </body> </html>
插件部分
;(function($){ var Tab = function(tab){ var _this_ = this; //保存单个tab this.tab = tab; //默认配置参数 this.config = { "triggerType":"click",//用来定义鼠标的触发类型,是click还是mouseover "effect":"default",//用来定义内容切换效果是直接切换还是淡入淡出 "invoke":1,//默认展示第几个tab "auto":false//用来定义tab是否自动切换,当指定了时间间隔就代表自动切换,时间间隔为指定的时间间隔 }; if(this.getConfig()) { $.extend(this.config,this.getConfig())//判断如果配置参数存在,就扩展掉默认的配置参数 } //保存tab标签列表,保存对应的内容列表 this.tabItems = this.tab.find("ul.tab-nav li"); this.contentItems = this.tab.find('div.content-wrap div.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.mouseover(function(){ _this_.invoke($(this)) }) } //自动切换功能,当配置了时间,我们就根据时间间隔自行切换 if(config.auto){ //定义一个全局的定时器 this.timer = null; //定义一个计数器 this.loop = 0; this.autoPlay() //当鼠标移动上去的时候,清除定时器,鼠标移出时,定时器自动播放 this.tab.hover(function(){ clearInterval(_this_.timer) },function(){ _this_.autoPlay() }) } //设置默认显示第几个tab if(config.invoke > 1) { this.invoke(this.tabItems.eq(config.invoke - 1)) } } Tab.prototype = { //自动间隔时间切换 autoPlay:function() { var _this_ = this, tabItems = this.tabItems, //临时保存tab列表 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) }, //切换时的事件驱动函数 invoke:function(currentTab){ var _this_ = this; var index = currentTab.index() //tab选中状态 currentTab.addClass("active").siblings().removeClass("active"); //切换对应的内容区域 var effect = this.config.effect; var conItems = this.contentItems; if(effect === "default" || effect != "fade"){ conItems.eq(index).addClass("current").siblings().removeClass("current") }else if(effect === "fade"){ conItems.eq(index).fadeIn().siblings().fadeOut() } //如果配置了自动切换,记得把当前的loop的值设置成当前tab的index值 if(this.config.auto){ this.loop = index; } }, //获取配置参数 getConfig:function(){ //拿一下tab elem节点上的data-config var config = this.tab.attr("data-config"); //确保有配置参数 if(config && config != "") { return $.parseJSON(config) }else{ return null; } } } Tab.init = function(tabs) { var _this_ = this; tabs.each(function(){ new _this_($(this)); }) } //注册成jq方法 $.fn.extend({ tab:function(){ this.each(function(){ new Tab($(this)) }) return this; //返回,实现链式调用 } }) window.Tab = Tab; })(jQuery)
思路什么的,请看代码注释
效果图:
可以到我的github上clone到本地查看效果:
https://github.com/caimaomao/tab