व्यावहारिक Actions: clickOutside tooltip autofocus
सामान्य UI पैटर्न के लिए वास्तविक दुनिया में उपयोगी, पुनःप्रयोग योग्य actions बनाएँ।
व्यावहारिक Actions: clickOutside tooltip autofocus, CoddyKit पर Sveltejs Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Sveltejs Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
clickOutside क्रिया
मेनू और ड्रॉपडाउन बंद करने के लिए किसी तत्व के बाहर होने वाले क्लिक का पता लगाएँ।
function clickOutside(node, cb) {
function handler(e) { if (!node.contains(e.target)) cb(); }
document.addEventListener("click", handler, true);
return { destroy() { document.removeEventListener("click", handler, true); } };
}clickOutside का उपयोग करें
ऐसा कॉलबैक पास करें जो उपयोगकर्ता के बाहर क्लिक करने पर चलता है।
<div use:clickOutside={() => open = false}>autofocus क्रिया
माउंट होने पर किसी तत्व पर फ़ोकस करें; यह bind:this + onMount से अधिक साफ़ तरीका है।
function autofocus(node) { node.focus(); }autofocus का उपयोग करें
इसे इनपुट या किसी भी फ़ोकस किए जा सकने वाले तत्व पर लागू करें।
<input use:autofocus />टूलटिप क्रिया
होवर करने पर टूलटिप दिखाएँ। श्रोताओं और DOM निर्माण को एक ही क्रिया में समाहित करें।
lazyLoad क्रिया
छवियों को आवश्यकता पर लोड करने के लिए IntersectionObserver को use: के साथ मिलाएँ।
clickConfirm क्रिया
विनाशकारी कार्रवाइयों की पुष्टि के लिए निर्धारित समय-सीमा के भीतर दो क्लिक आवश्यक करें।
घटकों में पुनः उपयोग करें
एक बार लिखे जाने के बाद कोई क्रिया हर संगत तत्व पर काम करती है। इन्हें $lib/actions में रखें।
क्रिया लाइब्रेरी
svelte-use जैसे पैकेज पहले से बनी दर्जनों क्रियाएँ उपलब्ध कराते हैं।
क्रियाओं को संयोजित करें
एक तत्व पर कई क्रियाएँ लागू करें: use:autofocus use:clickOutside={close}।
सर्वोत्तम अभ्यास
क्रियाओं को एक ही व्यवहार पर केंद्रित रखें। अधिक समृद्ध प्रभावों के लिए उन्हें संयोजित करें।
त्वरित जाँच
clickOutside क्रिया को किस चीज़ की आवश्यकता होती है?
पुनरावलोकन
clickOutside, autofocus और tooltip जैसी व्यावहारिक क्रियाएँ दिखाती हैं कि पुनः उपयोग योग्य DOM व्यवहारों को कैसे समाहित किया जाता है।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 41
- पाठ
- 163
अक्सर पूछे जाने वाले प्रश्न
क्या “व्यावहारिक Actions: clickOutside tooltip autofocus” पाठ निःशुल्क है?
हाँ—“व्यावहारिक Actions: clickOutside tooltip autofocus” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Sveltejs Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“व्यावहारिक Actions: clickOutside tooltip autofocus” में मैं क्या सीखूँगा?
सामान्य UI पैटर्न के लिए वास्तविक दुनिया में उपयोगी, पुनःप्रयोग योग्य actions बनाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Sveltejs Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Sveltejs Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Sveltejs Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“व्यावहारिक Actions: clickOutside tooltip autofocus” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Sveltejs Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Sveltejs Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- use: निर्देश सिंटैक्स
- Action पैरामीटर और अपडेट
- destroy() सफ़ाई फ़ंक्शन
- व्यावहारिक Actions: clickOutside tooltip autofocus