Creare plugin jQuery è molto semplice ed è anche indicato per riutilizzare facilmente il codice sviluppato in altri lavori, oltre che per condividerlo più facilmente con altri sviluppatori.

Nell’esempio si utilizzerà lo script realizzato per il tutorial Visualizzare il favicon con jQuery.

Creare plugin jquery

Creare plugin per jquery

Creare plugin jQuery

Un plugin di jQuery è un file javascript che contiene una funzione anonima che avvolge il codice dell’intero plugin. Per creare un plugin per jQuery creare un nuovo file, inserire al suo interno il seguente codice e poi, salvarlo con estensione js.

(function($) {
  //
})(jQuery);

All’interno del blocco precedente si aggiunge all’oggetto jQuery un nuovo metodo, nell’esempio è favicon, mediante la proprietà $.fn seguita dal nome del plugin.

(function($) { 
  $.fn.favicon = function(options) {
   // Codice del plugin
  }
})(jQuery);

Per controllare il comportamento del plugin si può prevedere l’utilizzo di uno o più parametri.

Al nuovo metodo favicon, aggiunto all’oggetto jQuery con la funzione $.fn, viene assegnata una funzione anonima che contiene il codice dell’intero plugin.

(function($) {
  function findhost(url) {
    var u = url.match(/^http:\/\/[^/]+/);
    return u ? u[0] : null;
  }
  $.fn.favicon = function(options) {
   // codice del plugin
   $(this).each(function(){
   //$(this).text("");
   $(' <img src="'+ 
   findhost($(this).attr('href')) + 
   '/favicon.ico' + 
   '" height="16" width="16">').appendTo($(this));
 };
})(jQuery);

All’interno del blocco principale è possibile anche definire altre funzioni utili, nell’esempio la funzione findhost().

Per ulteriori informazioni sulla funzione $.fn consultare la guida ufficiale di jQuery. Dopo aver creato il plugin, includerlo subito dopo jQuery e poi, attivarlo con un altro elemento script in cui richiamare il nuovo metodo, nell’esempio favicon().

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creare plugin jQuery</title>
</head>
<body>
<h1><a href="http://www.google.it">Google</a></h1>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.favicon.js"></script> <!-- Il nostro plugin -->
<script>
$(function(){
 $('a').favicon(); 
});
</script>
</body>
</html>

Ulteriori informazioni su come creare un plugin jQuery sono disponibili nel sito ufficiale di jQuery.