jQuery
plugins

Plug-ins - Aan de slag

De jQuery API kan worden uitgebreid door het prototype toe te voegen. De bestaande API heeft bijvoorbeeld al veel functies beschikbaar, zoals .hide() , .fadeIn() , .hasClass() , enz.

Het jQuery-prototype wordt weergegeven via $.fn , de broncode bevat de regel

jQuery.fn = jQuery.prototype

Door functies aan dit prototype toe te voegen, kunnen deze functies worden opgeroepen vanuit elk geconstrueerd jQuery-object (wat impliciet wordt gedaan met elke aanroep van jQuery of elke aanroep van $ als u dat wilt).

Een geconstrueerd jQuery-object bevat een interne reeks elementen op basis van de selector die eraan is doorgegeven. $('.active') zal bijvoorbeeld een jQuery-object construeren dat elementen bevat met de actieve klasse op het moment van aanroepen (zoals in, dit is geen live set elementen).

De waarde this binnen de plug-infunctie verwijst naar het geconstrueerde jQuery-object. Als gevolg hiervan wordt this gebruikt om de overeenkomende set weer te geven.

Basic Plugin :

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

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

jsFiddle-voorbeeld

Chainability & Herbruikbaarheid

In tegenstelling tot het bovenstaande voorbeeld wordt verwacht dat jQuery-plug-ins Chainable zijn .
Wat dit betekent, is de mogelijkheid om meerdere methoden te koppelen aan dezelfde verzameling elementen zoals $(".warn").append("WARNING! ").css({color:"red"}) (zie hoe we de .css() methode na .append() , beide methoden zijn van toepassing op dezelfde .warn Collection)

Het toestaan van één om dezelfde plug-in te gebruiken voor verschillende collecties die verschillende aanpassingsopties doorgeven, speelt een belangrijke rol in aanpassing / herbruikbaarheid

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

jsFiddle-demo

Vrijheid

De bovenstaande voorbeelden vallen onder het begrip basisvorming van plug-ins. Houd er rekening mee dat u een gebruiker niet beperkt tot een beperkte set aanpassingsopties.

Zeg bijvoorbeeld dat u een .highlight() plug-in wilt bouwen waar u een gewenste tekstreeks kunt doorgeven die wordt gemarkeerd en maximale vrijheid biedt met betrekking tot stijlen:

//...
// 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
});
//...

de gebruiker kan nu een gewenste tekst doorgeven en volledige controle hebben over de toegevoegde stijlen met behulp van een aangepaste CSS-klasse:

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

jsFiddle-voorbeeld

jQuery.fn.extend () methode

Met deze methode wordt het jQuery-prototype ($ .fn) -object uitgebreid met nieuwe aangepaste methoden die kunnen worden gekoppeld aan de functie jQuery ().

Bijvoorbeeld:

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