Maison > Article > interface Web > Partage de la technologie de production d'onglets pour le développement de plug-ins jquery

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

小云云original: 2017-12-29 17:53:301429parcourir

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

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

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

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>博客: 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>

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

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：À propos du didacticiel de développement de la page d'arrière-plan de uery EasyUI combiné avec ztrIeeArticle suivant：À propos du didacticiel de développement de la page d'arrière-plan de uery EasyUI combiné avec ztrIee

Articles Liés

Voir plus