Home >Web Front-end >JS Tutorial >Detailed explanation of JavaScript plug-in Tab

Detailed explanation of JavaScript plug-in Tab

小云云Original: 2018-01-19 11:18:502225browse

This article mainly introduces the JavaScript plug-in Tab effect in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

I have nothing to do, so I studied how to write JavaScript plug-ins, and today I will record a small plug-in I wrote.

This article introduces the basic usage, implemented functions and code of this plug-in.

First of all, let’s take a look at the final effect:

#This is an ordinary Tab plug-in. Let’s talk about its implementation below. What functions:

1. Support different mouse events to trigger tab switching effects;
2. Support the configuration of different switching effects, such as fade in and fade out/direct switching;
3. Support the default display number Configuration of each tab;
4. Support the automatic switching effect of tabs.

The example is very simple, and the knowledge required includes:
1. Basic knowledge of html and css;
2. Understanding of keywords such as this, prototype, new, etc.

In short, it is to display different effects through parameter configuration.

Let’s take a look at how to use it first:

1. $(".js-tab").etab();
2. $(".js-tab") .etab({
triggerType: "click", ##3、Tab.init( $(".js-tab"));

This plug-in supports several different initialization methods. The code is very simple, similar to the use of the BootStrap plug-in. The complete code is provided below:

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;
}

Finally, the plug-in code is listed, and very detailed comments have been written in the code:

/**
 * 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);

It seems that it is very simple, let’s try it together!

Related recommendations:

jquery to achieve tab switching effect

About JavaScript plug-in Tab tab effect sharing

Sample code for JS to implement Tab switching effect

The above is the detailed content of Detailed explanation of JavaScript plug-in Tab. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery css bootstrap html auto JS 事件 this prototype 鼠标事件

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of precise addition, subtraction, multiplication and division in jsNext article：Detailed explanation of precise addition, subtraction, multiplication and division in js

See more

Detailed explanation of JavaScript plug-in Tab

Related articles