JavaScript插件Tab选项卡效果
网络 2018-01-05 2747
闲来无事，研究了一下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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | .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; } |
最后将插件代码列出来，在代码里面已经写了很详细的注释：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | /** * 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); |
上一篇：js精确的加减乘除实例
