jQuery - Plugins

Un plug-in est un morceau de code écrit dans un fichier JavaScript standard. Ces fichiers fournissent des méthodes jQuery utiles qui peuvent être utilisées avec les méthodes de la bibliothèque jQuery.

Il existe de nombreux plug-in jQuery disponibles que vous pouvez télécharger à partir du lien du référentiel à l'adresse https://jquery.com/plugins.

Comment utiliser les plugins

Pour mettre à notre disposition les méthodes d'un plug-in, nous incluons un fichier de plug-in très similaire au fichier de bibliothèque jQuery dans le <head> du document.

Nous devons nous assurer qu'il apparaît après le fichier source principal de jQuery et avant notre code JavaScript personnalisé.

L'exemple suivant montre comment inclure jquery.plug-in.js plugin -

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script src = "jquery.plug-in.js" type = "text/javascript"></script>
      <script src = "custom.js" type = "text/javascript"></script>
      
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            .......your custom code.....
         });
      </script>
   </head>
	
   <body>
      .............................
   </body>
</html>

Comment développer un plug-in

C'est très simple d'écrire votre propre plug-in. Voici la syntaxe pour créer une méthode -

jQuery.fn.methodName = methodDefinition;

Ici, methodNameM est le nom de la nouvelle méthode et methodDefinition est la définition réelle de la méthode.

La ligne directrice recommandée par l'équipe jQuery est la suivante -

  • Toutes les méthodes ou fonctions que vous attachez doivent avoir un point-virgule (;) à la fin.

  • Votre méthode doit renvoyer l'objet jQuery, sauf indication contraire explicite.

  • Vous devez utiliser this.each pour parcourir l'ensemble actuel d'éléments correspondants - il produit du code propre et compatible de cette façon.

  • Préfixez le nom de fichier avec jquery, suivez-le avec le nom du plugin et terminez par .js.

  • Attachez toujours le plugin à jQuery directement au lieu de $, afin que les utilisateurs puissent utiliser un alias personnalisé via la méthode noConflict ().

Par exemple, si nous écrivons un plugin que nous voulons nommer debug , notre nom de fichier JavaScript pour ce plugin est -

jquery.debug.js

L'utilisation du jquery. prefix élimine les éventuelles collisions de noms avec les fichiers destinés à être utilisés avec d'autres bibliothèques.

Exemple

Voici un petit plug-in pour avoir une méthode d'avertissement à des fins de débogage. Conservez ce code dans le fichier jquery.debug.js -

jQuery.fn.warning = function() {
   return this.each(function() {
      alert('Tag Name:"' + $(this).prop("tagName") + '".');
   });
};

Voici l'exemple montrant l'utilisation de la méthode warning (). En supposant que nous mettions le fichier jquery.debug.js dans le même répertoire de la page html.

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script src = "jquery.debug.js" type = "text/javascript">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").warning();
            $("p").warning();
         });
      </script>	
   </head>
	
   <body>
      <p>This is paragraph</p>
      <div>This is division</div>
   </body>
</html>

Cela vous alerterait avec le résultat suivant -

This is paragraph
This is division