🏴󠁧󠁢󠁷󠁬󠁳󠁿 🌞 🖐🏽 jQuery के कस्टम रेडियो और चेकबॉक्स 👨🏽‍🔧 🔥 🧔🏾

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

तत्वों का प्रकार 4 राज्यों के साथ स्प्राइट का उपयोग करके लागू किया गया था:
- निष्क्रिय दृश्य;
- निष्क्रिय माउस दबाया;
- सक्रिय;
- सक्रिय माउस दबाया जाता है।

क्योंकि यदि आपको स्प्राइट के साथ काम करना है, तो आपको इसमें चित्रों के ऊर्ध्वाधर मिश्रण को जानना होगा। ऐसा करने के लिए, तत्व की ऊंचाई को प्लगइन में पास करें, और उन्हें स्प्राइट में व्यवस्थित करें ताकि वे समान ऊंचाई वाले स्थान पर कब्जा कर लें।
यह भी आवश्यक है कि जब प्लगइन कहा जाता है, तो एक वर्ग पास किया जाता है जिसके माध्यम से मैं तत्व को स्टाइल कर सकता हूं।
प्रारंभिक कार्यान्वयन के बाद, मैंने महसूस किया कि कुछ और शर्तें आवश्यक हैं, जिसके बिना प्लगइन सही ढंग से काम नहीं करेगा। यह तत्वों की स्थिति (सक्रिय / निष्क्रिय) और गतिशील रूप से निर्मित तत्वों के स्टाइलाइजेशन को बदलने की क्षमता है।

शुरू करने के लिए, मैं पूरा प्लगइन कोड दूंगा:

(function ($) { $.CustomData = { elements:$() }; $.fn.extend({ Custom:function (options) { var elements = this; $.CustomData.elements = $.CustomData.elements.add(elements); /*  */ var defaults = { customStyleClass:"checkbox", customHeight:"16" }; /*       */ options = $.extend(defaults, options); /*       */ var pushed = function () { var element = $(this).children('input'); if (element.is(':checked')) { /*  */ $(this).css('backgroundPosition', "0px -" + options.customHeight * 3 + "px"); } else { $(this).css('backgroundPosition', "0px -" + options.customHeight + "px"); } }; /*     ,    (radio)*/ var check = function () { var element = $(this).children('input'); if (element.is(':checked') && element.attr('type') === 'checkbox') {/* */ $(this).css('backgroundPosition', '0px 0px'); $(this).children('input').attr('checked', false).change(); /*         */ } else { if (element.attr('type') === 'checkbox') {/* */ $(this).css('backgroundPosition', "0px -" + options.customHeight * 2 + "px"); } else { /**/ $(this).css('backgroundPosition', "0px -" + options.customHeight * 2 + "px"); $('input[name=' + element.attr('name') + ']').not(element).parent().css('backgroundPosition', '0px 0px'); } $(this).children('input').attr('checked', 'checked').change(); } }; /*        */ var update = function () { $.CustomData.elements.each(function () { /*       */ if ($(this).is(':checked')) { $(this).parent().css('backgroundPosition', "0px -" + $(this).attr('data-height') * 2 + "px"); } else { $(this).parent().css('backgroundPosition', "0px 0px"); } }); }; /*    disabled/enabled */ var refresh = function () { if (!$(this).prop('disabled')) { $(this).parent().mousedown(pushed); $(this).parent().mouseup(check); $(this).parent().removeClass('disabled'); } else { $(this).parent().addClass('disabled'); $(this).parent().unbind('mousedown', pushed); $(this).parent().unbind('mouseup', check); } }; return this.each(function () { if ($(this).attr('data-init') != '1') { $(this).attr('data-init', '1'); $(this).attr('data-height', options.customHeight); /*  <span></span>*/ $(this).wrap('<span/>'); /*     */ var span = $(this).parent().addClass(options.customStyleClass); if ($(this).is(':checked') === true) { /*    */ span.css('backgroundPosition', "0px -" + (options.customHeight * 2) + "px"); } /*              */ $(this).bind('change', update); $(this).bind('custom.refresh', refresh); if (!$(this).prop('disabled')) { /*   span*/ span.mousedown(pushed); span.mouseup(check); } else { /*    */ span.addClass('disabled'); } } }); } }); })(jQuery);

