jQuery
plugin

Plugin - Introduzione

L'API jQuery può essere estesa aggiungendo al suo prototipo. Ad esempio, l'API esistente ha già molte funzioni disponibili come .hide() , .fadeIn() , .hasClass() , ecc.

Il prototipo jQuery è esposto attraverso $.fn , il codice sorgente contiene la linea

jQuery.fn = jQuery.prototype

L'aggiunta di funzioni a questo prototipo consentirà a queste funzioni di essere chiamate da qualsiasi oggetto jQuery costruito (che viene eseguito implicitamente con ogni chiamata a jQuery o ogni chiamata a $ se preferisci).

Un oggetto jQuery costruito conterrà un array interno di elementi basato sul selettore passato ad esso. Ad esempio, $('.active') costruirà un oggetto jQuery che contiene elementi con la classe attiva, al momento della chiamata (come in, questo non è un insieme di elementi dal vivo).

Il this valore all'interno della funzione plugin riferimento all'oggetto jQuery costruito. Di conseguenza, this è usato per rappresentare il set abbinato.

Plugin di base :

$.fn.highlight = function() {
    this.css({ background: "yellow" });
};

// Use example:
$("span").highlight();

esempio jsFiddle

Chainability e riusabilità

A differenza dell'esempio sopra , i plugin jQuery dovrebbero essere concatenati .
Ciò significa che è possibile associare più metodi a una stessa raccolta di elementi come $(".warn").append("WARNING! ").css({color:"red"}) (vedi come abbiamo usato il .css() metodo .css() dopo il .append() , entrambi i metodi si applicano alla stessa raccolta .warn )

Consentire a uno di utilizzare lo stesso plug-in su raccolte diverse che passano diverse opzioni di personalizzazione svolge un ruolo importante nella personalizzazione / riusabilità

(function($) {
  $.fn.highlight = function( custom ) {

    // Default settings
    var settings = $.extend({
        color : "",              // Default to current text color
        background : "yellow"    // Default to yellow background
    }, custom);

    return this.css({     // `return this` maintains method chainability
        color : settings.color,
        backgroundColor : settings.background
    });

  };
}( jQuery ));


// Use Default settings
$("span").highlight();    // you can chain other methods

// Use Custom settings
$("span").highlight({
    background: "#f00",
    color: "white"
});

demo di jsFiddle

La libertà

Gli esempi di cui sopra riguardano lo scopo di comprendere la creazione di plug-in di base. Ricordarsi di non limitare un utente a un numero limitato di opzioni di personalizzazione.

Ad esempio, per esempio, si desidera creare un plugin .highlight() cui è possibile passare una stringa di testo desiderata che verrà evidenziata e consentire la massima libertà per quanto riguarda gli stili:

//...
// Default settings
var settings = $.extend({
   text : "",          // text to highlight
   class : "highlight" // reference to CSS class
}, custom);

return this.each(function() {
   // your word highlighting logic here
});
//...

l'utente può ora passare un testo desiderato e avere il controllo completo sugli stili aggiunti utilizzando una classe CSS personalizzata:

$("#content").highlight({
    text : "hello",
    class : "makeYellowBig"
});

esempio jsFiddle

metodo jQuery.fn.extend ()

Questo metodo estende l'oggetto jQuery prototype ($ .fn) per fornire nuovi metodi personalizzati che possono essere concatenati alla funzione jQuery ().

Per esempio:

<div>Hello</div>
<div>World!</div>
 
<script>
jQuery.fn.extend({
  // returns combination of div texts as a result
  getMessage: function() {
    var result;
    // this keyword corresponds result array of jquery selection
    this.each(function() {
        // $(this) corresponds each div element in this loop
        result = result + " " + $(this).val();
    });
    return result;
  }
});
 
// newly created .getMessage() method
var message = $("div").getMessage();

// message = Hello World!
console.log(message); 
</script>