Heim >Web-Frontend >js-Tutorial >Gemeinsame Nutzung der Tab-Produktionstechnologie für die Entwicklung von JQuery-Plug-Ins

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

小云云Original: 2017-12-29 17:53:301480Durchsuche

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();

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();

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="点我">

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>博客: http://www.php.cn/ghostwu/</p>
  </p>
  <p id="tab2">作者:ghostwu(2)
   <p>博客: http://www.php.cn//ghostwu/</p>
  </p>
  <p id="tab3">作者:ghostwu(3)
   <p>博客: http://www.php.cn//ghostwu/</p>
  </p>
 </p>
</body>
</html>

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

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!

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：Informationen zum Tutorial zur Hintergrundseitenentwicklung von uery EasyUI in Kombination mit ztrIeeNächster Artikel：Informationen zum Tutorial zur Hintergrundseitenentwicklung von uery EasyUI in Kombination mit ztrIee

In Verbindung stehende Artikel

Mehr sehen