Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des JavaScript-Plug-Ins Tab

Detaillierte Erläuterung des JavaScript-Plug-Ins Tab

小云云Original: 2018-01-19 11:18:502167Durchsuche

Dieser Artikel stellt hauptsächlich den JavaScript-Plug-in-Tab-Effekt im Detail vor. Er hat einen gewissen Referenzwert. Ich hoffe, er kann jedem helfen.

Ich habe nichts zu tun, also habe ich gelernt, wie man JavaScript-Plug-Ins schreibt, und heute werde ich ein kleines Plug-In aufzeichnen, das ich geschrieben habe.

In diesem Artikel werden die grundlegende Verwendung, die implementierten Funktionen und der Code dieses Plug-Ins vorgestellt.

Werfen wir zunächst einen Blick auf den endgültigen Effekt:

Dies ist ein gewöhnliches Tab-Plug-in. Lassen Sie uns weiter unten über seine Implementierung sprechen . Welche Funktionen:

1. Unterstützen Sie verschiedene Mausereignisse, um Tab-Umschalteffekte auszulösen.
3 . Unterstützt die Standard-Anzeigenummernkonfiguration von Tabs;
4.

Das Beispiel ist sehr einfach und die erforderlichen Kenntnisse umfassen:

1. Grundkenntnisse in HTML und CSS
2.

Kurz gesagt geht es darum, verschiedene Effekte durch Parameterkonfiguration anzuzeigen.

Sehen wir uns an, wie man es verwendet:

1. $(".js-tab();

2 ") .etab({
triggerType: "click",
effect: "fade",
invoke: 2,
auto: 3000
});
3. Tab. init( $(".js-tab"));

Dieses Plug-in unterstützt mehrere verschiedene Initialisierungsmethoden und der Code ist sehr einfach, ähnlich wie die Verwendung des BootStrap-Plug-ins. Der vollständige Code ist unten aufgeführt:

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

Abschließend wird der Plug-in-Code aufgelistet und es wurden sehr detaillierte Kommentare in geschrieben 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);

Es scheint, dass es sehr einfach ist, lass es uns gemeinsam versuchen!

Verwandte Empfehlungen:

jquery implementiert den Tab-Wechseleffekt

Mitteilung über den Tab-Tab-Effekt des JavaScript-Plug-ins

JS-Beispielcode zur Implementierung des Tab-Wechseleffekts

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des JavaScript-Plug-Ins Tab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erklärung der präzisen Addition, Subtraktion, Multiplikation und Division in jsNächster Artikel：Detaillierte Erklärung der präzisen Addition, Subtraktion, Multiplikation und Division in js

In Verbindung stehende Artikel

Mehr sehen