ट्रीग्रिड और अन्य उन्नत पैटर्न
सबसे कठिन संयुक्त विजेटों को आत्मविश्वास से सँभालें।
ट्रीग्रिड और अन्य उन्नत पैटर्न, CoddyKit पर Web Accessibility Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Web Accessibility Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
कठिन मोड में प्रवेश
कुछ विजेट वास्तव में जटिल होते हैं: ट्रीग्रिड, ग्रिड और ट्री एक साथ पंक्तियों, कॉलम और फैलाए जा सकने वाले नोड को मिलाते हैं। 🌳
ट्रीग्रिड क्या होता है
ट्रीग्रिड ऐसा ग्रिड है जिसकी पंक्तियाँ ट्री की तरह फैल और सिकुड़ सकती हैं। यह नेस्ट किए गए फ़ोल्डर और विवरण वाले कॉलमों के साथ फ़ाइल ब्राउज़र के लिए बिल्कुल उपयुक्त है।
मुख्य भूमिकाएँ
कंटेनर पर role="treegrid", हर पंक्ति पर role="row" और सेल पर role="gridcell" का उपयोग करें। इसकी संरचना वास्तविक ग्रिड जैसी होती है।
<div role="treegrid">
<div role="row">
<span role="gridcell">src</span>
</div>
</div>फैलने योग्य पंक्तियाँ
जो पंक्ति खुल सकती है, उसमें aria-expanded होता है: उसके बच्चे दिखाई देने पर इसका मान true और सिकुड़ी हुई अवस्था में false होता है। लीफ़ पंक्तियों में इसे पूरी तरह छोड़ दें।
<div role="row" aria-expanded="false"
aria-level="1">Folder</div>aria-level से गहराई बताना
ट्री में कोई पंक्ति कितनी गहराई पर है, यह बताने के लिए aria-level का उपयोग करें। स्तर 1 सबसे ऊपर होता है और हर नेस्ट की गई पंक्ति में स्तर एक बढ़ जाता है।
दो अक्षों पर गति
ट्रीग्रिड में तीर कुंजियाँ दोनों अक्षों पर ले जाती हैं: ऊपर और नीचे से पंक्तियाँ बदलती हैं, जबकि बाएँ और दाएँ से सेल के बीच जाते हैं या उन्हें सिकोड़ते और फैलाते हैं।
फैलाने और सिकोड़ने की कुंजियाँ
पैरेंट पंक्ति पर Right Arrow उसे फैलाता है और Left Arrow उसे सिकोड़ता है। यह उसी तरह काम करता है जैसे डेस्कटॉप के फ़ाइल ट्री हमेशा से करते आए हैं।
एक टैब स्टॉप
पूरा ट्रीग्रिड एक ही टैब स्टॉप होता है। roving tabindex वास्तविक फ़ोकस को सेल के बीच ले जाता है, जिससे विजेट एक संयुक्त नियंत्रण जैसा महसूस होता है।
आकार और स्थिति निर्धारित करना
गतिशील या वर्चुअलाइज़ की गई पंक्तियों के लिए aria-setsize और aria-posinset का उपयोग करें, ताकि सभी पंक्तियाँ रेंडर न होने पर भी उपयोगकर्ताओं को स्थिति की गिनती सुनाई दे।
Home, End और छलाँगें
उन्नत ग्रिड में पहली या आखिरी सेल पर जाने के लिए Home और End जोड़े जाते हैं। डेटा की बिल्कुल शुरुआत या अंत पर जाने के लिए Home या End के साथ Ctrl दबाएँ।
APG का सहारा लें
इन पैटर्न में ज़रा-सी गलती भी गंभीर होती है, इसलिए APG उदाहरण का ध्यान से अनुसरण करें और वास्तविक स्क्रीन रीडर से परीक्षण करें। छोटी-सी गलती पूरे विजेट को बिगाड़ सकती है।
त्वरित जाँच
आप एक फ़ाइल ब्राउज़र बनाते हैं जिसमें पंक्तियाँ खुलकर ग्रिड के अंदर नेस्ट की गई पंक्तियाँ दिखाती हैं। इसके लिए कौन-सी भूमिका उपयुक्त है?
पुनरावलोकन
ट्रीग्रिड ग्रिड और ट्री का मेल है: aria-expanded और aria-level वाली पंक्तियाँ, दो अक्षों पर चलने वाली तीर कुंजियाँ और roving tabindex के ज़रिए एक टैब स्टॉप। APG पर भरोसा करें और अच्छी तरह परीक्षण करें। ✅
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “ट्रीग्रिड और अन्य उन्नत पैटर्न” पाठ निःशुल्क है?
हाँ—“ट्रीग्रिड और अन्य उन्नत पैटर्न” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Web Accessibility Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“ट्रीग्रिड और अन्य उन्नत पैटर्न” में मैं क्या सीखूँगा?
सबसे कठिन संयुक्त विजेटों को आत्मविश्वास से सँभालें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Web Accessibility Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Web Accessibility Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Web Accessibility Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“ट्रीग्रिड और अन्य उन्नत पैटर्न” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Web Accessibility Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Web Accessibility Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- APG पढ़ना: पैटर्न, कुंजियाँ और उदाहरण
- कॉम्बोबॉक्स और स्वतः पूर्णता सही तरीके से
- मेनू, मेनुबार और मेनू बटन
- ट्रीग्रिड और अन्य उन्नत पैटर्न