आइए यूआई तत्वों को सही ढंग से डिज़ाइन करें

इतना समय पहले नहीं, मेरा धैर्य भाग गया। सबसे पहले, सभी प्रकार के प्लगइन्स, और फिर विभिन्न चौखटे, HTMLDocument "बल" करना शुरू करते हैं। यह समझने के लिए कि क्या तत्व ने ध्यान केंद्रित किया है या नहीं, वे HTMLBodyElement पर या HTMLDocument पर ऑनक्लिक ईवेंट को ट्रैक करते हैं। और अगर उनमें से कुछ लोग अपना ध्यान खोते समय टैब को दबाने पर ध्यान देते हैं, तो उनमें से अधिकांश इस तथ्य को पूरी तरह से नजरअंदाज कर देते हैं।

फोकस / धुंधला

4 "जादू" डोम इवेंट हैं:

• फोकस
• कलंक
• Focusin
• focusout

साधारण डॉयलाग उन्हें उत्पन्न नहीं करते हैं, हालांकि, यदि हम जादू विशेषता टैबइंडेक्स का उपयोग करते हैं, तो हमारे पास ऐसा अवसर है।
JQuery के लिए अपना स्वयं का UI तत्व बनाते समय, मुझे इस तथ्य से संबंधित 2 समस्याओं का सामना करना पड़ता था कि HTMLInputElement का उपयोग मेरे तत्व के अंदर किया जाता है (इसके बाद मेरा मतलब है HTMLSelectElement और HTMLButtonElement साथ ही)।

समस्या नंबर एक फोकस और ब्लर ईवेंट पॉपअप की कमी है। और यहाँ फ़ोकसिन और फ़ोकटआउट हमारी सहायता के लिए आते हैं । अब हम मूल तत्व स्तर पर फ़ोकस घटनाओं को संभाल सकते हैं।
समस्या नंबर दो माता-पिता में कलंक और फ़ोकटआउट घटनाओं की पीढ़ी है जब एक क्लिक बच्चा HTMLInputElement पर होता है ( टैबइंडेक्स विशेषता केवल टैब का उपयोग करके फ़ोकस को प्रभावित करती है)। जो बदले में हमें विकसित यूआई तत्व के साथ काम करने के पूरे तर्क को "तोड़" देता है। फिलहाल, मुझे इस समस्या का "सभ्य" समाधान नहीं मिला (किसी दस्तावेज़ या निकाय पर ऑंकलिक ईवेंट पर नज़र रखना भी "सभ्य" नहीं है)
पहला संभव समाधान "माता-पिता" पर ध्यान केंद्रित करते हुए "बच्चों" के लिए कीबोर्ड घटनाओं को प्रसारित करना है, लेकिन फिलहाल, कोई भी ब्राउज़र इस प्रकार की घटनाओं की सही पीढ़ी का समर्थन नहीं करता है (एफएक्स अपने स्वयं के इंटरफेस का समर्थन करता है। IE9 और क्रोम मानक का पालन करते हैं, लेकिन उनके पास है। एक बग जब एक दबाया कुंजी का कोड संचारित करता है - शून्य हमेशा प्रसारित होता है। ओपेरा कीबोर्ड की घटनाओं को उत्पन्न नहीं कर सकता है)
दूसरा फ़ोकस घटनाओं के नुकसान के लिए document.activeElement की जाँच कर रहा है (और यहाँ एफएक्स और क्रोम में परेशानियों के बिना नहीं है, सक्रियण एक नए तत्व का लिंक बन जाता है जिसे ब्लर ईवेंट समाप्त होने के बाद ही फ़ोकस प्राप्त हुआ है)।
और चूंकि इनमें से कोई भी तरीका काम नहीं करता है, इसलिए मुझे "गंदे हैक" का सहारा लेना पड़ा। सामान्य धारा से धुंधला बयान निकालें , दूसरे शब्दों में, setTimout का उपयोग करें ।
>>> यूपीडी
यह पता चला है कि हम और jQuery डेवलपर्स इस समस्या को हल करने के लिए उसी तरह से गए ( स्वतः पूर्ण )
<<<< यूपीडी

सीएसएस सिस्टम रंग

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

>>> यूपीडी
बेशक, यदि आप अपने स्टाइल किए गए एप्लिकेशन के लिए एक बटन बनाते हैं, तो सिस्टम रंगों का उपयोग करना बेवकूफी है। मैं ऐसे मामलों का उल्लेख करता हूं जब एक सिस्टम GUI तत्व या इसकी भिन्नता का अनुकरण किया जाता है। उदाहरण के लिए, सेन्चा (पूर्व में एक्सटीजेएस) में, तत्वों का पृष्ठभूमि रंग विंडो के बजाय सफेद है। यहाँ एक उदाहरण है ।
JQuery में, सभी UI समाधानों के लिए डिफ़ॉल्ट रंग नारंगी है। उन्होंने ऐसा करने का फैसला क्यों किया यह अभी भी मेरे लिए एक रहस्य है। यदि वे डिफ़ॉल्ट सिस्टम रंगों का उपयोग करते हैं, तो वे कई लोगों के लिए जीवन आसान बना देंगे (कैलेंडर स्वीकार करते समय jQuery UI शैलियों के साथ पीड़ित होना शुरू कर दिया? :))
<<<< यूपीडी

event.stopPropagation ()

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

WAI-ARIA

और अंत में - IE8 की रिलीज़ के बाद मैंने जो मानक सीखा था। यह डिवाइस (ब्राउज़र) के किनारे से साइट और / या इंटरनेट एप्लिकेशन की सामग्री के दृष्टिकोण को परिभाषित करता है। मानक विकसित किया गया था और एक तंत्र के रूप में प्रस्तुत किया गया था जो विकलांग लोगों को आपके ऑनलाइन प्रोजेक्ट का पूरी तरह से उपयोग करने की अनुमति देता है।
लेकिन मुझे ऐसा लगता है कि यह मानक मोबाइल ब्राउज़रों में सक्रिय रूप से लागू होगा। क्योंकि WAI-ARIA का समर्थन करने वाले UI तत्वों का उपयोग उन्हें अधिक सुविधाजनक बना देगा। उदाहरण के लिए, विस्तारित HTMLSelectElement IE9 के मोबाइल संस्करण में इस तरह दिखता है:


सहमत हूँ, मोबाइल फोन पर इस तरह की सूची से चयन करना एक छोटे, यद्यपि "क्यूट" है जो जेएस और एचटीएमएल से बनाया गया है, उससे कहीं अधिक सुविधाजनक और सुखद है।

एक आफ्टरवर्ड के बजाय

ध्यान से / धुंधली समस्या को हल करने में मदद के लिए मैंने इस नोट को लिखने का फैसला किया, ताकि हब्बर समुदाय से मदद मांगी जा सके। मैं इसे 1 महीने से अधिक समय से देख रहा हूं, और सक्रिय विकास परिवर्तनों या w3c को मानकीकृत करने के लिए या तो ब्राउज़र डेवलपर्स से संपर्क करने की सोच रहा हूं।

"यह दिलचस्प है।"

Google द्वारा Gmail में सबसे अच्छी तरह से बनाए गए UI तत्व कार्यान्वित किए गए हैं। ये अक्षरों की सूची के ऊपर के बटन हैं।