मौजूदा jQuery UI विजेट का विस्तार कैसे करें?

Question

मैं jQuery v1.8.3 और jQuery UI v1.9.2 का उपयोग कर रहा हूं। मैं कुछ मौजूदा विकल्पों और विधियों को जोड़कर और ओवरराइड करके एक मौजूदा jQuery UI विजेट (मेरे मामले में Autocomplete विजेट) का विस्तार करना चाहता हूं लेकिन अन्य कार्यक्षमताओं को आधिकारिक रिलीज में मौजूद रखने के रूप में रखता हूं। मैं इसे "उचित" (शायद, "मानक") तरीका कैसे बना सकता हूं?

---

पीएस: मैंने वेब पर खोज की (1, 2, ...) और मुझे अधिकतर से संबंधित दस्तावेज मिले जो jQuery UI विजेट बनाते हैं लेकिन मौजूदा एक को विस्तारित नहीं करते हैं।

Answer 1

jQuery UI 1.9+ में, एक विजेट को विस्तारित करना एक नया विजेट बनाने के समान ही किया जाता है।

प्रारंभिक बिंदु के रूप आधार विजेट ($.Widget) का उपयोग कर एक नया विजेट बनाना::

$.widget("ns.widget", { ... })

एक नया विजेट है कि एक मौजूदा विजेट से विरासत बनाना विजेट कारखाने ($.widget()) कुछ परिदृश्यों का समर्थन करता है एक विजेट

$.widget("ns.widget", $.ns.existingWidget, { ... })

विस्तार:

+०१२३५१६४१०६१

$.widget("ns.widget", $.ns.widget, { ... })

आप देखेंगे कि विस्तारित वाक्यविन्यास और विरासत वाक्यविन्यास समान हैं। विजेट फैक्ट्री यह ध्यान देने योग्य है कि आप जिस विजेट को बना रहे हैं और जिस विजेट से आप विरासत में हैं, वह वही है और इसे उचित तरीके से संभाल लें।

जब विजेट को विरासत या विस्तारित किया जाता है, तो आपको केवल यह परिभाषित करने की आवश्यकता होती है कि आप क्या बदलना चाहते हैं या जोड़ना चाहते हैं। आधार विजेट पर मौजूद कुछ नई विधियां भी हैं जो विरासत और संदर्भ बदलने वाले तरीकों के साथ काम करना आसान बनाती हैं। विधियों और उनके विवरणों की पूरी सूची के लिए jQuery.Widget documentation पढ़ें। यदि आप विजेट बढ़ा रहे हैं तो आप निश्चित रूप से _super() पढ़ना चाहेंगे।

यहाँ एक उदाहरण है कि 500 करने के लिए डिफ़ॉल्ट delay विकल्प को बदलने और एक नया विकल्प prefix जो सभी सुझावों को जोड़ा जाता है जोड़ेंगे:

$.widget("ui.autocomplete", $.ui.autocomplete, { 
    options: { 
     delay: 500, 
     prefix: "" 
    }, 

    _renderItem: function(ul, item) { 
     var label = item.label; 
     if (this.options.prefix) { 
      label = this.options.prefix + " " + label; 
     } 
     return $("<li>") 
      .append($("<a>").text(label)) 
      .appendTo(ul); 
    }, 
});