बूटस्ट्रैप ड्रॉपडाउन मेनस एन्हांसमेंट v3.1.1

लगभग एक साल पहले, मैंने बूटस्ट्रैप v2 ( हैबरपोस्ट ) के लिए ड्रॉप-डाउन मेनू एक्सटेंशन बनाया। ईस्टर की छुट्टियों के संबंध में, अंत में कार्यक्षमता को संस्करण 3 (बूटस्ट्रैप v3) में अपग्रेड करने का समय था।

फ़ीचर सूची:

• सबमेनू समर्थन जोड़ा गया
• रेडियो और चेकबॉक्स
• स्थिति
• गोली

नए संस्करण में, सभी सीएसएस कोड को एक अलग फ़ाइल में स्थानांतरित कर दिया गया है और यह ड्रॉपडाउन नहीं करता है। बिना परिवर्तन, लेकिन केवल इसे विस्तारित करता है। जावास्क्रिप्ट कोड को बूटस्ट्रैप से dropdown.js के आधार पर बनाया गया था, लेकिन मेरी राय में थोड़ा सुधार हुआ है। उदाहरण के लिए, clearMenus



फ़ंक्शन ने मुझे डरा दिया:

 function clearMenus(e) { $(backdrop).remove() $(toggle).each(function () { var $parent = getParent($(this)) var relatedTarget = { relatedTarget: this } if (!$parent.hasClass('open')) return $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget)) if (e.isDefaultPrevented()) return $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget) }) } //     $(document).on('click.bs.dropdown.data-api', clearMenus)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

यानी हर बार, पृष्ठ पर क्लिक करते समय, यह त्वरित कोड लॉन्च किया गया था, जो अनिवार्य रूप से कुछ भी नहीं था अगर कोई खुले मेनू नहीं थे। मेरे प्रदर्शन में, फ़ंक्शन केवल उन मेनू को बंद करता है जिन्हें एपीआई द्वारा खोला गया है। मैंने clearMenus



फ़ंक्शन को सहेज लिया और इसे सार्वजनिक कर दिया, इसका उपयोग आंतरिक रूप से नहीं किया जाता है, लेकिन यदि आवश्यक हो तो इसे $.fn.dropdown.clearMenus



बाहर से बुलाया जा सकता है।

खैर, निश्चित रूप से, सबमेनू के लिए समर्थन, हालांकि यह कार्यक्षमता नई है और अभी भी अंतिम रूप दी जाएगी।

मूल dropdown.js की जरूरत नहीं है।

1. सबमेनू

डेवलपर्स ने बीएस 3 से इस कार्यक्षमता को हटा दिया।

सबमेनस में अभी वेब पर बहुत जगह नहीं है, खासकर मोबाइल वेब। उन्हें 3.0 के साथ हटा दिया जाएगा। - github.com/twbs/bootstrap/pull/6342#issuecomment-11594010

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

2. रेडियो और चेकबॉक्स

radio



और checkbox



लिए समर्थन जोड़ता है। उदाहरण ।

2. स्थिति

कभी-कभी आपको बटन के ऊपर या केंद्र में मेनू की स्थिति की आवश्यकता होती है। इसके लिए, मानक .pull-right



, नई कक्षाएं। .pull-top



, .pull-center



, .pull-middle



शुरू की गई थीं।

3. गोली

.bullet



वर्ग मेनू में एक तीर जोड़ता है।

---

• डेमो और प्रलेखन
• गिटहब परियोजना
• पिछला संस्करण: गिटहब डेमो

मुझे किसी भी टिप्पणी, टिप्पणी, परिवर्धन के लिए खुशी होगी। आपका ध्यान देने के लिए धन्यवाद।



पुनश्च: GitHub पर पृष्ठ अंग्रेजी में है। मैं अंग्रेजी में बहुत मजबूत नहीं हूं, इसलिए मुझे अशुद्धियों और त्रुटियों को सुधारने में किसी भी मदद की खुशी होगी।