चुना ड्रॉप-डाउन सूची विजेट: हम पदों के गतिशील जोड़ने को लागू करते हैं

चुना के विषय पर आधारित : ड्रॉप-डाउन सूचियों को अधिक अनुकूल बनाएं ।

एक सुंदर अच्छा विजेट, कभी-कभी यह उपयोगी भी हो सकता है (उदाहरण के लिए, जब कुछ डिज़ाइन आवश्यकताएं होती हैं)। लेकिन फिलहाल विजेट गतिशील रूप से पदों को जोड़ने की अनुमति नहीं देगा, जिससे कॉमरेड एलेक्सड्रक नाराज हो गए , और मैं भी :) अब हम इस मामले को ठीक करने की कोशिश करेंगे।

स्रोत कोड कच्चे रूप में प्रस्तुत किए जाते हैं, वे जल्दी से लिखे गए थे, मुझे लगता है कि रिफ्लेक्टर के लिए कुछ है, मैंने इस पर समय नहीं बिताया, क्योंकि लेख शैक्षिक उद्देश्यों के लिए लिखा गया था, ताकि समस्या को हल करने के लिए एक दृष्टिकोण दिखाया जा सके (जो, हालांकि, व्यावहारिक उपयोग की संभावना को बाहर नहीं करता है)।

JQuery संस्करण के साथ विकल्प

पैच विजेट कोड

JQuery के संस्करण में, मुझे चुना विजेट के मुख्य वर्ग में आने का रास्ता नहीं मिला, इसलिए मुझे विजेट के मुख्य स्रोत को थोड़ा पैच करना पड़ा (मुझे समझ में आया कि यह एक बुरा तरीका है)।

चुना वर्ग में आने के लिए बहुत सारे विकल्प हैं, कम से कम 3 मेरे दिमाग में आते हैं:

1. कस्टम jQuery.fn.chosen फ़ंक्शन के साथ शरीर को एक समान तरीके से बदलें
   

   $.fn.extend({
chosen: function (data, options) {
var createdInstances = [];
$( this ).each( function (input_field) {
if (!($( this )).hasClass( "chzn-done" )) {
createdInstances.push( new Chosen( this , data, options));
}
});
return createdInstances;
}
});

* This source code was highlighted with Source Code Highlighter .

   
   
2. आप बनाए गए इंस्टेंस को आइटम स्टोर में सहेज सकते हैं।
   

   $.fn.extend({
chosen: function (data, options) {
return $( this ).each( function (input_field) {
if (!($( this )).hasClass( "chzn-done" )) {
return $( this ).data( 'chosenInstance' , new Chosen( this , data, options));
}
});
}
});

* This source code was highlighted with Source Code Highlighter .

   
   आप एक समान तरीके से एक चुना वस्तु प्राप्त कर सकते हैं।
   

   var createChosenInstance = $ ( '#bears_multiple' ) .chosen ()। डेटा ( 'चुना गया' );
   
   * इस सोर्स कोड को सोर्स कोड हाइलाइटर के साथ हाइलाइट किया गया था।

   
   
3. आप कक्षा प्राप्त करने के लिए एक अलग कार्य कर सकते हैं
   

   $.fn.extend({
chosenClass: function () {
return Chosen;
}
});

* This source code was highlighted with Source Code Highlighter .

   
   

मैं jQuery लाइब्रेरी का उपयोग बहुत कम ही करता हूं (मैं मुख्य रूप से YUI के साथ काम करता हूं), हाथ में एपीआई के साथ, इसलिए शायद ये विकल्प इष्टतम नहीं हैं।

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

JQuery विजेट संस्करण के लिए मुख्य विस्तार कोड

( function ($, ChosenClass) {
var dynamicItemInstance;

function DynamicItem(chosenInstance) {
$(( this .chosen = chosenInstance).search_results).parent().prepend(
this .elContainer = $( document .createElement( 'div' )));
this .elContainer.addClass( 'chzn-results-additemcontainer' );
this .elContainer.append( this .elButton = $( document .createElement( 'button' )));
this .elButton.click($.proxy( this .addNewItem, this ));
}
DynamicItem.prototype = {
constructor: DynamicItem,
show: function () {
var data = this .chosen.results_data,
text = this .text,
isNotSelected = true ;

if ( this .chosen.choices) {
( this .chosen.search_choices.find( "li.search-choice" ).each( function (el) {
var itemIdx = this .id.substr( this .id.lastIndexOf( "_" ) + 1),
item = data[itemIdx];

if (item.value === text) {
isNotSelected = !isNotSelected;
return false ;
}
}));
}

this .elContainer[isNotSelected ? 'show' : 'hide' ]();
},
update: function (terms) {
if (( this .text = terms).length) {
this .elButton.text( 'Add new item "' + this .text + '"' );
this .show();
} else {
this .elContainer.hide();
}
},
addNewItem: function (terms) {
this .chosen.form_field.options.add( new Option( this .text, this .text));
this .chosen.form_field_jq.trigger( 'liszt:updated' );
this .chosen.result_highlight = this .chosen.search_results.children().last();
return this .chosen.result_select();
}
};

$.extend(ChosenClass.prototype, {
no_results: ( function (fnSuper) {
return function (terms) {
(dynamicItemInstance || (dynamicItemInstance = new DynamicItem( this ))).update(terms);
return fnSuper.call( this , terms);
};
})(ChosenClass.prototype.no_results),
results_hide: ( function (fnSuper) {
return function () {
dynamicItemInstance && dynamicItemInstance.elContainer.hide();
return fnSuper.call( this );
};
})(ChosenClass.prototype.results_hide),
winnow_results_set_highlight: ( function (fnSuper) {
return function () {
dynamicItemInstance && dynamicItemInstance.elContainer.hide();
return fnSuper.apply( this , arguments);
};
})(ChosenClass.prototype.winnow_results_set_highlight)
});
})(jQuery, jQuery.fn.chosenClass());

