أنماط عملية: التلميحات وتتبع الحالة
تطبيق data-* على التلميحات وحالات النشاط وتهيئة المكونات
أنماط عملية: التلميحات وتتبع الحالة درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
تلميح باستخدام data-tooltip
خزّن نص التلميح في data-tooltip على العنصر المُشغّل. يعرض CSS التلميح باستخدام [data-tooltip]:hover::after { content: attr(data-tooltip) } من دون JavaScript. ولإنشاء تلميحات متاحة، أضف role="tooltip" وaria-describedby يشير إلى عنصر حقيقي.
تحديد موضع تلميحات CSS
يحتاج العنصر المُشغّل إلى position: relative. ويستخدم العنصر الزائف ::after position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) لتوسيط التلميح فوق العنصر المُشغّل. أضف white-space: nowrap لمنع التفاف النص.
تتبع الحالة باستخدام data-state
استبدل عدة أصناف منطقية (is-open, is-loading, is-error) بسمة data-state واحدة: el.dataset.state = "loading". يحدد CSS العناصر باستخدام [data-state="loading"] — سمة واحدة وقاعدة CSS واحدة لكل حالة، من دون إدارة للأصناف.
الأكورديون باستخدام data-expanded
يملك كل عنصر في الأكورديون data-expanded="false". ويبدّله JavaScript: item.dataset.expanded = item.dataset.expanded === "true" ? "false" : "true". ويعرض CSS اللوحة أو يخفيها: [data-expanded="false"] .panel { display: none; }.
حالة علامة التبويب النشطة
تخزّن حاوية علامات التبويب علامة التبويب النشطة: data-active-tab="0". ويحدّث JavaScript هذه القيمة عند النقر. ويمكن لـ CSS تحديد اللوحة النشطة باستخدام [data-active-tab="0"] #panel-0. وتوجد حالة علامات التبويب بأكملها في سمة واحدة على عنصر الحاوية.
تتبع خطوة النموذج
تخزّن النماذج متعددة الخطوات الخطوة الحالية في data-step على عنصر النموذج. ويعرض CSS الخطوة المطابقة فقط: form[data-step="2"] .step-2 { display: block; }. وتظل الخطوات الأخرى مخفية من دون تبديل أصناف لكل خطوة.
نمط حالة التحميل
بالنسبة إلى الأزرار أثناء الإجراءات غير المتزامنة: يعطّل btn.dataset.state = "loading" التفاعل ويعرض مؤشر تحميل عبر CSS. وعند الاكتمال، عيّن btn.dataset.state = "idle". تستبدل سمة واحدة ثلاثة تبديلات منفصلة للأصناف وفحصًا لسمة disabled.
نمط مقبض السحب
ميّز العناصر القابلة للسحب باستخدام data-draggable="true" وأهداف الإسقاط باستخدام data-droptarget="true". وتستخدم مستمعات الأحداث محددات السمات للعثور على جميع العناصر القابلة للسحب: document.querySelectorAll("[data-draggable]"). ويكون وجود السمة أكثر دلالة من أسماء الأصناف للتعبير عن الغرض السلوكي.
مؤشر التقدم
يستخدم مكوّن الخطوات data-step-status في كل خطوة، بقيم: «completed» و«current» و«upcoming». وينسّق CSS كل حالة بطريقة مميّزة. ويعيّن JavaScript حالة كل خطوة استنادًا إلى الموضع الحالي — حالة واضحة من دون كائن حالة في JavaScript يحتاج إلى محاكاة.
استمرارية السمة
خزّن تفضيل السمة للمستخدم في localStorage وطبّقه عند التحميل: document.documentElement.dataset.theme = localStorage.getItem("theme") || "light". ويحدد CSS الوضع الداكن باستخدام [data-theme="dark"] — بشكل مستمر ومن دون وميض المحتوى غير المنسّق عندما يُشغّل النص البرمجي داخل <head>.
البيانات الوصفية للمحتوى الديناميكي
تضمّن القوائم المُصيّرة على الخادم البيانات الوصفية في سمات البيانات: data-product-id وdata-price وdata-category. ويقرأ JavaScript هذه البيانات من دون استدعاءات API إضافية للتصفية أو الفرز من جهة العميل أو لتنفيذ وظائف سلة التسوق، باستخدام البيانات المُصيّرة مسبقًا.
اختبار المعرفة
ما ميزة استخدام data-state="loading" مقارنةً بإضافة فئة CSS أو إزالتها؟
الملخص
تتيح سمات data-* أنماطًا عملية قوية: تلميحات CSS باستخدام content:attr()، وآلات حالات باستخدام data-state بدلًا من تبديل عدة فئات، وتتبع النماذج متعددة الخطوات، والاحتفاظ بالنسق باستخدام documentElement.dataset، والبيانات الوصفية المُنشأة على الخادم لتوفير وظائف من جهة العميل — وكل ذلك من دون مزامنة حالة JavaScript.
الأسئلة الشائعة
هل درس «أنماط عملية: التلميحات وتتبع الحالة» مجاني؟
نعم — نص درس «أنماط عملية: التلميحات وتتبع الحالة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «أنماط عملية: التلميحات وتتبع الحالة»؟
تطبيق data-* على التلميحات وحالات النشاط وتهيئة المكونات تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «أنماط عملية: التلميحات وتتبع الحالة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- صياغة data-* واصطلاحات التسمية
- الوصول إلى data-* باستخدام dataset في JavaScript
- استخدام data-* مع محددات السمات في CSS
- أنماط عملية: التلميحات وتتبع الحالة