JQuery के चयन स्टाइलिंग प्लगइन्स का अवलोकन

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

यह कोई रहस्य नहीं है कि मानक चयन में सीएसएस के साथ स्टाइल का एक बहुत कमजोर स्तर है। कुछ ब्राउज़रों में वे थोड़े बेहतर हैं, दूसरों में वे थोड़े बदतर हैं, लेकिन समग्र तस्वीर बहुत दुखद है। हमेशा की तरह, जहाँ शुद्ध HTML + CSS विफल होता है, jQuery बचाव में आता है।

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

मानक का चयन करें

लाभ:

• मोबाइल फोन सहित सभी उपकरणों पर काम करता है
• स्वचालित रूप से चौड़ाई समायोजित करता है
• jQuery का उपयोग कर समस्याओं के बिना नियंत्रित
• हमेशा पृष्ठ के दृश्य भाग (तथाकथित "स्मार्ट पोजिशनिंग) पर खुलता है)
• ड्रॉप-डाउन सूची के लिए इष्टतम ऊंचाई निर्धारित करता है
• आपको समूह विकल्पों की अनुमति देता है
• आपको एक ही बार में कई वस्तुओं का चयन करने की अनुमति देता है (जब तक कि निश्चित रूप से, आवश्यक विशेषताओं को निर्धारित न करें)
• Tab'om संक्रमण के लिए प्रतिक्रिया करता है
• पहले अक्षर से चयन किया है
• माउस व्हील के साथ स्क्रॉलिंग का समर्थन करता है

नुकसान:

• सभी ब्राउज़रों में अलग दिखें
• ठीक से स्टाइल करने में सक्षम नहीं है

बॉक्स फैक्टरी 2 का चयन करें

विकल्प के टन के साथ वास्तव में महान प्लगइन।
मात्रा: 29KB
अतिरिक्त कार्य: (इस प्लगइन में उनमें से बहुत कुछ है, मैं मुख्य लोगों को दूंगा)

• avtokomplit
• बहु चयन का समर्थन करता है
• किसी भी क्षेत्र की किसी भी स्टाइल का समर्थन करता है (अंकों के अंदर के चित्र सहित)

आवश्यकताएँ:

• jQuery 1.2.6+ (jQuery 1.5.1 पर भी काम करता है)

लाभ:

• अपनी इच्छानुसार अनुकूलित किया जा सकता है

नुकसान:

• जब लिपियों को बंद कर दिया जाता है, तो यह एक कद्दू में बदल जाता है, बिल्कुल बेकार है
• चयनों को प्रतिस्थापित नहीं करता है, लेकिन divs के साथ इसकी संरचना बनाता है
• स्थापित करना और कॉन्फ़िगर करना मुश्किल है
• कोई स्मार्ट पोजिशनिंग नहीं
• एक बहु-चयन किया गया है (लेकिन पिंचिंग सेमी के बजाय पॉपपीज़ पर, आपको शिफ्ट दबाना होगा)
• टैब का जवाब नहीं

jQuery के खोजा ड्रॉपडाउन प्लगइन

हाइब्रिड select'a और autocomplete'a। यह एक मानक चयन पर आधारित है, अर्थात, इसके लगभग सभी फायदे और नुकसान हैं।
मात्रा: 12KB
अतिरिक्त कार्य:

• avtokomplit

आवश्यकताएँ:

• jQuery 1.3.2+ (jQuery 1.5.1 पर भी काम करता है)

लाभ:

• एक मानक चयन के सभी फायदे हैं
• विकलांगों के साथ काम करता है
• स्थापित करने के लिए सरल और सहज

नुकसान:

• IE6 में, स्वत: पूर्ण काम नहीं करना चाहिए जैसा कि होना चाहिए, हालांकि चयन स्वयं उपयोग करने योग्य रहता है।

jQuery के कस्टम चयन बॉक्स

एक विशिष्ट प्लगइन, एक उदाहरण को देखना बेहतर है। चयनित वस्तुओं को छिपाता नहीं है, उन्हें दिखाई नहीं देता है।
मात्रा: 8KB
अतिरिक्त कार्य:

• आप ऊंचाई, चौड़ाई, स्क्रॉल, गति और उद्घाटन प्रभाव को समायोजित कर सकते हैं

आवश्यकताएँ:

• jQuery 1.3.2+ (jQuery 1.5.1 पर भी काम करता है)

लाभ:

• स्थापित करने के लिए बहुत आसान है
• बहुत आसान है
• एक बहु का चयन किया है

नुकसान:

• एक रैपिंग डिव की जरूरत है
• IE6 में काम नहीं करता है (पूरे पृष्ठ में फैलता है)

jQuery कस्टम चयन बॉक्स

एक सरल और आसान प्लगइन, जो दुर्भाग्य से, कुछ नुकसान हैं।
मात्रा: 3KB
अतिरिक्त कार्य:

• प्लगइन को निष्क्रिय करें

आवश्यकताएँ:

• jQuery 1.2+ (jQuery 1.5.1 पर भी काम करता है)

लाभ:

• एक छोटी मात्रा है
• आसान स्थापित करने के लिए
• आसानी से घूमना जानता है

नुकसान:

• केवल तभी खुलता है जब आप तीर पर क्लिक करते हैं
• समूह विकल्प नहीं कर सकते
• एक साथ कई बिंदुओं को उजागर करने की संभावना नहीं है
• कीबोर्ड पर तीर के साथ स्विच करना नहीं जानता
• ड्रॉपडाउन सूची ऊंचाई सेट नहीं कर सकते
• कोई "स्मार्ट पोजिशनिंग" नहीं
• टैब दबाने पर पता नहीं चलता
• IE6 का समर्थन नहीं करता है (हालांकि एक बहुत मामूली सीएसएस संशोधन इस समस्या को हल करता है)

jQuery का चयन बॉक्स प्लगइन

चयन का सरल प्रतिस्थापन। खामियों के कारण प्लगइन बेकार है।
मात्रा: 8KB
अतिरिक्त कार्य:

• सामान्य चयनों के कार्यान्वित मानक कार्य

आवश्यकताएँ:

• jQuery 1.4+ (jQuery 1.5.1 पर भी काम करता है)

लाभ:

• आसान स्थापित करने के लिए
• कस्टम उपस्थिति प्रभाव है

नुकसान:

• IE6 और IE7 में काम नहीं कर रहा
• यदि चयन पृष्ठ के निचले भाग में मना कर देता है, तो कुछ भी नहीं गिरेगा

jQuery का चयन बॉक्स प्लगइन

लगभग सही प्लगइन।
मात्रा: 16KB
अतिरिक्त कार्य:

• सामान्य चयनों के कार्यान्वित मानक कार्य

आवश्यकताएँ:

• jQuery 1.4.4+ (jQuery 1.5.1 पर भी काम करता है)

लाभ:

• स्थापित करने के लिए बहुत आसान है
• वास्तव में पार ब्राउज़र
• एक बहुत अच्छा प्लगइन और सैंडबॉक्स विवरण प्रदान करता है
• एक बहु का चयन किया है
• उपसमूह है
• विकल्प अक्षम कर सकते हैं
• ऑटो-समायोजन चौड़ाई
• टैब पर प्रतिक्रिया देता है
• कीबोर्ड तीर और स्क्रॉल पर प्रतिक्रिया करता है

नुकसान:

• IE6 में छोटे कीड़े
• कोई स्मार्ट पोजिशनिंग नहीं

jquery.sb.js चयन बॉक्स प्रतिस्थापन

पिछले एक के समान, और कुछ मामलों में भी इसे पार कर जाता है।
मात्रा: 20KB (अतिरिक्त स्क्रिप्ट के साथ)
अतिरिक्त कार्य:

• सामान्य चयनों के कार्यान्वित मानक कार्य
• आप विकल्पों के अंदर किसी भी मार्कअप को डालने के लिए Alt का उपयोग कर सकते हैं (चित्र सहित)

आवश्यकताएँ:

• jQuery 1.3.2+ (jQuery 1.5.1 पर भी काम करता है)
• jquery.ba-थ्रोटल-debounce.min.js
• jquery.tie.js

लाभ:

• स्थापित करने के लिए बहुत आसान है
• एक मल्टीसेलेक्ट है
• उपसमूह हैं
• विकल्प अक्षम कर सकते हैं
• ऑटो-समायोजन चौड़ाई
• टैब पर प्रतिक्रिया देता है
• कीबोर्ड तीरों पर प्रतिक्रिया करता है
• स्क्रॉल करने के लिए प्रतिक्रिया करता है

नुकसान:

• IE6 में काम नहीं करता है, बस मानक छोड़ देता है
• "स्मार्ट पोजिशनिंग" नहीं जानता
• मानक विवरण के बिना उपयोग करना कठिन है

प्लगइन्स जो उनके विकास के वर्तमान स्तर पर हमारे ध्यान देने योग्य नहीं हैं:

• CCombo (IE6 और IE7 के लिए समर्थन के बिना, लेकिन मानक नहीं रहता है)
• कस्टम चयन बॉक्स सीएसएस स्टाइल प्लगइन: jQuery + CSS (IE6 में काम नहीं करता है, बस मानक वाले को छोड़ देता है, चयन के केवल कैप्टिव भाग को स्टाइल करता है)
• jQuery - स्किनिंग HTML सेलेक्ट बॉक्स (IE6 में काम नहीं करता है, FF और सफारी में छोटी गाड़ी)

निष्कर्ष

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

मुझे लगता है कि प्लगइन का माइनस यह है कि यह IE6 में काम नहीं करता है, लेकिन कई के लिए यह महत्वपूर्ण नहीं है। व्यक्तिगत रूप से, मैं दो प्लगइन्स से हूं जो कार्यक्षमता में समान हैं, किसी भी स्थिति में मैं क्रॉस-ब्राउज़र चुनूंगा।
प्लगइन्स की मात्रा केवल उनके जेएस-भाग (और संपीड़ित) के लिए इंगित की जाती है।


यह समीक्षा कलम का टूटना है। मुझे आशा है कि यह तबाही के लिए उपयोगी होगा। टिप्पणियाँ और परिवर्धन का स्वागत है।

upd
Habrausers द्वारा सुझाए गए प्लगइन्स:

• cuSel एक बहुत अच्छा प्लगइन है, सक्रिय रूप से विकसित हो रहा है। कोई स्मार्ट पोजिशनिंग, कीबोर्ड नेविगेशन के साथ समस्या, कोई ऑप्टग्रुप समर्थन (शुचि द्वारा सलाह दी गई)
• सेक्सी कॉम्बो एक बहुत अच्छा प्लगइन है, यहां तक ​​कि स्मार्ट पोजिशनिंग भी है, लेकिन बहुत धीमी गति से, समीक्षाओं को देखते हुए। यह 100 से अधिक तत्वों के साथ सूचियों पर बहुत बुरी तरह से प्रतिक्रिया करता है। विकास बंद है (लेकिन एक कांटा है , जो, जाहिर है, विकसित हो रहा है) ( मेंढक ने सलाह दी, उनकी टिप्पणी में, स्टाइल चयन के लिए अलग-अलग प्लगइन्स का एक पूरा गुच्छा)

सभी प्रकार के तत्वों को जोड़ने वाला संयोजन:

• यूनिफ़ॉर्म - यहां तक ​​कि फ़ाइल अपलोड फ़ील्ड को प्रतिस्थापित करने के लिए, कई प्लग करने योग्य थीम हैं, लेकिन इसके नुकसान भी हैं। ( स्किपफिश को सलाह दी)
• jqTransform - इसके बारे में पहले से ही एक habr पर लिखा है टिप्पणियों को देखते हुए, इसमें बहुत सारे कीड़े हैं। ( स्किपफिश को सलाह दी)
• नाइसफॉर्म एक सुंदर प्लगइन है, लेकिन तीर के साथ नेविगेशन काम नहीं करता है, कोई स्मार्ट स्थिति नहीं है, यह ie6 का समर्थन नहीं करता है, नवीनतम संस्करण 2008 से है। (सलाह दी गई है )