एक्सेसिंग। JQuery UI विजेट

Question

के भीतर चयनकर्ता मैं ui widget factory का उपयोग कर प्लगइन पर काम कर रहा हूं। एक बुनियादी JQuery प्लगइन के साथ, मैं कुछ इस तरह कर रही द्वारा प्रयोग किया जाता चयनकर्ता का उपयोग कर सकते हैं ...

$.fn.pluginname = function(){ 
    var thisWorks = this.selector; 
}; 

हालांकि, जब मैं विजेट कारखाने का उपयोग करें, चयनित तत्व 'this.element' संपत्ति के माध्यम से पहुँचा है, और 'this.element.selector' मेरे पहले उदाहरण के समान काम नहीं करता है। किसी के पास इस के आसपास एक अच्छा तरीका है? मैं गिटहब पर विजेट फ़ैक्टरी स्रोत कोड देख रहा हूं, लेकिन मुझे अभी तक कुछ भी नहीं मिला है।

Answer 1

चाल यह है कि विजेट फैक्ट्री के बाद अपना विजेट पूरा करने के बाद, यह अनिवार्य रूप से केवल एक सामान्य प्लगइन है। इसका मतलब है कि आप इसे आगे बढ़ा सकते हैं।

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

इस उदाहरण में विजेट का नाम test है।

// Save the original factory function in a variable 
var testFactory = $.fn.test; 

// Replace the function with our own implementation 
$.fn.test = function(obj){ 
    // Add the selector property to the options 
    $.extend(obj, { selector: this.selector }); 

    // Run the original factory function with proper context and arguments 
    return testFactory.apply(this,arguments); 
}; 

यह सुनिश्चित करें कि this.selector एक नामित विकल्प के रूप में के माध्यम से पारित हो जाता है बनाता है। अब आप this.options.selector का संदर्भ देकर अपने कारखाने के भीतर कहीं भी इसका उपयोग कर सकते हैं।

एक अतिरिक्त प्लस के रूप में, हमें किसी भी jQuery UI कोड को हैक करने की आवश्यकता नहीं थी।

Answer 2

यह भी बस

this.selector = '#'+this.element.attr('id'); 

उपयोग करने के लिए आमतौर पर _create विधि में संभव है। निस्संदेह इसके लिए आपके विजेट के प्रत्येक उदाहरण की एक अनूठी आईडी की आवश्यकता होती है जिसे आमतौर पर वैसे भी करना चाहिए।

Answer 3

बस मेरे जोड़े सेंट ... यहां JSFiddle उदाहरण काम कर रहा है DarthJDG के उत्तर पर आधारित ... शायद किसी को इसकी आवश्यकता होगी।

$(function() { 
    $.widget("test.testwidget", { 
     _create: function() { 
      this.element.text('Selector: ' + this.options.selector) 
     }, 
    }); 
}(jQuery)); 

// Save the original factory function in a variable 
var testFactory = $.fn.testwidget; 

// Replace the function with our own implementation 
$.fn.testwidget = function(obj){ 
    // Add the selector property to the options 
    $.extend(obj, { selector: this.selector }); 

    // Run the original factory function with proper context and arguments 
    return testFactory.apply(this,arguments); 
}; 

$(document).ready(function() { 
    $('#test').testwidget({}); 
    $('.test').testwidget({}); 
});