الدرس 6 من 8

إشعارات عابرة

هدف الدرس

تظهر، وتُعلَن، ثم تختفي

01

الشرح

الإشعار العابر رسالة قصيرة تؤكّد ما حدث — «تم الحفظ» — ثم تختفي وحدها. ومن لا يرى الشاشة لا يعرف بها ما لم تُعلَن.

الإعلان يأتي من منطقة حيّة: حاوية عليها role="status"، وكل نصّ يُضاف داخلها يقرؤه قارئ الشاشة بهدوء حين يفرغ ممّا يقرؤه. أما role="alert" فيقاطعه فورًا — احفظه للأخطاء.

الفخّ: إنشاء المنطقة مع الرسالة. قارئ الشاشة يراقب المناطق الموجودة سلفًا، فالمنطقة التي تولد ونصّها فيها لا تُعلَن غالبًا. ضعها في الصفحة فارغة من البداية، وأضف الرسائل داخلها.

02

المطلوب

اجعل #toasts منطقة role="status"، واكتب toast(message) تضيف داخلها عنصرًا بالصنف toast فيه نصّ الرسالة، وتحذفه بعد 400 جزء من الثانية — مهلة قصيرة ليسهل التصحيح، وفي الواقع أربع ثوانٍ فأكثر. ثم اربط #save بـ toast('تم الحفظ').

معايير التصحيح

6 معايير
  1. المنطقة الحيّة في الصفحة من البداية
  2. toast تضيف رسالة بنصّها داخل المنطقة
  3. تبقى وقتًا يكفي لقراءتها
  4. وتختفي وحدها بعد المهلة
  5. لكل رسالة مؤقّتها
  6. زرّ الحفظ يطلق إشعارًا
03

تلميحات

0/3
منهج المقرّرأنجزت 0 من 8

مكوّنات تبنيها من الصفر وتجدها في كل واجهة: ألسنة ونوافذ وجداول وإشعارات وعارض شرائح.

متقدّم · 8 دروس · ساعتان

index.html
المعاينة
index.html100%
–/6

اضغط «تشغيل» ليبدأ الفحص.

6 معايير في بطاقة «المطلوب».

منهج المقرّرأنجزت 0 من 8

مكوّنات تبنيها من الصفر وتجدها في كل واجهة: ألسنة ونوافذ وجداول وإشعارات وعارض شرائح.

متقدّم · 8 دروس · ساعتان