في هذا الدرس 7تصفّح المواضيع
تاريخياً، تطلب إنشاء المكونات التفاعلية الشائعة مثل القوائم المطوية والنوافذ المنبثقة والتلميحات الاعتماد على مكتبات برمجية خارجية ضخمة. قدمت معايير HTML الحديثة حلولاً أصيلة مدمجة مباشرة في محرك المتصفح، مما وفر مكونات تفاعلية خفيفة الوزن وميسرة بطبيعتها.
تشمل العناصر التفاعلية الأصيلة وسم القوائم المطوية
<details> المقترن بوسم الملخص <summary>، وحاوية النوافذ الحوارية <dialog>، والخاصية الشاملة popover. يساهم استخدام هذه العناصر الأصيلة في تقليص أحجام الملفات البرمجية وضمان تناغم تام مع لوحة المفاتيح.ينشئ عنصر
<details> أداة إفصاح تفاعلية يمكن للمستخدمين فتحها وإغلاقها بسهولة. يجب أن يكون الابن المباشر الأول داخل هذا العنصر هو وسم الملخص <summary> الذي يعمل كعنوان بارز قابل للنقر للتحكم في ظهور أو إخفاء باقي المحتوى.
HTML
<!-- Native collapsible FAQ section -->
<details>
<summary>What is HTML5 Living Standard?</summary>
<p>Maintained specification for modern HTML.</p>
</details>
يعرض المتصفح افتراضياً مؤشراً سهمياً صغيراً بجوار نص الملخص للإشارة لحالة الطي. يمكن تنسيق هذا السهم وتغيير مظهره بسهولة عبر محدد CSS الخاص بالعلامات
::marker، كما يتيح محدد الخاصية details[open] تطبيق تأثيرات حركية أنيقة عند فتح القائمة.يظهر عنصر
<details> في حالته الافتراضية مطوياً ومغلقاً. ولعرض المحتوى الداخلي مفتوحاً وموسعاً منذ اللحظة الأولى لتحميل الصفحة، يضيف المطورون الخاصية المنطقية open مباشرة إلى وسم البداية.
HTML
<!-- Initially expanded details widget -->
<details open>
<summary>System Requirements</summary>
<p>Requires an HTML5-compliant web browser.</p>
</details>في معايير HTML الحديثة، يؤدي إسناد خاصية اسم
name مشتركة لعدة عناصر تفاعلية إلى تحويلها إلى مجموعة أكورديون حصرية؛ حيث يؤدي فتح أي قسم تلقائياً إلى إغلاق كافة الأقسام المجاورة الأخرى المشتركة في نفس الاسم دون الحاجة لأي كود برمجي إضافي.يمثل عنصر
<dialog> الحاوية القياسية الأصيلة لإنشاء النوافذ الحوارية المشروطة وصناديق التأكيد. عند تشغيل هذا العنصر كنافذة مشروطة، يرتفع مباشرة إلى الطبقة العليا في محرك المتصفح متجاوزاً أي قيود ترتيب طبقي سابقة في الصفحة.
HTML
<!-- Native dialog container -->
<dialog open id="cookie-dialog">
<h2>Privacy Preferences</h2>
<p>Customize your cookie settings anytime.</p>
<button type="button">Confirm</button>
</dialog>
يؤدي استدعاء النافذة الحوارية عبر طريقة
dialog.showModal البرمجية إلى تفعيل طبقة تعتيم شاملة للصفحة يمكن تنسيقها عبر ::backdrop، مع حصر التركيز تلقائياً داخل النافذة وتوفير إمكانية الإغلاق السريع بالنقر على زر الهروب في لوحة المفاتيح.لفتح النافذة الحوارية وإغلاقها تصريحياً دون الحاجة لكتابة دوال برمجية مخصصة، تربط HTML حاوية
<dialog popover> بأزرار التحكم عبر خاصيتي popovertarget وpopovertargetaction؛ حيث تحدد القيمتان show وhide أمر الفتح أو الإغلاق مباشرة.
HTML
<!-- Declarative dialog open and hide actions -->
<button type="button" popovertarget="delete-prompt">
Delete File
</button>
<dialog id="delete-prompt" popover>
<p>Confirm permanent deletion?</p>
<button type="button" popovertarget="delete-prompt"
popovertargetaction="hide">Cancel</button>
</dialog>تقبل خاصية
popovertargetaction ثلاث قيم قياسية واضحة: القيمة الافتراضية toggle للتبديل بين الفتح والإغلاق، والقيمة show للفتح الحصري، والقيمة hide لإغلاق النافذة بسلاسة من داخلها.توفر خاصية القوائم المنبثقة الحديثة
popover معياراً تصريحياً في HTML لبناء القوائم المنبثقة وأشرطة الإجراءات والتلميحات التوضيحية. يرتفع أي عنصر مزود بهذه الخاصية للطبقة العليا دون تجميد باقي الصفحة.
HTML
<!-- Declarative popover without JavaScript -->
<button type="button" popovertarget="info-popover">
Account Help
</button>
<p id="info-popover" popover>
Signed in as <strong>Engineer</strong> —
<a href="/profile">Profile Settings</a>
</p>يوضح جدول المقارنة التالي الخصائص المعمارية والفروق التشغيلية بين العناصر التفاعلية الأصيلة الثلاثة في لغة HTML:
| العنصر التفاعلي | طبقة العرض بالمتصفح | طريقة الإغلاق والتراجع | الاستخدام النموذجي |
|---|---|---|---|
<details> |
انسياب الصفحة العادي | النقر على عنوان الملخص للتبديل | قوائم الأكورديون والأسئلة الشائعة والوثائق |
<dialog> |
الطبقة العليا مع خلفية تعتيم | زر الإغلاق المخصص أو زر الهروب | نوافذ التأكيد الحيوية وصناديق الإعدادات |
popover |
الطبقة العليا بدون تجميد الصفحة | إغلاق خفيف بالنقر خارج المساحة | التلميحات والقوائم المنسدلة والإجراءات السريعة |
يتيح لك مختبر الفحص التفاعلي التالي تجربة القوائم المطوية والنوافذ الحوارية والقوائم المنبثقة عملياً وبأبعاد متجاوبة:
تمثل الإتاحة الرقمية ركيزة جودة أساسية لكافة الواجهات التفاعلية. يجب أن تضمن النوافذ الحوارية المشروطة منع فخاخ لوحة المفاتيح، وتمكين مستخدمي زر التنقل من تصفح العناصر التفاعلية بسلاسة والخروج بسهولة عبر زر الهروب في أي وقت.
عند إغلاق النافذة الحوارية، يجب إعادة تركيز لوحة المفاتيح تلقائياً إلى الزر الأساسي الذي قام بتشغيل النافذة في البداية؛ مما يحافظ على استقرار موضع التصفح الذهني للمستخدم ويمنع ارتداد مؤشر التركيز إلى بداية الصفحة بشكل مفاجئ.
HTML
<!-- Accessible dialog with clear heading and trigger -->
<button type="button" popovertarget="alert-modal">
View Order Status
</button>
<dialog id="alert-modal" popover>
<h2>Order Submitted</h2>
<p>Your order was processed successfully.</p>
<button type="button" popovertarget="alert-modal"
popovertargetaction="hide">Return to Store</button>
</dialog>
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس العناصر التفاعلية الأصيلة في HTML: وسوم القوائم المطوية details وsummary، وحالة الانفتاح open، والنوافذ الحوارية dialog في الطبقة العليا، وأوامر التحكم التصريحية بالحوار، وميزة القوائم المنبثقة popover، وإتاحة لوحة المفاتيح. الخطوة التالية تأخذنا إلى عالم بناء نماذج الإدخال في مسار نماذج HTML.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 5 مفهومةأول بطاقة، أول خطوة
- 01 Disclosure Widget أداة الإفصاح والطي
- مكون تفاعلي details وsummary يتيح للمستخدمين إظهار أو إخفاء المحتوى الإضافي عند الطلب.
- للمراجعة
- 02 Top Layer الطبقة العليا
- طبقة عرض مستقلة في المتصفح تظهر فوق كافة عناصر المستند متجاوزة قيود الترتيب الطبقي.
- للمراجعة
- 03 Modal Dialog نافذة حوارية مشروطة
- نافذة مؤقتة تتطلب تفاعل المستخدم قبل السماح بمواصلة التصفح في الصفحة الخلفية.
- للمراجعة
- 04 Light Dismiss الإغلاق الخفيف
- سلوك تلقائي بالمتصفح يغلق القائمة المنبثقة بمجرد النقر خارج حدودها أو الضغط على زر الهروب.
- للمراجعة
- 05 Focus Trap حصر التركيز
- آلية إتاحة تحصر تنقل مؤشر لوحة المفاتيح داخل النافذة النشطة حتى يتم إغلاقها بأمان.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 3 مفهومةأول بطاقة، أول خطوة
- 01 WAI WAI
- Web Accessibility Initiative
- مبادرة عالمية تابعة لمنظمة W3C تهدف لتطوير إرشادات تجعل الويب ميسراً للأشخاص ذوي الإعاقة.
- للمراجعة
- 02 DOM DOM
- Document Object Model
- شجرة العناصر البرمجية القياسية التي تمثل عناصر HTML وحالاتها التفاعلية الحية.
- للمراجعة
- 03 UI UI
- User Interface
- نقاط التفاعل البصرية والوظيفية التي يتعامل من خلالها المستخدم مع تطبيقات ومواقع الويب.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
أنشئ قسماً للأسئلة الشائعة باستخدام وسوم details وsummary مع وضع خاصية open على البند الأول.
-
اربط عدة أقسام details بخاصية name موحدة لتحقيق سلوك الأكورديون التنافسي الأصيل دون جافاسكريبت.
-
اكتب نافذة حوارية بخاصية popover مرتبطة بأزرار تحكم عبر popovertarget وpopovertargetaction="hide" لفتحها وإغلاقها تصريحياً.
-
قم بتهيئة زر بخاصية popovertarget يرتبط بحاوية popover لتقديم قائمة منبثقة بالإغلاق الخفيف.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
3أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.