👩🏽‍🤝‍👩🏼 👒 🤰🏻 keyContentSwitcher - जेएस पुस्तकालय जल्दी से स्विच बनाने के लिए 🏤 ♣️ 🌹

प्रस्तावना

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

सार / अमूर्तता

सामग्री का कुछ समूह है जिसमें से केवल एक तत्व सक्रिय हो सकता है।
एक पृष्ठ पर कई ऐसे समूह हो सकते हैं। इस प्रकार, आपको काम करने की आवश्यकता है:

समूह का नाम
आइटम का नाम
सक्रिय तत्व को किसी तरह सेट / स्विच करने की क्षमता।

यह दृष्टिकोण आपको किसी भी स्विच को पूरी तरह से लेआउट से बंधा हुआ नहीं लागू करने की अनुमति देता है। तत्वों के एक निश्चित सेट के साथ हार्ड-कोडित प्रकार के स्विच को लागू करने के लिए शैलियों और कक्षाओं के तैयार सेट के साथ प्रसिद्ध पुस्तकालयों से क्या अंतर है?

कार्यान्वयन / उपयोग

1) समूह में HTML तत्व को शामिल करने के लिए, विशेषता डेटा-सामग्री-समूह = "समूह का नाम (कुंजी)" इसमें जोड़ा गया है

2) HTML तत्व की कुंजी को इंगित करने के लिए, विशेषता डेटा-की-इन-ग्रुप = "समूह में सामग्री का नाम (कुंजी)" इसमें जोड़ा जाता है

एक उदाहरण

<div data-content-of-group="lessons" data-key-in-group="1">...</div>

3) सक्रिय तत्व को सक्रिय / स्विच करने के लिए, लिंक तत्व सेट किए गए हैं - लिंक, सामग्री की परिभाषा के समान, डेटा-सामग्री-के-समूह के बजाय केवल डेटा-लिंक-ऑफ-ग्रुप विशेषता का उपयोग किया जाएगा

एक उदाहरण

 <a data-link-of-group="lessons" href="#" data-key-in-group="1">    1</a>

आप 1 सामग्री कुंजी के लिए 1 से अधिक तत्व और लिंक परिभाषित कर सकते हैं।

पृष्ठ लोड होने के पूरा होने पर स्विच चालू हो जाएगा। लिंक पर क्लिक को लाइव ("क्लिक") के लिए एक सदस्यता के माध्यम से लागू किया जाता है - ताकि वे तुरंत काम करेंगे, जिसमें गतिशील रूप से जोड़े गए तत्व भी शामिल हैं।

सक्रिय सामग्री (ओं) और लिंक (ओं) में "सक्रिय" का एक वर्ग है।

जिस समय पृष्ठ लोड हो रहा है, उस समय पृष्ठ पर मौजूद सभी समूहों को समूह में एक सक्रिय सामग्री तत्व (इसी सीएसएस वर्ग वाले) की उपस्थिति के लिए जाँच की जाती है। यदि कोई नहीं है, तो समूह की एक सामग्री "सक्रिय" हो जाती है।

यह शैलियों को जोड़ने के लिए बनी हुई है।

शैली सेटिंग

बहुत सामान्य स्क्रिप्ट ही सक्रिय सामग्री को प्रदर्शित करती है।
मैं आमतौर पर निम्नलिखित शैलियों का उपयोग करता हूं:

.tabHidden{ display: none; } .tabsContainer .active{ display: block; }

सामग्री आइटम के लिए एक वर्जित वर्ग जोड़ें और सामग्री आइटम लपेटें

  <div class="tabsContainer">...</div>

उन्नत उपयोग

इवेंट बाइंडिंग

keyContentSwitcher.tabChanged सक्रिय सामग्री को बदलने के बाद होता है
घटना सदस्यता उदाहरण:

 keyContentSwitcher.tabChanged("_", function(groupKey, key-in-group){ alert("      \"" + groupKey + "\"");})

keyContentSwitcher.beforeTabChanged सक्रिय टैब को बदलने से पहले होता है। आप गलत परिवर्तन करके सामग्री परिवर्तन को रोक सकते हैं।

दोनों मामलों में, कुंजी-इन-ग्रुप सक्रिय कुंजी का नाम है; पहले सक्रिय हैंडलर में वर्तमान सक्रिय सामग्री कुंजी प्राप्त करने के लिए, आप फ़ंक्शन को कॉल कर सकते हैं

 keyContentSwitcher.getActiveKey(groupKey)

