जावास्क्रिप्ट के बिना स्प्लिट बटन ड्रॉपडाउन

सभी को शुभ दिन!

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

हालाँकि, बूटस्ट्रैप जैसे कार्यान्वयन कई कारणों से पसंद नहीं हैं:

• निरर्थक और काफी न्यूरोलॉजिकल मार्कअप नहीं
• जावास्क्रिप्ट तेज

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

दरअसल, समाधान मेरे द्वारा प्रस्तुत लेख में चेकबॉक्स और रेडियो के सरल अनुकूलन पर आधारित है।

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

अंकन

< बटन आईडी = "एक्शन" > एक्शन < / बटन >
< लेबल के लिए = "कार्रवाई" > & # x25bc;
< ul >
< li शीर्षक = "चयनित संपादित करें" > < इनपुट आईडी = "संपादित करें" प्रकार = "रेडियो" नाम = "क्रिया" मूल्य = "संपादित करें" छिपा हुआ चेक / > < लेबल के लिए = "संपादित करें" > संपादित करें < / लेबल > < / ली >
< li शीर्षक = "हटाएं चयनित" > < इनपुट आईडी = "हटाएं" प्रकार = "रेडियो" नाम = "क्रिया" मूल्य = " छिपा " / हटाएं << लेबल के लिए = "हटाएं" > हटाएं < / लेबल > < / li >
< li शीर्षक = "मार्क के रूप में चयनित" > < इनपुट आईडी = "रीड" टाइप = "रेडियो" नाम = "एक्शन" मूल्य = "पढ़ा" छिपा हुआ / > < लेबल के लिए = "पढ़ें" > पढ़ें < / लेबल > < / ली >
< li शीर्षक = "मार्क स्पैम के रूप में चयनित" > < इनपुट आईडी = "स्पैम" प्रकार = "रेडियो" नाम = "कार्रवाई" मूल्य = "स्पैम" छिपा हुआ / > < लेबल के लिए = "स्पैम" > स्पैम < / लेबल > <। / ली >
< / ul >
< / लेबल >

शैलियों