* This source code was highlighted with Source Code Highlighter .

विजेट के स्रोत कोड के थोड़ा विश्लेषण के बाद, मुझे पता चला कि पदों के गतिशील जोड़ को कैसे लागू किया जाए। क्लोजर का उपयोग करके ढीली विधियों को ओवरराइड किया जाता है, एक अलग वर्ग में स्थिति जोड़ने की कार्यक्षमता। बेशक, यदि आवश्यक हो, तो बटन को एक लिंक से बदला जा सकता है, सीएसएस शैलियों (बटन ब्लॉक पर अंकन वर्ग स्थापित किया गया है) जोड़ें, और इसी तरह।

डेमो

प्रोटोटाइप संस्करण के साथ वेरिएंट

विजेट के प्रोटोटाइप संस्करण में, चुना वर्ग वैश्विक रूप से उपलब्ध है (विंडो। कोसेन), इसलिए पैच करने के लिए कुछ भी नहीं था।

( function (Chosen) {
var dynamicItemInstance;

function DynamicItem(chosenInstance) {
( this .chosen = chosenInstance).search_results.up().insert({
top: this .elContainer = $( document .createElement( 'div' ))
});
this .elContainer.addClassName( 'chzn-results-additemcontainer' );
this .elContainer.insert( this .elButton = $( document .createElement( 'button' )));
Event.observe( this .elButton, 'click' , this .addNewItem.bind( this ));
}
DynamicItem.prototype = {
constructor: DynamicItem,
show: function () {
var data = this .chosen.results_data,
text = this .text,
isNotSelected = true ;

if ( this .chosen.choices) {
( this .chosen.search_choices.select( "li.search-choice" ).each( function (el) {
var itemIdx = el.id.substr(el.id.lastIndexOf( "_" ) + 1),
item = data[itemIdx];

if (item.value === text) {
isNotSelected = !isNotSelected;
return false ;
}
}));
}

this .elContainer[isNotSelected ? 'show' : 'hide' ]();
},
update: function (terms) {
if (( this .text = terms).length) {
this .elButton.update( 'Add new item "' + this .text + '"' );
this .show();
} else {
this .elContainer.hide();
}
},
addNewItem: function (terms) {
this .chosen.form_field.options.add( new Option( this .text, this .text));
Event.fire( this .chosen.form_field, "liszt:updated" );
this .chosen.result_highlight = this .chosen.search_results.childElements().pop();
return this .chosen.result_select();
}
};

Chosen.prototype.no_results = ( function (fnSuper) {
return function (terms) {
(dynamicItemInstance || (dynamicItemInstance = new DynamicItem( this ))).update(terms);
return fnSuper.call( this , terms);
};
})(Chosen.prototype.no_results);
Chosen.prototype.results_hide = ( function (fnSuper) {
return function () {
dynamicItemInstance && dynamicItemInstance.elContainer.hide();
return fnSuper.call( this );
};
})(Chosen.prototype.results_hide);
Chosen.prototype.winnow_results_set_highlight = ( function (fnSuper) {
return function () {
dynamicItemInstance && dynamicItemInstance.elContainer.hide();
return fnSuper.apply( this , arguments);
};
})(Chosen.prototype.winnow_results_set_highlight);
})(window.Chosen);

new Chosen($( 'bears_multiple' ));

* This source code was highlighted with Source Code Highlighter .

डेमो

टिप्पणी

विजेट के लेखक के स्थान पर, मैं एक सामान्य कर्नेल (प्रोटोटाइप / jQuery / Mootools के लिए अलग-अलग संस्करणों के बजाय) को लागू करूंगा। पुस्तकालयों में से, मैं एक आवरण (इंटरफ़ेस) के माध्यम से केवल सबसे आवश्यक तरीकों का उपयोग करूंगा। इसका लक्ष्य विजेट के मुख्य कोड का एक (सामान्य) संस्करण है। अब, विभिन्न चौखटे के लिए कांटे के वर्तमान दृष्टिकोण के साथ, मुझे जीथब पर कुछ करने के लिए बहुत अधिक बिंदु दिखाई नहीं देते हैं।

मैं उन सभी को धन्यवाद देता हूं जिन्होंने कर्म किया है, इससे मुझे एक लेख प्रकाशित करने की अनुमति मिली।