गैर-मानक चेकबॉक्स

कार्य

मानक लोगों की पूरी कार्यक्षमता के साथ चेकबॉक्स स्टाइल करने का अवसर प्राप्त करें, मानक लोगों को जावास्क्रिप्ट को बंद करने की क्षमता के साथ बंद कर दिया, और उन्हें विभिन्न कॉलबैक और कस्टम घटनाओं के साथ बांधा। चेकबॉक्स समूह की स्थिति को बदलने की क्षमता है।

Jsfiddle उदाहरण देखें

गीथूब से स्रोत डाउनलोड करें

हल किया जाना समस्या

यह आवश्यक है कि मक्खी पर स्टाइल वाले चेकबॉक्स में से एक को बदलने में सक्षम हो:

• cheknut
• जाँच मत करो
• ध्यान में
• zadizeybleny
• zeizeybleny और cheknutiy
• अंकित और ध्यान में

उसी समय, उसके माता-पिता को कुछ कक्षाएं दें + (जो डिजाइन के अनुरूप होगा)।

चेकबॉक्स के प्रत्येक परिवर्तन के लिए धारण करने की क्षमता इसी घटना और यह प्रक्रिया।

सभी लोकप्रिय ब्राउज़रों पर काम करने के लिए।

यह कैसे काम करता है

HTML:

<fieldset class="frame-checks-not-standart"> <label> <span class="niceCheck b_n"> <input autofocus type="checkbox" checked="checked" tabindex="1"/> </span> <span class="title">focus checked</span> </label> </fieldset> 

सीएसएस:

शैलियों में b_n वर्ग की background-image:none होनी चाहिए background-image:none जावास्क्रिप्ट बंद होने पर मानक चेकबॉक्स को संरक्षित करने के लिए background-image:none नियम background-image:none ।

जे एस:

 $('.frame-checks-not-standart').nStCheck(); 

मुझे और क्या पता चल सकता है

1. मापदंडों

   सभी मापदंडों का एक डिफ़ॉल्ट मूल्य होता है।
   
   

   • wrapper (jQuery वस्तु)

     रैपर तत्व जिससे चेकबॉक्स स्विच हो जाएगा;
     
     

   • elCheckWrap (jQuery चयनकर्ता)

     रैपर तत्व, जिसका उपयोग चेकबॉक्स के विभिन्न राज्यों को प्रदर्शित करने के लिए किया जाएगा;
     
     

   • classRemove

     $(elCheckWrap) से हटाए जाने वाले वर्ग का नाम (आपको मानक छोड़ने या चेकबॉक्स के गैर-मानक प्रदर्शन का उपयोग करने की अनुमति देता है)।
     
     

   • evCond (बूलियन प्रकार)

     यदि true तो trigger विधि को बुलाया जाएगा, अन्यथा after विधि को बुलाया जाएगा;
     
     

   • trigger (विधि)

     जब बुलाया जाता है, चार पैरामीटर मिलते हैं:
     
     • वह वस्तु जिसके संदर्भ में प्लगइन कहा जाता है;
     • wrapper ;
     • elCheckWrap ;
     • ईवेंट ऑब्जेक्ट (ईवेंट हैंडलर फ़ंक्शंस)।
     
     

   • after (विधि)

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

