闲来无事，研究了一下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> <p 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> <p class="content-wrap"> <p class="content-item current"> <h3>新闻</h3> </p> <p class="content-item"> <h3>电影</h3> </p> <p class="content-item"> <h3>娱乐</h3> </p> <p class="content-item"> <h3>科技</h3> </p> </p> </p> <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(p.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);
如此看来，是不是很简单，一起来动手试试吧！
相关推荐：
jquery实现tab选项卡切换效果
关于javascript插件tab选项卡效果分享
js实现tab选项卡切换效果的示例代码
以上就是javascript插件tab选项卡详解的详细内容。