बटन , लेबल { कर्सर : सूचक ; }
बटन ,
बटन + लेबल {
फ्लोट : बाएं ;
प्रदर्शन : इनलाइन- ब्लॉक ;
मार्जिन : 0 ;
पृष्ठभूमि : # 659A22 रिपीट-एक्स ;
पृष्ठभूमि-चित्र : -webkit-linear-gradient ( शीर्ष , # 9AC92C , # 659A22 ) ;
पृष्ठभूमि-छवि : -o-linear-gradient ( शीर्ष , # 9AC92C , # 659A22 ) ;
पृष्ठभूमि-छवि : -मोज़-लीनियर-ग्रेडिएंट ( शीर्ष , # 9AC92C , # 659A22 ) ;
पृष्ठभूमि-छवि : रैखिक-ढाल ( शीर्ष , # 9AC92C , # 659A22 ) ;
सीमा : 1px ठोस आरजीबीए ( 0 , 0 , 0 , 0.0976563 ) ;
सीमा-तल-रंग : rgba ( 0 , 0 , 0 , 0.246094 ) ;
सीमा-शीर्ष-रंग : आरजीबीए ( 255 , 255 , 255 , 0.148438 ) ;
रंग : #fff ;
फ़ॉन्ट-आकार : 13 पीएक्स ;
कर्सर : सूचक ;
font-family : 'Helvetica Neue' , Helvetica , Arial , sans-serif ;
लाइन-ऊँचाई : 16 पीएक्स ;
गद्दी : 5px 10px ;
पाठ-छाया : # 659A22 1px 1px 0px ;
-वेबकैट-संक्रमण : 0.1s रैखिक सभी ;
संक्रमण : 0.1s रैखिक सभी ;
vartical-align : middle ;
}
बटन : होवर , बटन + लेबल : होवर {
पाठ-सजावट : कोई नहीं ;
पृष्ठभूमि-रंग : # 659A22 ;
पृष्ठभूमि-स्थिति : 0 -15px ;
-वेबकैट-संक्रमण : पृष्ठभूमि-स्थिति 0.1s रैखिक ;
-ओ-संक्रमण : पृष्ठभूमि-स्थिति 0.1s रैखिक ;
-मोज़-संक्रमण : पृष्ठभूमि-स्थिति 0.1 एस रैखिक ;
संक्रमण : पृष्ठभूमि-स्थिति 0.1s रैखिक ;
}
बटन { बॉर्डर-टॉप-लेफ्ट-रेडियस : 3 पीएक्स ; बॉर्डर-बॉटम-लेफ्ट-रेडियस : 3 पीएक्स ; }
बटन : सक्रिय {
रंग : #fff ;
बॉक्स-छाया : इनसेट 0 2px 4px rgba ( 0 , 0 , 0 , 0.15 ) , 0 1px 2px rgba ( 0 , 0 , 0 , 0.05 ) ;
}
बटन + लेबल {
बॉर्डर-टॉप-राइट-रेडियस : 3 पीएक्स ;
बॉर्डर-बॉटम-राइट-रेडियस : 3 पीएक्स ;
स्थिति : रिश्तेदार ;
}
बटन + लेबल : होवर > उल {
दृश्यता : दृश्यमान ;
अपारदर्शिता : 1 ;
मार्जिन : 0 ;
}
उल {
दृश्यता : छिपी हुई ;
स्थिति : निरपेक्ष ;
शीर्ष : 30 पीएक्स ;
सही : 0 ;
चौड़ाई : 90 पीएक्स ;
मार्जिन : 20 पीएक्स 0 0 0 ;
गद्दी : 10 पीएक्स 0 ;
z- इंडेक्स : 9999 ;
बॉर्डर : 1px ठोस #ccc ;
बॉर्डर-टॉप- क्लॉर : #cfcfcf ;
सीमा-छवि : प्रारंभिक ;
पृष्ठभूमि : #fff ;
रंग : # 659A22 ;
पाठ-छाया : कोई नहीं ;
अपारदर्शिता : 0 ;
बॉक्स-छाया : 1px 2px 4px rgba ( 0 , 0 , 0 , 0.2 ) ;
सीमा-त्रिज्या : 3 पीएक्स ;
संक्रमण : सभी 0.2s में आसानी से बाहर ;
-वेबकैट-संक्रमण : सभी 0.2s में आसानी से बाहर ;
-मोज़-संक्रमण : सभी 0.2s में आसानी से बाहर ;
-ओ-संक्रमण : सभी 0.2s में आसानी से बाहर ;
}

उल ली {
फ्लोट : कोई नहीं ;
प्रदर्शन : ब्लॉक ;
सीमा : 0 ;
लाइन-ऊंचाई : 20 पीएक्स ;
}
उल ली इनपुट [ प्रकार = "रेडियो" ] { प्रदर्शन : कोई नहीं ; }
उल ली इनपुट [ प्रकार = "रेडियो" ] + लेबल {
फ़ॉन्ट-आकार : 14 पीएक्स ;
चौड़ाई : 70 पीएक्स ;
प्रदर्शन : सूची-आइटम ;
सूची-शैली : कोई नहीं ;
ऊर्ध्वाधर-संरेखित करें : आधार रेखा ;
गद्दी : 2px 10px ;
}
उल ली इनपुट [ प्रकार = "रेडियो" ] + लेबल : होवर , उल ली इनपुट [ प्रकार = "रेडियो" ] : जाँच + लेबल +
पृष्ठभूमि-रंग : # 659A22 ;
बैकग्राउंड-रिपीट : रिपीट-एक्स ;
पृष्ठभूमि-चित्र : -webkit-linear-gradient ( शीर्ष , # 9AC92C , # 659A22 ) ;
पृष्ठभूमि-छवि : -मोज़-लीनियर-ग्रेडिएंट ( शीर्ष , # 9AC92C , # 659A22 ) ;
पृष्ठभूमि-छवि : -o-linear-gradient ( शीर्ष , # 9AC92C , # 659A22 ) ;
पृष्ठभूमि-छवि : रैखिक-ढाल ( शीर्ष , # 9AC92C , # 659A22 ) ;
रंग : #fff ;
पाठ-छाया : कोई नहीं ;
}
उल ली इनपुट [ प्रकार = "रेडियो" ] + लेबल : होवर {
बॉक्स-छाया : इनसेट 0 2px 4px rgba ( 0 , 0 , 0 , 0.15 ) , 0 1px 2px rgba ( 0 , 0 , 0 , 0.05 ) ;
}

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

अंत में

तो क्या हुआ और क्या नहीं:

यह पता चला:

• कार्यों के ड्रॉप-डाउन मेनू के रूप में रेडियो बटन की एक सूची प्रस्तुत करें
• नियमित रूप से काम करने वाले एक निष्क्रिय तरीके से जावास्क्रिप्ट के बिना करें

नहीं है:

• क्लिक-टू-कॉल सूची
• जावास्क्रिप्ट के बिना ड्रॉप-डाउन सूची आइटम पर क्लिक करते समय क्रॉस-ब्राउज़र फॉर्म सबमिशन

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

दरअसल, मुझे नहीं पता कि इसका क्या कारण है। या तो ये फिर से ब्राउज़रों द्वारा विनिर्देश की व्याख्या में अंतर हैं, या मैंने इसे कहीं समायोजित किया है। अगर किसी के पास कोई विचार है, तो कृपया टिप्पणियों में साझा करें।

UPD: ibnteo से इस तरह के नियंत्रण के लिए एक कार्यान्वयन विकल्प यहां देखा जा सकता है । उन लोगों के लिए जिन्हें js के बिना किसी सूची आइटम पर क्लिक करने के साथ-साथ फ़ॉर्म को सबमिट करने की सख्त आवश्यकता है, साथ ही क्लिक करके सूची का विस्तार करना है, लेकिन वास्तव में मार्कअप के बारे में चिंतित नहीं हैं, यह विकल्प अच्छी तरह से काम कर सकता है। धन्यवाद ibnteo।