2. तरीकों

   सभी विधियाँ एकल पैरामीटर $(elCheckWrap) स्वीकार करती हैं - यदि विधि को फ़ंक्शन के रूप में कहा जाता है। यदि विधि को $(elCheckWrap) के संदर्भ में कहा जाता है, तो हैंडलर फ़ंक्शन में यह this ऑपरेटर का मान लेता है।
   मुझे एक विधि कॉल का एक उदाहरण याद दिलाने दें:
   

    $('.niceCheck').nStCheck('changeCheck') 

   
   साथ ही, इस प्लगइन के तरीकों को इस तरह कहा जा सकता है:
   

    $.nStCheck('changeCheck')($('.niceCheck')) 

   
   

   • _changeCheckStart

     विधि प्रारंभिक स्थिति सेट करती है (जिसे प्लगइन आरंभिक रूप में कहा जाता है);
     
     

   • checkChecked

     checked विशेषता के सकारात्मक मूल्य को सेट करता है, रैपर और $(elCheckWrap) लिए active वर्ग जोड़ता है;
     
     

   • checkUnChecked

     checked विशेषता के नकारात्मक मूल्य को सेट करता है, wrapper और $(elCheckWrap) लिए active वर्ग को हटा देता है;
     
     

   • changeCheck

     checked विशेषता के नकारात्मक मूल्य को निर्दिष्ट करता है, अगर यह सकारात्मक है, और इसके विपरीत (एक तरह का टॉगल);
     
     

   • checkAllChecks

     सभी स्थानांतरित वस्तुओं के लिए checked की checked विशेषता का सकारात्मक मूल्य सेट करता है;
     
     

   • checkAllReset

     सभी स्थानांतरित वस्तुओं के लिए checked विशेषता के नकारात्मक मूल्य को निर्दिष्ट करता है;
     
     

   • checkAllDisabled

     सभी पारित वस्तुओं के लिए disabled विशेषता का सकारात्मक मूल्य सेट करता है, wrapper और $(elCheckWrap) लिए disabled वर्ग जोड़ता है;
     
     

   • checkAllEnabled

     सभी स्थानांतरित वस्तुओं के लिए disabled विशेषता का नकारात्मक मान सेट करता है, रैपर और $(elCheckWrap) लिए disabled वर्ग को हटा देता है;
     
     
   
   

3. घटनाओं

   सभी घटनाओं को हैंगस्पेस ( nstcheck ) के साथ प्रयोग किया जाता है
   

   • reset ( प्रपत्र )

     ईवेंट हैंडलर सभी चयनित नहीं पहले और चयनित के लिए checkAllReset विधि को checkAllReset ;
     
     

   • mousedown ( इनपुट )

     एक घटना हैंडलर मानक व्यवहार को ओवरराइड करता है और राज्य को बदलता है;
     
     

   • click ( इनपुट )

     हैंडलर इवेंट ऑब्जेक्ट पर stopPropagation() विधि को आमंत्रित करता है;
     
     

   • keyup ( इनपुट )

     इवेंट हैंडलर मानक व्यवहार को रद्द कर देता है जब आप स्पेसबार को दबाते हैं और राज्य को बदलते हैं;
     
     

   • focus ( इनपुट )

     इवेंट हैंडलर $(elCheckWrap) और wrapper लिए focus क्लास जोड़ता है;
     
     

   • blur ( इनपुट )

     घटना हैंडलर $(elCheckWrap) और wrapper लिए focus क्लास को हटा देता है;
     
     

   • change ( इनपुट )

     ईवेंट हैंडलर मानक व्यवहार को ओवरराइड करता है;
     
     

   • click ( wrapper )

     ईवेंट हैंडलर रैपर तत्व (परिवर्तन स्थिति) पर "लटका" है।
     
     
   
   

4. कस्टम ईवेंट

   सभी कस्टम ईवेंट्स नाम स्थान ( nstcheck ) के साथ होते हैं
   
   सभी कस्टम ईवेंट इवेंट ऑब्जेक्ट में एक गुण लिखते हैं:
   el ( $ (elCheckWrap) );
   
   इन घटनाओं को इस प्लगइन में शामिल कुछ input पर लटका दिया जा सकता है, उदाहरण के लिए इस तरह:
   

    $('input').on('nstcheck.cc', function(e){ console.log(this); // $('input') - ,     // console.log(e.el); //  $(elCheckWrap) }); 

   
   

   • nstcheck.cc

     checkChecked विधि checkChecked है जब उठता है;
     
     

   • nstcheck.cuc

     checkUnChecked विधि checkUnChecked है जब उठता है;
     
     

   • nstcheck.ad

     जब checkAllDisabled विधि checkAllDisabled ;
     
     

   • nstcheck.ae

     checkAllEnabled विधि checkAllEnabled है जब उठता है।
     

निष्कर्ष

प्लगइन मानक चेकबॉक्स की पूर्ण कार्यक्षमता से सुसज्जित है, इसमें मानक संरचना की तुलना में एक कॉम्पैक्ट HTML संरचना - प्रस्तुति है, और यह कस्टम घटनाओं और कॉलबैक से भी सुसज्जित है। आप किसी भी राज्य को स्टाइल कर सकते हैं जो मानक वाले में है, यह टैब ट्रैवर्सल के साथ काम करता है, मानक रीसेट बटन काम करता है।