🤳🏻 🗄️ 🥔 जावास्क्रिप्ट के बिना स्टाइलिंग सिलेक्ट-ऑप्शन (लगभग) 👲🏿 🖖🏾 👰🏼

कुछ मानक तत्वों को स्टाइल करना एक गैर-तुच्छ कार्य है।

बेशक, एक अच्छा विशेषज्ञ कुछ भी शैली बना सकता है, लेकिन सब कुछ इस कार्रवाई की जटिलता पर निर्भर करता है।

रेडियो बटन और चेकबॉक्स को स्टाइल करने में काफी समय लगेगा - छिपे हुए इनपुट के साथ एक लेबल को स्टाइल करने का विचार नया नहीं है, और लंबे समय तक हर जगह इस्तेमाल किया गया है। ~~बाकी को स्टाइल करने के लिए - जावास्क्रिप्ट है।~~ आज मैं आपको इसके बारे में बताना चाहता हूं कि न्यूनतम जावास्क्रिप्ट कोड (0 से 26 लाइनों तक) और न्यूनतम अतिरिक्त HTML मार्कअप के साथ ड्रॉप-डाउन सूचियों को स्टाइल करना कितना आसान है।

आसान जावास्क्रिप्ट के साथ चयन (लगभग)

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

और इसलिए, जब मैंने दुर्भाग्यपूर्ण चयन को बदलने के लिए डिज़ाइन किया गया एक और डरावना निर्माण लिखना लगभग समाप्त कर दिया था, तो मेरे पास एक सवाल था:

क्यों?

आमतौर पर यह प्रश्न बुद्धिमान शिथिलता, जीवन का पुनर्विचार आदि होता है, लेकिन इस बार कुछ गलत हो गया, और मुझे एहसास हुआ कि प्रश्न वास्तव में अच्छा था, और सबसे महत्वपूर्ण - उपयोगी।

एक छोटा शैक्षिक कार्यक्रम:

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

ड्रॉप-डाउन सूची में 2 मुख्य तत्व शामिल हैं :

संपूर्ण सूची के लिए कंटेनर का चयन करें
विकल्प - सूची आइटम

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

की मुख्य कार्यक्षमता सर्वर को चयनित आइटम (ओं) के बारे में जानकारी भेजना है।

पूर्णता के लिए, यहां तत्वों की विशेषताओं की एक सूची है (ताकि आप अनुमान लगा सकें कि उनमें से कितने लागू होंगे):

चयन करें - अक्षम , फ़ॉर्म , एकाधिक , नाम , आवश्यक , आकार
विकल्प - विकलांग , लेबल , चयनित , मूल्य

इस पर, शायद, हम वर्णन के साथ समाप्त करेंगे, और कार्यान्वयन के लिए आगे बढ़ेंगे ।

कई शब्द पहले ही लिखे जा चुके हैं, इसलिए - कोड के करीब:

<form>
  <div class="content">
    <h3 class="title"> 0 </h3>

    <input id="selectName0" type="radio" value="0" name="selectName" />
    <label for="selectName0"> 0 </label>
    <input id="selectName1" type="radio" value="1" name="selectName" />
    <label for="selectName1"> 1 </label>
    <input id="selectName2" type="radio" value="2" name="selectName" />
    <label for="selectName2"> 2 </label>
  </div>
</form>

तो यह कोड किसके लिए अच्छा है? (सब कुछ जिसे स्पष्टीकरण के दौरान तिरस्कृत किया जा सकता है, विशेष रूप से हटा दिया गया है)

चलिए ध्यान दें कि इनपुट और लेबल के उपयोग के कारण सेलेक्ट और ऑप्शन फंक्शनलिटी के कौन से आइटम अपने आप संभव हो गए हैं:

चयन करें - फ़ॉर्म, नाम, आवश्यक
विकल्प - विकलांग, लेबल, चयनित, मूल्य

और वह सब जो लागू होना बाकी है:

चयन करें - अक्षम, एकाधिक, आकार
विकल्प - पूरी तरह से लागू किया गया

बस इनपुट + लेबल बंडलों को जोड़कर, हमने आवश्यक कार्यक्षमता की सूची को 10 अंक से घटाकर 3. बुरा नहीं किया, लेकिन यह अंत नहीं है, है ना?

आइटम Select.multiple (बहुविकल्पी) को लागू करने के लिए - बस ऐसा करें:

<form>
  <div class="content">
    <input id="selectName0" type="checkbox" value="0" name="selectName" />
    <label for="selectName0"> 0 </label>
    <input id="selectName1" type="checkbox" value="1" name="selectName" />
    <label for="selectName1"> 1 </label>
    <input id="selectName2" type="checkbox" value="2" name="selectName" />
    <label for="selectName2"> 2 </label>
  </div>
</form>

हम सिर्फ का प्रकार बदलने के आदानों से रेडियो के लिए चेकबॉक्स , और की एक लगभग पूरा अनुरूप मिल एकाधिक ।

अंतर यह है कि कई चयन के लिए आपको ctrl को बंद करने की आवश्यकता नहीं है (ठीक है, अगर कोई पूरी तरह से कार्यक्षमता की नकल करना चाहता है - जावास्क्रिप्ट मदद करने के लिए)।

