सीएसएस और जावास्क्रिप्ट के साथ स्टाइल ड्रॉपडाउन मेनू

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

यही वह जगह है जहां चुना गया है। यह एक जावास्क्रिप्ट लाइब्रेरी है जो ड्रॉपडाउन अनुभव को बहुत अच्छी लग रही है, साथ ही एक कार्यक्षमता परिप्रेक्ष्य से भी ज्यादा अच्छा है।

का चयन करें ... RedPurpleBlueYellowGreenBlackWhite

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

 $ (दस्तावेज़) .ready (function () {$ ("चुना गया")। चुना गया ();}); 

यह उतना आसान है जितना। अब इसे अगले स्तर पर ले जाएं, क्या होगा यदि आप कई चयनों के लिए ड्रॉपडाउन की कार्यक्षमता को बदलने में सक्षम होना चाहते हैं? नीचे "लाल" के लिए खोजें, फिर एंटर दबाएं, "ब्लू" की खोज करें, फिर एंटर दबाएं। अब आप X या बैकस्पेस को दो बार मारकर अपने चयन से आसानी से उन्हें हटा सकते हैं।

का चयन करें ... RedPurpleBlueYellowGreenBlackWhite

आपको बस इतना करना है कि नीचे दिए गए चयन के कॉल में विकल्प एकाधिक को पास करें। जावास्क्रिप्ट में कोई बदलाव नहीं है, यह ठीक उसी तरह शुरू होता है।

नीचे डेमो देखें या आप ज़िप में उदाहरण डाउनलोड कर सकते हैं।

यह भी देखना