JavaScript插件Tab选项卡效果

2019-11-19 14:56:26

字体：大中小

来源：转载

供稿：网友

闲来无事，研究了一下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);

如此看来，是不是很简单，一起来动手试试吧！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：js精确的加减乘除实例

下一篇：vue中如何创建多个ueditor实例教程