閑來無事，研究了一下JavaScript插件的寫法，今天就將自己寫的一個小插件記錄下來。
本文介紹了此款插件的基本用法，實現的功能以及代碼。
首先，來看看最終效果：
這是一款普通的Tab選項卡插件，下面來講講它實現了哪些功能：
1、支持不同鼠標事件觸發選項卡切換效果；
2、支持不同切換效果的配置，例如淡入淡出/直接切換；
3、支持默認展示第幾個選項卡的配置；
4、支持選項卡的自動切換效果。
例子很簡單，需要用到的知識包括：
1、html、css的基礎知識；
2、對this，prototype，new等關鍵詞的理解。
簡而言之，就是通過參數配置的形式來完成不同效果的展示。
下面先看一看如何使用：
1、$(".js-tab").etab();
2、$(".js-tab").etab({
triggerType: "click",
effect: "fade",
invoke: 2,
auto: 3000
});
3、Tab.init($(".js-tab"));
本插件支持幾種不同的初始化方式，代碼很簡單，類似于BootStrap插件的使用方法。下面奉上完整的代碼：
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tab選項卡</title> <link href="tab.css" rel="stylesheet"> <style> * { margin:0; padding:0; } body { background-color: #323232; font-size:12px; font-family:微軟雅黑; padding:100px; } ul, li { list-style-type: none; } </style> <script src="../lib/jquery-1.11.3.js"></script> <script type="text/javascript" src="tab.js"></script></head><body> <div class="js-tab tab"> <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"> <h3>新聞</h3> </div> <div class="content-item"> <h3>電影</h3> </div> <div class="content-item"> <h3>娛樂</h3> </div> <div class="content-item"> <h3>科技</h3> </div> </div> </div> <script> $(function() {// Tab.init($(".js-tab")); $(".js-tab").etab({ triggerType: "click", effect: "fade", invoke: 2, auto: 3000 }); $(".js-tab").etab(); }); </script></body></html>.tab { width: 300px;}.tab .tab-nav { height: 30px;}.tab .tab-nav li { float: left; margin-right:5px; background-color:#767676; border-radius:3px 3px 0 0;}.tab .tab-nav li a{ display:block; height:30px; padding:0 20px; color: white; line-height:30px; text-decoration: none;}.tab .tab-nav .active { background-color: #fff;}.tab .tab-nav .active a{ color: #777;}.tab .content-wrap{ background-color: white; padding:5px; height:200px}.tab .content-wrap .content-item { position:absolute; height: 200px; display: none;}.tab .content-wrap .current { height: 200px; display: block;}最后將插件代碼列出來，在代碼里面已經寫了很詳細的注釋：
/** * Created by Wu.lin on 2017/11/12. */(function($){ 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);如此看來，是不是很簡單，一起來動手試試吧！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
