jquery-pluginsJquery-plugins के साथ आरंभ करना


टिप्पणियों

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

प्लगइन का विचार तत्वों के संग्रह के साथ कुछ करना है। आप प्रत्येक विधि पर विचार कर सकते हैं जो jQuery कोर के साथ आता है एक प्लगइन, जैसे .fadeOut() या .addClass()

आप अपने खुद के प्लगइन्स बना सकते हैं और उन्हें अपने कोड में निजी रूप से उपयोग कर सकते हैं या आप उन्हें सार्वजनिक रूप से जारी कर सकते हैं। हजारों jQuery प्लगइन्स ऑनलाइन उपलब्ध हैं। अपने खुद के एक प्लगइन बनाने में बाधा इतनी कम है कि आप आसानी से एक लेखक कर सकते हैं!

मूल प्लगइन जो पाठ के रंग को हरे रंग में बदलता है।

// plugin initialization
$.fn.greenify = function() {
    // within the function you can use any of the jQuery methods
    // and `this` context refers to jQuery object
    this.css( "color", "green" );
};
 
// apply plugin
$( "a" ).greenify(); 
 

चेनिंग

यह काम करता है, लेकिन वास्तविक दुनिया में जीवित रहने के लिए हमें अपने प्लगइन के लिए कुछ चीजों की आवश्यकता है। जब आप एक चयनकर्ता पर पांच या छह क्रियाओं को लिंक करते हैं, तो jQuery की सुविधाओं में से एक जंजीर होती है। यह सभी jQuery के ऑब्जेक्ट मेथड्स को फिर से ओरिजिनल jQuery ऑब्जेक्ट को वापस करने से पूरा होता है (कुछ अपवाद हैं: .width() पैरामीटर को चुने गए तत्व की चौड़ाई लौटाए बिना, और चेनेबल नहीं है)। हमारे प्लगइन विधि को चेनेबल बनाने से कोड की एक लाइन लगती है:

$.fn.greenify = function() {
    this.css( "color", "green" );
    // return the reference for chaining
    return this;
}
 
$( "a" ).greenify().addClass( "greenified" );
 

स्थापना या सेटअप

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

<script type="text/javascript" src="/path/to/plugin.jquery.js"></script>
 

चूक के साथ सहायक विकल्प

आप विकल्पों को स्वीकार करके अपने प्लगइन को अनुकूलन योग्य बना सकते हैं।

$.fn.colourize = function(options) {

    // This is one method to support default options
    var style = $.extend({
        color: "green",
        backgroundColor: "white"
    }, options);

    // Set the colours on the current selection based on the option parameters
    return this.css({
        color: style.color,
        backgroundColor: style.backgroundColor
    });
};
 

उदाहरण उपयोग:

$("button").colourize({
    color: "orange"
});
 

रंग विकल्प "हरा" के लिए डिफ़ॉल्ट मान $.extend() से "नारंगी" होना अधिक हो जाता है।

विशिष्ट jQuery प्लगइन संरचना

JQuery प्लगइन्स लिखना सरल है, हम अपने प्लगइन्स को एक स्थानीय दायरे में जोड़ना चाहते हैं। यह नामस्थान टकराव से बचने के साथ-साथ वैश्विक नाम स्थान को प्रदूषित करने से बचाएगा, यह सुनिश्चित करने के शीर्ष पर कि हमारे प्लगइन के विस्तार से पहले jQuery लोड है।

// Encapsulate our plugins in a local scope
(function($) {

    // Plugin definition
    $.fn.colourize = function() {

        // Plugin code

    };

// Pass the jQuery object into our local scope
}(jQuery));
 

स्थानीय गुंजाइश आवरण को सरल और संक्षिप्त रखने के लिए अन्य उदाहरणों पर छोड़ा जा सकता है।

प्रत्येक () विधि का उपयोग करना

आपके विशिष्ट jQuery ऑब्जेक्ट में DOM तत्वों की किसी भी संख्या के संदर्भ होंगे, और इसीलिए jQuery ऑब्जेक्ट्स को अक्सर संग्रह के रूप में संदर्भित किया जाता है। यदि आप विशिष्ट तत्वों के साथ कोई हेरफेर करना चाहते हैं (जैसे कि एक डेटा विशेषता प्राप्त करना, विशिष्ट पदों की गणना करना) तो आपको तत्वों के माध्यम से लूप () का उपयोग करने की आवश्यकता है।

$.fn.myNewPlugin = function() { 
    return this.each(function() {
        // Do something to each element here.
    });
 
    // return the reference for chaining
    return this;
};