jQuery
plugins

Plugins - Komma igång

JQuery API kan utökas genom att lägga till prototypen. Till exempel har det befintliga API: n redan många funktioner tillgängliga, t.ex. .hide() , .fadeIn() , .hasClass() , etc.

Prototypen för jQuery exponeras genom $.fn , källkoden innehåller raden

jQuery.fn = jQuery.prototype

Att lägga till funktioner till denna prototyp gör att dessa funktioner är tillgängliga att ringa från alla konstruerade jQuery-objekt (vilket görs implicit med varje samtal till jQuery, eller varje samtal till $ om du föredrar).

Ett konstruerat jQuery-objekt kommer att innehålla en intern grupp av element baserade på väljaren som skickas till det. Till exempel kommer $('.active') att konstruera ett jQuery-objekt som innehåller element med den aktiva klassen vid tidpunkten för samtal (som i, detta är inte en liveuppsättning av element).

this värde inuti plugin-funktionen kommer att hänvisa till det konstruerade jQuery-objektet. Som ett resultat används this för att representera den matchade uppsättningen.

Grundläggande plugin :

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

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

jsFiddle-exempel

Kedjan och återanvändbarhet

Till skillnad från exemplet ovan förväntas jQuery-plugins vara kedjbara .
Vad detta betyder är möjligheten att kedja flera metoder till samma samling av element som $(".warn").append("WARNING! ").css({color:"red"}) (se hur vi använde .css() -metoden efter .append() , båda metoderna gäller på samma .warn Collection)

Att låta en använda samma plugin på olika samlingar som passerar olika anpassningsalternativ spelar en viktig roll i anpassning / återanvändbarhet

(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

Frihet

Ovanstående exempel ligger inom ramen för att förstå grundläggande plugin-skapande. Kom ihåg att inte begränsa en användare till en begränsad uppsättning anpassningsalternativ.

Säg till exempel att du vill bygga en .highlight() Plugin där du kan skicka en önskad textsträng som kommer att belysas och tillåter maximal frihet när det gäller stilar:

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

kan användaren nu skicka en önskad text och ha fullständig kontroll över de tillagda stilarna genom att använda en anpassad CSS-klass:

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

jsFiddle-exempel

metoden jQuery.fn.extend ()

Denna metod utökar jQuery-prototypen ($. Ffn) för att tillhandahålla nya anpassade metoder som kan kedjas till funktionen jQuery ().

Till exempel:

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