Partage de la technologie de production d'onglets pour le développement de plug-ins jquery-js tutoriel-php.cn

Partage de la technologie de production d'onglets pour le développement de plug-ins jquery

小云云

Libérer： 2017-12-29 17:53:30

original

1452 Les gens l'ont consulté

Cet article présente principalement en détail la production d'onglets dans le développement de plug-ins jquery. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Dans jquery, les méthodes courantes de développement de plug-ins sont :

La première consiste à étendre une méthode pour la fonction $ elle-même. Il s'agit d'une extension statique (également appelée extension de classe). type de plug-in est généralement des méthodes outils,

Il y en a aussi une qui s'étend sur l'objet prototype $.fn Le plug-in développé est utilisé sur l'élément dom

. 1. Extension au niveau de la classe

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

Copier après la connexion

Attention à introduire la bibliothèque jquery à l'avance L'exemple ci-dessus ajoute une méthode showMsg à la fonction $, puis elle. peut être appelé avec $.showMsg()

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

Copier après la connexion

Ce type de plug-in est relativement rare et est généralement utilisé pour développer des méthodes outils, telles que $.trim , $.isArray(), etc. dans jquery

2. Développez la fonction sur $.fn

Ce type de plug-in est utilisé sur les éléments. Par exemple, si j'étends une fonction et clique sur un bouton, le bouton actuel sera affiché Value

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

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

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

Copier après la connexion

Ajoutez une méthode showValue sur $.fn pour renvoyer le. valeur de l'élément actuel.Après avoir obtenu l'élément d'entrée de la page et lié l'événement, vous pouvez appeler cette méthode pour afficher la valeur du bouton "Cliquez sur moi". Dans le développement réel de plug-ins, ceci est couramment utilisé. utilisez ce mécanisme d'extension pour développer un plug-in d'onglet simple :

mise en page et style :

<!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>

Copier après la connexion

fichier tab2.js

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

Copier après la connexion

1, une fonction auto-exécutable, encapsuler le plug-in dans un module, passer l'objet jQuery au paramètre formel $

2, ligne 3 , définissez une configuration par défaut, le type de déclencheur de l'onglet, la valeur par défaut est click event

3, ligne 4, si opt passe les paramètres, utilisez la configuration d'opt, sinon utilisez la configuration par défaut en ligne 3. Le but de cette ligne sert à configurer la représentation du plug-in sans changer le code source du plug-in

4, lignes 7 à 9, laisser le premier p de l'onglet être affiché et masquer le reste. ajoutez class='active' et surlignez-le en jaune

5, ligne Lignes 11-16, cliquez sur l'onglet correspondant pour afficher et masquer le p

Recommandations associées :

Partage sur l'effet d'onglet du plug-in JavaScript

Applet WeChat qui implémente la fonction d'onglet

JS+ Exemple jQuery d'écriture d'un onglet simple

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!