मैंने प्लगइन संरचना के कार्यान्वयन के साथ शुरुआत की, और यह इस तरह दिखता है:

 (function ($) { $.fn.extend({ Custom:function (options) { /*  */ var defaults = { customStyleClass:"checkbox", customHeight:"16" }; /*       */ options = $.extend(defaults, options); }; return this.each(function () { }); } });

आप इस तरह के विवरण को प्रिंट कर सकते हैं - "एक विशिष्ट jQuery ऐड-ऑन बनाने के लिए उपयोग किया जाता है।"

चलो अंत से शुरू करते हैं:

 return this.each(function () { if ($(this).attr('data-init') != '1') { $(this).attr('data-init', '1'); $(this).attr('data-height', options.customHeight); /*  <span></span>*/ $(this).wrap('<span/>'); /*     */ var span = $(this).parent().addClass(options.customStyleClass); if ($(this).is(':checked') === true) { /*    */ span.css('backgroundPosition', "0px -" + (options.customHeight * 2) + "px"); } /*              */ $(this).bind('change', update); $(this).bind('custom.refresh', refresh); if (!$(this).prop('disabled')) { /*   span*/ span.mousedown(pushed); span.mouseup(check); } else { /*    */ span.addClass('disabled'); } } });

सिद्धांत रूप में, कोड में टिप्पणियों में सब कुछ वर्णित है, मैं केवल जोड़ सकता हूं

 $(this).attr('data-init', '1');

मैं यह जानने के लिए इसका उपयोग करता हूं कि तत्व पहले से ही शैलीबद्ध है या नहीं (बेशक, आप माता-पिता के माध्यम से भी पता लगा सकते हैं, लेकिन मैंने ऐसी विधि का परीक्षण करने का फैसला किया है)।

 $(this).attr('data-height', options.customHeight);

यहाँ मैं तत्व की ऊँचाई को बचाता हूँ मेरे पास अलग-अलग स्प्राइट्स के साथ किसी भी तत्व हो सकते हैं।

 $(this).bind('custom.refresh', refresh);

इसके अलावा, एक दिलचस्प तरीका, कस्टम ईवेंट से जुड़ा हुआ है "custom.refresh" ताज़ा फ़ंक्शन के लिए कॉल है।
उदाहरण के लिए, एक तत्व की स्थिति निष्क्रिय हो गई है, तो आपको तत्वों की उपस्थिति को बदलने और इसमें से सभी घटनाओं को हटाने की आवश्यकता है।
उदाहरण के लिए:

 $('#radio3').removeAttr('disabled').trigger('custom.refresh');

तत्व निष्क्रिय हो गया और घटना "custom.refresh" हुई जिसके कारण ताज़ा फ़ंक्शन निष्पादित किया गया था।

इस भाग में वर्णित कार्य निम्नलिखित हैं:

 Custom:function (options) {...};

धकेल दिया गया कार्य - सक्रिय और निष्क्रिय दृश्य के लिए स्प्राइट में ऑफसेट सेट करता है, यह काफी सरल है:

 var pushed = function () { var element = $(this).children('input'); if (element.is(':checked')) { /*  */ $(this).css('backgroundPosition', "0px -" + options.customHeight * 3 + "px"); } else { $(this).css('backgroundPosition', "0px -" + options.customHeight + "px"); } };

समारोह की जांच:

 /*     ,     (radio)*/ var check = function () { var element = $(this).children('input'); if (element.is(':checked') && element.attr('type') === 'checkbox') {/* */ $(this).css('backgroundPosition', '0px 0px'); $(this).children('input').attr('checked', false).change(); /*         */ } else { if (element.attr('type') === 'checkbox') {/* */ $(this).css('backgroundPosition', "0px -" + options.customHeight * 2 + "px"); } else { /**/ $(this).css('backgroundPosition', "0px -" + options.customHeight * 2 + "px"); $('input[name=' + element.attr('name') + ']').not(element).parent().css('backgroundPosition', '0px 0px'); } $(this).children('input').attr('checked', 'checked').change(); } };

इसके अलावा, कोड में टिप्पणियों से सब कुछ बहुत स्पष्ट है, मैं केवल इस बारे में जोड़ूंगा

 $(this).children('input').attr('checked', false).change();

.attr ('चेक किया हुआ', गलत) .change () - यह आवश्यक है कि परिवर्तन () ईवेंट फ़ायर हो जाए और जाँची गई विशेषता बदल जाए। स्टैकओवरफ्लो पर इसके लिए देखना पड़ा।

अद्यतन कार्य:

 /*     */ var update = function () { $.CustomData.elements.each(function () { /*       */ if ($(this).is(':checked')) { $(this).parent().css('backgroundPosition', "0px -" + $(this).attr('data-height') * 2 + "px"); } else { $(this).parent().css('backgroundPosition', "0px 0px"); } }); };

यह एक चर के बिना काम नहीं करता था, जहां सभी तत्वों को सहेजना संभव होगा, जिस पर प्लगइन कहा जाता है ($। CustomData.elements)। यह $ .fn.extend ({...}) के ऊपर वर्णित है

 $.CustomData = { elements:$() };

और प्लगइन को कॉल करते समय, तत्वों का एक सेट इसमें रखा जाता है

 var elements = this; $.CustomData.elements = $.CustomData.elements.add(elements);

और अंतिम फ़ंक्शन जो आवश्यक है जब ताज़ा तत्व राज्य बदलता है:

 /*    disabled/enabled */ var refresh = function () { if (!$(this).prop('disabled')) { $(this).parent().mousedown(pushed); $(this).parent().mouseup(check); $(this).parent().removeClass('disabled'); } else { $(this).parent().addClass('disabled'); $(this).parent().unbind('mousedown', pushed); $(this).parent().unbind('mouseup', check); } };

समझने में बहुत आसान है, बस हैंडलर्स को हटा दें या इसे फिर से जोड़ें और "अक्षम" वर्ग को जोड़ें / हटा दें, जिसके माध्यम से आप तत्व की उपस्थिति को निष्क्रिय अवस्था में सेट कर सकते हैं (आमतौर पर पारदर्शिता बदल जाती है)।

रेडियो बैटन के प्रकार के विवरण के साथ उदाहरण वर्ग:

 .radio { display:block; height: 25px; width: 19px; overflow:hidden; background: url("radio.png") no-repeat 0 0 transparent; position:relative; } .radio.disabled{ opacity:0.5; filter:Alpha(opacity="50"); } .radio input{ position:absolute; right:-400px; top:0px; }

कॉल प्लगइन:

 $("input[type='radio']").Custom({ customStyleClass:'radio', customHeight:'25' });

आशा है कि यह मेरे जैसे अन्य लोगों को मेरा पहला jQuery प्लग इन लिखने में मदद करेगा।

यह वह सब है जो मैं अपनी ज़रूरत के लिए अपनी खराब खोज के बारे में बताना चाहता था। मैं jQuery सीखने और प्लगइन लिखने में उनकी मदद के लिए अच्छे आदमी आंद्रेई को धन्यवाद देता हूं, साथ ही इस प्लगइन के डेवलपर http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ js पर है और पूरी तरह से समाप्त नहीं हुआ है मुझे अपनी जरूरत के चिप्स के साथ मुझे खुद को लिखने का अवसर दिया। मुझे प्लैटिनम के काम में सुधार करने के लिए टिप्पणियों और आलोचनाओं पर खुशी होगी।

प्लगइन यहाँ है https://github.com/n0r8/Custom-radio-checkbox

jQuery के कस्टम रेडियो और चेकबॉक्स

More articles: