सरल सार्वभौमिक जावास्क्रिप्ट स्विच

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

आप प्रत्येक बार जावास्क्रिप्ट कोड और शैलियों को लिख सकते हैं, लेकिन समय के साथ, यह कोड की वृद्धि की ओर जाता है, जिसका हमने कुछ बिंदु पर सामना किया।

हालाँकि, समस्या को बहुत अधिक सुरुचिपूर्ण ढंग से हल किया जा सकता है। नीचे दिए गए समाधान सरल है और जावास्क्रिप्ट प्रोग्रामर के बाद की भागीदारी की आवश्यकता नहीं है, क्योंकि टाइपसेट्टर स्वतंत्र रूप से शैलियों में आवश्यक बदलाव करने में सक्षम होगा।

कार्य सिद्धांत

हमारे डेवलपर पावेल दोवुश उर्फ डीपीपी द्वारा समाधान प्रस्तावित किया गया था: एचटीएमएल कोड में, जेस्ट ( जावास्क्रिप्ट टॉगल ) वर्ग स्विचिंग तत्व पर पंजीकृत है, और मूल तत्व पर jsw ( जावास्क्रिप्ट आवरण ) जिसके भीतर परिवर्तन होते हैं।

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

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

//  . document.addEventListener('click', clickEvent, false); function clickEvent(e) { /*     .jst,    toggle(). */ if (e.target && /(^|\s)jst(\s|$)/.test(e.target.className)) { toggle(e.target); //     (,   ). e.preventDefault(); } } function toggle(el) { var cls = el.rel || 'jse', //       . rcls = new RegExp('(^|\\s)' + cls + '(?=\\s|$)'); //   . do { el = el.parentNode; if (!el) return; //    -  . } while(!/(^|\s)jsw(\s|$)/.test(el.className)); //  . if (rcls.test(el.className)) { el.className = el.className.replace(rcls, ''); } else { el.className += ' ' + cls; } } 

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

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

मानक स्विचिंग विकल्पों के लिए, मानक शैलियों को परिभाषित करना उचित है। बुश में, इसके लिए jsh, jsb, jseh, jseb जैसी कक्षाओं का उपयोग किया जाता है:

 .js .jsb, .js .jse .jseb { display: block } .js .jsi, .js .jse .jsei { display: inline } .jsb, .jsi, .js .jsh, .js .jse .jseh { display: none } 

Js वर्ग स्क्रिप्ट द्वारा तुरंत निष्पादन पर जोड़ दिया जाता है, जिससे जावास्क्रिप्ट सक्षम या अक्षम होने के आधार पर शैली का एक पृथक्करण प्रदान किया जाता है:

 document.documentElement.className += ' js' 

Jsi और jsb वर्ग सक्षम करते हैं जब जावास्क्रिप्ट क्रमशः इनलाइन और ब्लॉक तत्वों को प्रदर्शित करने के लिए चल रहा होता है , इसके विपरीत jsh इसे छुपाता है। Jsei , jseb और jseh वर्ग js समकक्षों की उपस्थिति में js समकक्षों के समान ही काम करते हैं।

इन कक्षाओं का उपयोग करके, आप ब्राउज़र में जावास्क्रिप्ट बंद होने की स्थिति में "सुशोभित गिरावट" (अंग्रेजी सुंदर गिरावट ) सुनिश्चित करते हुए, पृष्ठ के व्यवहार को लचीले ढंग से नियंत्रित कर सकते हैं।

उपयोग के उदाहरण

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


पाठ पर क्लिक करने के बाद, फ़ील्ड दिखाई देते हैं, और छद्म लिंक स्वयं गायब हो जाता है (छवि में प्रपत्र की चौड़ाई कम हो जाती है)।


यह उदाहरण के लिए, निम्न HTML कोड का उपयोग करके प्राप्त किया जा सकता है:

 <div class="jsw"> <span class="change jst jsi jseh">    </span> <div class="jsh jseb"> <label for="firstname"></label> <input type="text" id="firstname"> </div> <div class="jsh jseb"> <label for="lastname"></label> <input type="text" id="lastname"> </div> </div> 

छद्म-लिंक पर परिवर्तन वर्ग उपस्थिति को निर्धारित करता है, jsi जावास्क्रिप्ट सक्षम होने पर दिखाता है, और jseh स्विच करने के बाद इसे छुपाता है। जावास्क्रिप्ट वर्ग का उपयोग करते हुए, जावास्क्रिप्ट सक्षम होने पर फ़ील्ड छिपाए जाते हैं, और jseb उन्हें स्विच करने के बाद दिखाई देता है।

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

जैसा कि आप उदाहरण से देख सकते हैं, केवल राउंड-ट्रिप ऑपरेशन के लिए स्विच का उपयोग करना आवश्यक नहीं है। इसका उपयोग एकपक्षीय कार्यों के मामले में भी किया जा सकता है, जैसे कि वैकल्पिक फ़ील्ड दिखाना।

साइट पर उपयोग के अन्य उदाहरण:

• उपयुक्त पाठ पर क्लिक करके, आप भुगतान की गई सेवा की शर्तों से खुद को परिचित कर सकते हैं।
  
  नमूना HTML:
  

   <div class="jsw"> <p>  – 100 .      . <span class="jst service_conditions"> </span></p> <p class="jsh jseb"><small>  " !",    Badoo   100 …</small></p> </div> 

  Jsh वर्ग छोटे प्रिंट में पाठ को छुपाता है, और jseb स्विच पर क्लिक करके एक डिस्प्ले प्रदान करता है - "उपयोग की शर्तें" छद्म लिंक।
• यदि आप फोटो के लिए कैप्शन पर क्लिक करते हैं, तो एक विवरण संपादन बॉक्स दिखाई देगा। "रद्द करें" छद्म लिंक प्रारंभिक स्थिति में लौटता है।
  
  

विस्तारित उपयोग

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

इस उपयोग के लिए फ़ंक्शन को संशोधित करना आसान है। ऐसा करने के लिए, jss वर्ग को परिभाषित किया गया है , उस तत्व पर क्लिक करके जिसके साथ, jsw वर्ग के साथ मूल तत्व पर, वर्ग को rel या मान विशेषता से मान के साथ ओवरराइट किया जाएगा। इस विकल्प को पहले से ही सावधानी से उपयोग किया जाना चाहिए, क्योंकि jsw को छोड़कर, तत्व पर कोई अन्य वर्ग अधिलेखित हो जाएगा।

 function clickEvent(e) { if (!e.target) return; //     .jst,  //   toggle(). if (/(^|\s)jst(\s|$)/.test(e.target.className)) { toggle(e.target); //     (  ). e.preventDefault(); e.stopPropagation(); } //    .jss,   toggle() //   . if (/(^|\s)jss(\s|$)/.test(e.target.className)) { toggle(e.target, true); //      //    . if (e.target.tagName != 'INPUT') { e.preventDefault(); e.stopPropagation(); } } } function toggle(el, set) { var cls = el.rel || (el.nodeName == 'INPUT' ? 'jse_' + el.value : 'jse'); //   . do { el = el.parentNode; if (!el) return; //    -  . } while(!/(^|\s)jsw(\s|$)/.test(el.className)); if (set) { //   (.jss). el.className = 'jsw ' + cls; } else { //       . var rcls = new RegExp('(^|\\s)' + cls + '(?=\\s|$)'); //   (.jst). if (rcls.test(el.className)) { el.className = el.className.replace(rcls, ''); } else { el.className += ' ' + cls; } } } 

उदाहरण का उपयोग करें

Badoo उपयोगकर्ता एक दूसरे को उपहार दे सकते हैं, और आपको चुनने में मदद करने के लिए कई अतिव्यापी सेट हैं। उदाहरण के लिए, एक चेरी सभी सेटों में मौजूद है, और एक सॉकर बॉल केवल एक दोस्ताना और पूर्ण में है।



थोड़ा सरलीकृत, HTML इस तरह दिखता है:

 <div id="gifts_wrapper" class="jsw all"> <p class="description"> <a href="#" class="jss" rel="all"> </a> <a href="#" class="jss" rel="popular"></a> <a href="#" class="jss" rel="romantic"></a> <a href="#" class="jss" rel="friendship"></a> </p> <div class="gifts_items"> <div class="giftframe romantic popular"> <img src="…" title=""> </div> <div class="giftframe friendship popular"> <img src="…" title=""> </div> <div class="giftframe friendship"> <img src="…" title=" "> </div> <div class="giftframe romantic friendship"> <img src="…" title=" "> </div> <div class="giftframe romantic"> <img src="…" title=""> </div> <div class="giftframe romantic friendship popular"> <img src="…" title=""> </div> </div> </div> = " <div id="gifts_wrapper" class="jsw all"> <p class="description"> <a href="#" class="jss" rel="all"> </a> <a href="#" class="jss" rel="popular"></a> <a href="#" class="jss" rel="romantic"></a> <a href="#" class="jss" rel="friendship"></a> </p> <div class="gifts_items"> <div class="giftframe romantic popular"> <img src="…" title=""> </div> <div class="giftframe friendship popular"> <img src="…" title=""> </div> <div class="giftframe friendship"> <img src="…" title=" "> </div> <div class="giftframe romantic friendship"> <img src="…" title=" "> </div> <div class="giftframe romantic"> <img src="…" title=""> </div> <div class="giftframe romantic friendship popular"> <img src="…" title=""> </div> </div> </div> 

प्रत्येक उपहार का प्रतिनिधित्व एक <div class = "giftframe"> तत्व के साथ उपहार की एक तस्वीर के अंदर होता है, और तत्व के अतिरिक्त वर्ग एक विशेष समूह से संबंधित होते हैं।

हमारे कार्य के साथ, इन सेटों के स्विचिंग को नियंत्रित करने के लिए केवल निम्नलिखित शैलियों की आवश्यकता होती है:

 .gift_items .giftframe { display:none; } .all .gift_items .giftframe, .popular .gift_items .popular, .romantic .gift_items .romantic, .friendship .gift_items .friendship { display:inline-block; } 

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



नमूना HTML कोड:

 <div class="jsw"> <label> <input type="radio" name="direction" class="jss" value="oneway">    </label> <label> <input type="radio" name="direction" class="jss" value="twoway"> - </label> <label> : <input type="date" name="fly_date"> </label> <label class="back_date"> : <input type="date" name="back_date"> </label> </div> 

निर्दिष्ट कोड के साथ, रिटर्न दिनांक फ़ील्ड को छिपाने से सीएसएस में केवल एक लाइन प्रदान की जा सकती है:

 .jse_oneway .back_date { display:none } 

निष्कर्ष

हर बार पहिया को मजबूत करने के बजाय, आप समस्याओं के वर्ग को सामान्य कर सकते हैं और एक सार्वभौमिक समाधान पा सकते हैं जो उन्हें 80% मामलों में संतुष्ट करता है।

इस आलेख में माना गया फ़ंक्शन आपको जावास्क्रिप्ट कोड को ओवरलोड किए बिना और जावास्क्रिप्ट प्रोग्रामर के संसाधनों को डायवर्ट न करके केवल लेआउट लेआउट के बलों का उपयोग करके पृष्ठ पर कुछ तत्वों को स्विच करने के कई विशिष्ट कार्यों को हल करने की अनुमति देता है। परिणामस्वरूप सीएसएस कोड की मात्रा भी घट जाती है।

फिर भी, ऐसे मामले हैं जब इस फ़ंक्शन का उपयोग असंभव है: उदाहरण के लिए, प्रदर्शित फ़ील्ड पर स्वचालित फ़ोकस (हालांकि नए ब्राउज़रों में ऑटोफ़ोकस विशेषता इस समस्या को हल करती है) या AJAX अनुरोधों का उपयोग करके पृष्ठ के गतिशील रूप से लोड हो रहे हैं।

इसके अलावा, बड़ी संख्या में switchable आइटम के साथ, उदाहरण के लिए, विभिन्न टैब की एक बड़ी संख्या के साथ, CSS कोड अनुचित रूप से फूला हुआ हो सकता है - इतना है कि यह अन्य समाधानों पर विचार करने के लिए समझ में आता है।

इस फ़ंक्शन के फायदे सादगी और बहुमुखी प्रतिभा हैं। यह उन सभी ब्राउज़रों में काम कर सकता है जो जावास्क्रिप्ट चलाते हैं, निष्क्रिय स्क्रिप्ट के मामले में "सुरुचिपूर्ण गिरावट" के लिए सभी विशेषताएं हैं और किसी भी अतिरिक्त तत्वों और "हैक्स" की आवश्यकता नहीं है, छिपे हुए <इनपुट प्रकार = "रेडियो"> का उपयोग करने की विधि के विपरीत CSS3 चयनकर्ता : जाँच की गई ।

अद्यतन: श्रमिकों के अनुरोध पर, यहां कई उदाहरण दिए गए हैं ।

लियो सोलेंटसेव एंगिस , Badoo वेब डेवलपर