Gemeinsame Nutzung der Tab-Produktionstechnologie für die Entwicklung von JQuery-Plug-Ins-js-Tutorial-php.cn

Gemeinsame Nutzung der Tab-Produktionstechnologie für die Entwicklung von JQuery-Plug-Ins

小云云

Freigeben： 2017-12-29 17:53:30

Original

1451 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Tab-Produktion in der JQuery-Plug-In-Entwicklung vor und hat einen gewissen Referenzwert. Ich hoffe, er kann jedem helfen.

In jquery sind die gängigen Plug-in-Entwicklungsmethoden:

Eine davon besteht darin, eine Methode für die $-Funktion selbst zu erweitern. Dies ist eine statische Erweiterung (auch als Klassenerweiterung bezeichnet). Art von Plug-In sind normalerweise Tool-Methoden,

Es gibt ein anderes, das sich auf das Prototypobjekt $.fn erstreckt. Das entwickelte Plug-In wird auf dem Dom-Element verwendet

1. Erweiterung auf Klassenebene

$.showMsg = function(){
   alert(&#39;hello,welcome to study jquery plugin dev&#39;);
  }
  // $.showMsg();

Nach dem Login kopieren

Achten Sie darauf, die JQuery-Bibliothek im Voraus einzuführen. Das obige Beispiel fügt der $-Funktion eine Methode showMsg hinzu kann mit $.showMsg() aufgerufen werden

$.showName = function(){
   console.log( &#39;ghostwu&#39; );
  }
  $.showName();

Nach dem Login kopieren

Diese Art von Plug-In ist relativ selten und wird im Allgemeinen zur Entwicklung von Tool-Methoden wie $.trim verwendet , $.isArray() usw. in jquery

2. Erweitern Sie die Funktion auf $.fn

Diese Art von Plug-in wird für Elemente verwendet. Wenn ich beispielsweise eine Funktion erweitere und auf eine Schaltfläche klicke, wird der aktuelle Wert angezeigt.

$.fn.showValue = function(){
  return $(this).val();
}

  $(function(){
   $("input").click(function(){
    // alert($(this).showMsg());
    alert($(this).showMsg());
   });
  });

<input type="button" value="点我">

Nach dem Login kopieren

Füge eine showValue-Methode für $.fn hinzu, um den Wert zurückzugeben Nach dem Abrufen des Seiteneingabeelements und dem Binden des Ereignisses können Sie diese Methode aufrufen, um den Wert der Schaltfläche „Klicken“ anzuzeigen. Dies wird häufig als Nächstes verwendet Verwenden Sie diesen Erweiterungsmechanismus, um ein einfaches Tab-Plug-in zu entwickeln:

Seitenlayout und Stil:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script>
 <style>
  #tab {
   width:400px;
   height:30px;
  }
  #tab li, #tab ul {
   list-style-type:none;
  }
  #tab ul {
   width:400px;
   height: 30px;
   border-bottom:1px solid #ccc;
   line-height: 30px;
  }
  #tab ul li {
   float:left;
   margin-left: 20px;
   padding:0px 10px;
  }
  #tab ul li.active {
   background: yellow;
  }
  #tab ul li a {
   text-decoration: none;
   color:#666;
  }
  #tab p {
   width:400px;
   height:350px;
   background-color:#ccc;
  }
  .clearfix:after{
   content: &#39;&#39;;
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
  }
 </style>
 <script src="tab2.js"></script>
 <script>
  $(function(){
   $("#tab").tabs( { evType : &#39;mouseover&#39; } );
  });
 </script>
</head>
<body>
 <p id="tab">
  <ul class="clearfix">
   <li><a href="#tab1">选项1</a></li>
   <li><a href="#tab2">选项2</a></li>
   <li><a href="#tab3">选项3</a></li>
  </ul>
  <p id="tab1">作者:ghostwu(1)
   <p>博客: //m.sbmmt.com/ghostwu/</p>
  </p>
  <p id="tab2">作者:ghostwu(2)
   <p>博客: //m.sbmmt.com//ghostwu/</p>
  </p>
  <p id="tab3">作者:ghostwu(3)
   <p>博客: //m.sbmmt.com//ghostwu/</p>
  </p>
 </p>
</body>
</html>

Nach dem Login kopieren

tab2.js-Datei

;(function ($) {
 $.fn.tabs = function (opt) {
  var def = { evType: "click" }; //定义了一个默认配置
  var opts = $.extend({}, def, opt);
  var obj = $(this);

  $("ul li:first", obj).addClass("active");
  obj.children("p").hide();
  obj.children("p").eq(0).show();

  $("ul li", obj).bind(opts.evType, function () {
   $(this).attr("class", "active").siblings("li").attr("class","");
   var id = $(this).find("a").attr("href").substring(1);
   obj.children("p").hide();
   $("#" + id, obj).show();
  });
 };
})(jQuery);

Nach dem Login kopieren

1, eine selbstausführende Funktion, kapseln Sie das Plug-In in ein Modul und übergeben Sie das jQuery-Objekt an den formalen Parameter $

2, Zeile 3 , Definieren Sie eine Standardkonfiguration, den Triggertyp der Registerkarte, der Standardwert ist Klickereignis

3, Zeile 4, wenn opt Parameter übergibt, verwenden Sie die Konfiguration von opt, andernfalls verwenden Sie die Standardkonfiguration in Zeile 3. Der Zweck von Diese Zeile dient dazu, die Darstellung des Plug-Ins zu konfigurieren, ohne den Plug-In-Quellcode zu ändern

4, Zeilen 7-9, lassen Sie das erste p der Registerkarte anzeigen und blenden Sie den Rest aus Fügen Sie class='active' hinzu und markieren Sie es gelb

5, Zeile Zeilen 11-16, klicken Sie auf die entsprechende Registerkarte, um das entsprechende p anzuzeigen und auszublenden

Verwandte Empfehlungen:

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

WeChat-Applet, das die Tab-Funktion implementiert

JS+ jQuery-Beispiel für das Schreiben eines einfachen Tabs

Das obige ist der detaillierte Inhalt vonGemeinsame Nutzung der Tab-Produktionstechnologie für die Entwicklung von JQuery-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!