إجراءات عملية: clickOutside وtooltip وautofocus
أنشئ إجراءات قابلة لإعادة الاستخدام لأنماط واجهة المستخدم الشائعة في العالم الحقيقي
إجراءات عملية: clickOutside وtooltip وautofocus درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 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 />إجراء tooltip
اعرضوا تلميحًا عند تمرير المؤشر. اجمعوا المستمعات وإنشاء DOM في إجراء واحد.
إجراء lazyLoad
اجمعوا IntersectionObserver مع use: لتحميل الصور بتكاسل.
إجراء clickConfirm
اطلبوا نقرتين خلال فترة زمنية لتأكيد العمليات المدمرة.
إعادة الاستخدام بين المكونات
بعد كتابة الإجراء، يعمل على أي عنصر متوافق. خزّنوه في $lib/actions.
مكتبات الإجراءات
توفر حزم مثل svelte-use عشرات الإجراءات الجاهزة.
تركيب الإجراءات
طبّقوا عدة إجراءات على عنصر واحد: use:autofocus use:clickOutside={close}.
أفضل ممارسة
اجعلوا كل إجراء مخصصًا لسلوك واحد. ادمجوا الإجراءات للحصول على تأثيرات أغنى.
تحقق سريع
ما الذي يحتاج إليه إجراء clickOutside؟
خلاصة
توضح الإجراءات العملية مثل clickOutside وautofocus وtooltip كيفية تغليف سلوكيات DOM القابلة لإعادة الاستخدام.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «إجراءات عملية: clickOutside وtooltip وautofocus» مجاني؟
نعم — نص درس «إجراءات عملية: clickOutside وtooltip وautofocus» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «إجراءات عملية: clickOutside وtooltip وautofocus»؟
أنشئ إجراءات قابلة لإعادة الاستخدام لأنماط واجهة المستخدم الشائعة في العالم الحقيقي تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «إجراءات عملية: clickOutside وtooltip وautofocus»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- صيغة توجيه use:
- معلمات الإجراءات وتحديثاتها
- دالة التنظيف destroy()
- إجراءات عملية: clickOutside وtooltip وautofocus