क्या बचा है?

चयनित - अक्षम, आकार
विकल्प - पूरी तरह से लागू किया गया

खैर, Select.disabled और Select.size दोनों CSS का उपयोग करते हुए लागू करने के लिए बेहद सरल हैं :

Select.size - आप किस आकार को सेट करते हैं, यह होगा। आपको बस कंटेनर को जोड़ने की आवश्यकता है।
Select.disabled - कंटेनर के लिए, आपको पॉइंटर-ईवेंट जोड़ने की आवश्यकता है : किसी भी उपयोगकर्ता के कार्यों (हॉवर, क्लिक, आदि) की प्रतिक्रिया को रद्द करने के लिए कोई नहीं , ठीक है, आप इसे थोड़ा पारदर्शी बना सकते हैं।

तो, मुख्य कार्यक्षमता है। क्या चीज़ छूट रही है?

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

और अब - उदाहरण:

थोड़ा सा कार्यान्वयन (एक ही विकल्प के साथ ड्रॉप-डाउन मेनू):

और थोड़ा और (कई विकल्पों के साथ ड्रॉप-डाउन मेनू नहीं):

बोनस: मुझे नहीं पता कि मैंने ऐसा क्यों किया, लेकिन ... एक एकल विकल्प और सीएसएस-आधारित हेडर रीसेट के साथ एक ड्रॉप-डाउन मेनू:

इसकी आवश्यकता क्यों है?

इस तथ्य के कारण कि टिप्पणियों को देखते हुए, हर कोई यह नहीं समझता है कि यह कोड क्यों उपयोगी होगा, मैं कुछ स्पष्टीकरण देना आवश्यक मानता हूं।

जब स्टाइल ड्रॉप-डाउन फॉर्म की सूची:

<select>
  <option> 1</option>
  <option> 2</option>
</select>

गंभीर स्टाइल सीमाएं हैं। इसलिए, उन्हें सरल सूचियों से बदल दिया जाता है:

<ul>
  <li> 1</li>
  <li> 2</li>
</ul>

जिसके साथ जावास्क्रिप्ट का उपयोग करके सभी आवश्यक कार्यक्षमता लटका दी जाती है।

चूंकि सूचियां शुरू में किसी भी तरह से रूपों के साथ बातचीत नहीं करती हैं , यह समस्याओं का कारण बनता है।

न केवल सभी बुनियादी कार्यक्षमता को लागू करना आवश्यक है:

स्विचिंग अंक और उनकी बातचीत
राज्य (जाँच, अक्षम)
प्रपत्र के लिए बाइंडिंग और सर्वर पर डेटा भेज रहा है
प्रारंभिक डेटा (ऑटोफिल) का आरंभ
प्रपत्र रीसेट करें (जब आप "रीसेट" बटन पर क्लिक करते हैं, तो सूची को आरंभीकरण के दौरान राज्य में लौटा दिया जाना चाहिए)

वास्तव में, अगर जावास्क्रिप्ट में कुछ टूटता है, तो यह कोई मायने नहीं रखता है, क्योंकि स्क्रिप्ट लोड नहीं हुई, बग उत्पन्न हुई, परिवर्तन हुए - यदि कोई समस्या होती है, तो ड्रॉप-डाउन सूची में बदल जाती है ... ऐसा कुछ जो ड्रॉप-डाउन सूची की तरह दिखता है, लेकिन काम नहीं करता है।
आम तौर पर। बिल्कुल नहीं।

उपयोगकर्ता के लिए, यह इस तरह दिखाई देगा: एक ड्रॉप-डाउन सूची है, लेकिन आप इसके साथ काम नहीं कर सकते।

सर्वर के लिए, यह और भी "मज़ेदार" दिखाई देगा - एक फॉर्म आ गया है जिसमें पर्याप्त डेटा नहीं है। यह अच्छा है कि इस तरह की स्थिति को विकसित करते समय पहले से ही पूर्वाभास था ... आखिरकार, यह सही था?

परिणामी समाधान के पेशेवरों:

( ), . JavaScript ( ). , — . , — / — html ( JS), .
. , , ( ). ul — li , .

(. , , JavaScript' / ):

tab
( select -)
( , )
select ( select . select)
, (JS )
( OptGroup) (, )

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

उस दुनिया में आपका स्वागत है जहाँ आपके पुस्तकालयों के लिए चयन-विकल्प जैसी सूचियाँ थोड़ी छोटी हो जाएँगी, और पुस्तकालयों के बिना इन सूचियों के साथ काम करना लगभग आरामदायक हो जाएगा!

यूपीडी: जैसा कि यह निकला, चेकबॉक्स के मामले में, आवश्यक विशेषता सही ढंग से काम नहीं करती है, और इसे जावास्क्रिप्ट का उपयोग करके भी अनुकरण करने की आवश्यकता है (फिलहाल, आवश्यक के रूप में चिह्नित सभी चेकबॉक्स अनिवार्य हो जाते हैं, और केवल वे)

जावास्क्रिप्ट के बिना स्टाइलिंग सिलेक्ट-ऑप्शन (लगभग)

More articles: