封装jQuery插件实现TAB切换
Posted limes
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了封装jQuery插件实现TAB切换相关的知识，希望对你有一定的参考价值。
先上效果图：
直接上代码：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src=\'jquery.js\'></script> <script src=\'tab.js\'></script> <style> *{margin:0px;padding:0px;background-color: #757575} .tab{margin-left: 100px;margin-top: 100px;height: 250px;} .tab .tab-ul{height: 30px;} .tab .tab-ul .tab-li{float:left;margin-right: 5px;list-style: none; background-color: #323232;color: #fff;display: block;width: 50px;border-radius: 5px 5px 0 0 ;text-align: center;cursor: pointer;} .tab .tab-ul .active{color: #323232; background-color: #fff;} .tab .content-warp{width: 200px;height: 200px;background-color: #fff;overflow: hidden;padding:5px;} .tab .content-warp .content{width: 200px;height: 200px;display: none} .tab .content-warp .content img{width:100%;height: 100%;} .tab .content-warp .current{display: block} </style> </head> <body> <div class="tab" data-config=\'{ "event":"click", "time":false, "type":"default" }\'> <ul class="tab-ul"> <li class="tab-li active">新闻</li> <li class="tab-li">热点</li> <li class="tab-li">军事</li> <li class="tab-li">社会</li> </ul> <ul class="content-warp"> <li class="content current"><img src="img/1.jpg"></li> <li class="content"><img src="img/2.jpg"></li> <li class="content"><img src="img/3.jpg"></li> <li class="content"><img src="img/4.jpg"></li> </ul> </div> <div class="tab" data-config=\'{ "event":"mouseover", "time":false, "type":"fade" }\'> <ul class="tab-ul"> <li class="tab-li active">新闻2</li> <li class="tab-li">热点2</li> <li class="tab-li">军事2</li> <li class="tab-li">社会2</li> </ul> <ul class="content-warp"> <li class="content current"><img src="img/1.jpg"></li> <li class="content"><img src="img/2.jpg"></li> <li class="content"><img src="img/3.jpg"></li> <li class="content"><img src="img/4.jpg"></li> </ul> </div> <div class="tab" data-config=\'{ "event":"click", "time":3000, "type":"fade" }\'> <ul class="tab-ul"> <li class="tab-li active">新闻2</li> <li class="tab-li">热点2</li> <li class="tab-li">军事2</li> <li class="tab-li">社会2</li> </ul> <ul class="content-warp"> <li class="content current"><img src="img/1.jpg"></li> <li class="content"><img src="img/2.jpg"></li> <li class="content"><img src="img/3.jpg"></li> <li class="content"><img src="img/4.jpg"></li> </ul> </div> <script> $(".tab").tab(); </script> </body> </html>
插件tab.js!function( var Tab = function(ele){
this.ele = ele; config = JSON.parse(ele.attr(\'data-config\')); //默认配置 this.config = { "event":"mouseover",//触发事件 "time":2000,//切换时间 false 为不切换 "invoke":1,//默认tab "type":"default"//切换方式 默认和淡出 }; $.extend(this.config, config); //默认地址 this.index = this.config.invoke; //点击事件 this.switch(); //默认显示 this.invoke(); //轮播 this.loopfun(); }; Tab.prototype = { "switch":function(){ ele = this.ele; var that = this; config = this.config; event = config.event == "click"?"click":"mouseover"; if(config.type == "default"){ ele.find(".tab-li").on(event, function(e, par1){ //par1存在则为模拟请求 $(this).addClass("active").siblings().removeClass("active");//tab var index = $(this).index(); that.ele.find(".content").eq(index).show().addClass("current").siblings().removeClass("current").hide(); if(that.loop && !par1){ clearInterval(that.loop); that.loop = null; } that.addIndex(index); }).on(\'mouseout\', function(){ if(!that.loop){ that.loopfun(); } }); }else{ ele.find(".tab-li").on(event, function(e, par1){ //par1存在则为模拟请求 $(this).addClass("active").siblings().removeClass("active");//tab var index = $(this).index(); that.ele.find(".content").eq(index).fadeIn().siblings().fadeOut(); if(that.loop && !par1){ clearInterval(that.loop); } that.addIndex(index); }).on(\'mouseout\', function(){ that.loopfun(); }); } }, "invoke":function(){ ele = this.ele; config = this.config; ele.find(\'.tab-li\').eq(config.invoke-1).addClass("active").siblings().removeClass("active"); ele.find(\'.content\').eq(config.invoke-1).addClass("current").siblings().removeClass("current"); },
"addIndex":function(index){ var count = this.ele.find(\'.tab-li\').length; if(++index>=count){ this.index = 0; }else{ this.index = index; } }, "loopfun":function(){ if(this.config.time && parseInt(this.config.time)){ that = this; this.loop = setInterval(function(){ event = that.config.event == "click"?"click":"mouseover"; that.ele.find(".tab-li").eq(that.index).trigger(event, [\'tri\']); }, that.config.time) } } } //注册成jquery方法 $.fn.extend({ tab:function(){ this.each(function(){ new Tab($(this)) }) return this; } }) window.Tab = Tab; }(jQuery)
标签可随意设置成文本或其他内容，可自行修改。
依自己的理解对切换逻辑进行修改：
1.mousove触发切换时只有mouseout才会继续轮训切换
2.click触发切换时当鼠标在切换页也只有mouseout才会继续轮训切换
以上是关于封装jQuery插件实现TAB切换的主要内容，如果未能解决你的问题，请参考以下文章