jQuery
प्लगइन्स

प्लगइन्स - आरंभ करना

JQuery एपीआई को इसके प्रोटोटाइप में जोड़कर बढ़ाया जा सकता है। उदाहरण के लिए, मौजूदा API में पहले से ही कई कार्य उपलब्ध हैं जैसे कि .hide() , .fadeIn() , .hasClass() , आदि।

JQuery के प्रोटोटाइप को $.fn माध्यम से उजागर किया जाता है, स्रोत कोड में रेखा होती है

jQuery.fn = jQuery.prototype

इस प्रोटोटाइप में फ़ंक्शंस जोड़ने से उन फ़ंक्शंस को किसी भी निर्मित jQuery ऑब्जेक्ट से कॉल करने की सुविधा मिलेगी (जो कि प्रत्येक कॉल के साथ jQuery के लिए किया जाता है, या यदि आप चाहें तो प्रत्येक कॉल $ के लिए किया जाएगा)।

एक निर्मित jQuery वस्तु चयनकर्ता के आधार पर तत्वों के एक आंतरिक सरणी को रखेगी। उदाहरण के लिए, $('.active') एक jQuery ऑब्जेक्ट का निर्माण करेगा जो कॉलिंग के समय सक्रिय वर्ग के साथ तत्वों को रखता है (जैसा कि, यह तत्वों का एक लाइव सेट नहीं है)।

प्लगइन फ़ंक्शन के अंदर का this मान निर्मित JQuery ऑब्जेक्ट को संदर्भित करेगा। नतीजतन, this मिलान सेट का प्रतिनिधित्व करने के लिए उपयोग किया जाता है।

मूल प्लगइन :

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

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

jsFiddle उदाहरण

चैनबिलिटी और पुन: प्रयोज्यता

ऊपर दिए गए उदाहरण के विपरीत , jQuery प्लगइन्स के चेनेबल होने की उम्मीद है।
इसका मतलब यह है कि $(".warn").append("WARNING! ").css({color:"red"}) जैसे तत्वों के एक ही संग्रह में कई विधियों को श्रृंखलाबद्ध करने की संभावना है $(".warn").append("WARNING! ").css({color:"red"}) (देखें कि हमने कैसे उपयोग किया था .css() .append() बाद विधि, दोनों विधियाँ समान .warn संग्रह पर लागू होती हैं)

अलग-अलग कस्टमाइज़ेशन ऑप्शंस पास करने वाले अलग-अलग कलेक्शंस पर एक ही प्लगइन का उपयोग करने की अनुमति देना कस्टमाइज़ेशन / रियूजेबिलिटी में एक महत्वपूर्ण भूमिका निभाता है

(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 डेमो

आजादी

उपरोक्त उदाहरण बुनियादी प्लगइन निर्माण को समझने के दायरे में हैं। कस्टमाइज़ेशन विकल्पों के सीमित सेट के लिए उपयोगकर्ता को प्रतिबंधित न करने का ध्यान रखें।

उदाहरण के लिए कहें कि आप एक .highlight() प्लगिन का निर्माण करना चाहते हैं, जहाँ आप एक वांछित पाठ स्ट्रिंग पास कर सकते हैं जिसे हाइलाइट किया जाएगा और शैलियों के बारे में अधिकतम स्वतंत्रता की अनुमति दें:

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

उपयोगकर्ता अब एक वांछित पाठ पास कर सकता है और एक कस्टम सीएसएस वर्ग का उपयोग करके अतिरिक्त शैलियों पर पूर्ण नियंत्रण रख सकता है:

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

jsFiddle उदाहरण

jQuery.fn.extend () विधि

यह विधि jQuery के प्रोटोटाइप ($ .fn) ऑब्जेक्ट को नए कस्टम तरीके प्रदान करने के लिए विस्तारित करती है जिसे jQuery () फ़ंक्शन के लिए जंजीर किया जा सकता है।

उदाहरण के लिए:

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