यदि हैंडलर को निर्दिष्ट करते समय समूह का नाम निर्दिष्ट नहीं किया जाता है, तो इसे सभी समूहों के लिए बुलाया जाएगा।

नेस्टेड स्विच का उपयोग करना

एक सामान्य स्थिति तब होती है जब स्विच की सामग्री के अंदर एक और सामग्री समूह (उपसमूह) होता है।
अक्सर ये तत्व आरंभीकरण (समूह की पहली सक्रिय सामग्री का चयन) के दौरान "भारी" स्क्रिप्ट का कारण बनते हैं - अजाक्स अनुरोध, ग्राफिक्स, और इसी तरह।
इसलिए, ऐसे उपसमूह के लिए, यह केवल तभी सही ढंग से सक्रिय होगा जब "माता-पिता" की सामग्री दिखाई जाएगी। ऐसा करने के लिए, समूह की सक्रियता को दबा दिया जाता है।

किसी समूह की सक्रियता को दबाने के लिए, आपको मापदंडों की स्थापना करते समय, इसे दबाए गए की सूची में जोड़ना होगा।

 keyContentSwitcher.applySettings({ignoredToActivateGroups:["_",...]});

यह कॉल पेज लोड होने से पहले ही हो जाना चाहिए।

इसके अलावा, सक्रियण का अर्थ केवल समूह के लिए सक्रिय सामग्री का चयन और संबंधित हैंडलर के संचालन से है - यदि समूह की सक्रिय सामग्री का चयन नहीं किया गया है।

समूह सक्रियण

गतिशील रूप से जोड़े गए समूह या दमन सूची में उपयोग किए गए समूह के लिए स्वचालित रूप से सक्रिय सामग्री का चयन करने के लिए, आपको समूह को "सक्रिय" करने की आवश्यकता है। समूह का सक्रियण कार्य द्वारा किया जाता है

 keyContentSwitcher.activateGroup("_")

यदि आपको विशिष्ट सामग्री को सक्रिय करने की आवश्यकता है, तो फ़ंक्शन का उपयोग करें

 keyContentSwitcher.setActiveKey("_", "_")

नाम बदलें

नाम संघर्ष के मामलों में - जब पुस्तकालय के कामकाज के लिए आवश्यक HTML विशेषताओं का उपयोग किसी अन्य पुस्तकालय द्वारा किया जाता है;
और कुछ अन्य कारणों से भी (उदाहरण के लिए, मैंने शुरू में _reg_tabGroupLink, _reg_tabGroupBody, _reg_tabKeys विशेषताओं का उपयोग किया था )
उन्हें ओवरराइड किया जा सकता है, और आप सीएसएस वर्ग को भी ओवरराइड कर सकते हैं जो यह निर्धारित करता है कि पैरामीटर सेट करते समय तत्व "सक्रिय" है

 keyContentSwitcher.applySettings( {linkOfGroup : "link-of-group", contentOfGroup : "content-of-group", keyInGroup : "key-in-group", activeClass : "active", prefix: "data-"});

प्रत्येक HTML विशेषता का उपयोग उपसर्ग + विशेषता नाम के रूप में परिभाषित किया गया है। इसलिए, नाम संघर्ष की स्थिति में, यह केवल उपसर्ग का नाम बदलने के लिए पर्याप्त है।

डिफ़ॉल्ट रूप से, प्रीफ़िक्स "डेटा-" का उपयोग HTML सत्यापन के लिए किया जाता है।

अन्य

कुछ कार्य संक्षिप्तता के लिए नहीं दिए गए हैं - कोड देखें।

परियोजना का भंडार

उदाहरण

ऊर्ध्वाधर टैब
क्षैतिज टैब
अकॉर्डियन
नेस्टेड टैब
नाम बदलें
गतिशील सामग्री
एक वास्तविक परियोजना में उपयोग करें (पुस्तकालय के पुराने संस्करण का उपयोग करके - पुस्तकालय की क्षमताओं को प्रदर्शित करने के लिए दिखाया गया है)
एक ही कुंजी पर कई सामग्री और कई लिंक का उपयोग करना

आवश्यकताओं

लाइब्रेरी को संस्करण 1.4 से शुरू होने वाले jquery की आवश्यकता होती है

ब्राउज़रों और लोकप्रिय जेएस पुस्तकालयों के साथ समस्याओं की पहचान नहीं की गई थी।

keyContentSwitcher - जेएस पुस्तकालय जल्दी से स्विच बनाने के लिए