في 24 ديسمبر 2017، تم تعزيز معيار HTML5.2، مما يعني أيضًا أن المحطة المتنقلة دخلت مرحلة التخطيط لـ HTML5.3. على الرغم من تعزيز HTML5.2، إلا أن بعض المواصفات الداخلية الجديدة لم يتم دعمها بعد من قبل متصفحات الهاتف المحمول للتحسين، نلقي هنا نظرة على علامة شائعة الاستخدام تم دمجها حديثًا في المعيار، وهي علامة الحوار.
1. اكتب في المقدمةعند الحديث عن علامة الحوار، قد لا يكون الكثير من الأشخاص على دراية بها، ففي النهاية، كانت هذه العلامة مدعومة فقط بواسطة متصفح Chrome حتى تم إصلاح معيار HTML5.2. أما بالنسبة لاستخدام هذه العلامة، فيمكن فهمها بوضوح بناءً على ذلك الدلالات.
ما قد نفكر فيه هنا هو التنبيه والتأكيد والنوافذ المنبثقة الأخرى، نعم، إنها من نفس العائلة، وجميعها عبارة عن مربعات منبثقة. بعد ذلك، سنلقي نظرة سريعة على بعض الخصائص وسيناريوهات الاستخدام علامة الحوار.
2. استخدام التسمية<dialog open=> <h2>العنوان</h2> <p>المحتوى</p></dialog>
نظرًا لأنها علامة، فهي في الواقع نفس علامات div وp وغيرها شائعة الاستخدام، كما هو موضح في نموذج التعليمات البرمجية أعلاه، فهي تدعم أي عناصر أخرى داخليًا.
هنا، قد تلاحظ أن السمة المفتوحة في نموذج التعليمات البرمجية أعلاه، نعم، يتم استخدامها للتحكم في عرض وإخفاء هذه النافذة المنبثقة. بالطبع، يمكنك أيضًا استخدام CSS للتحكم فيها بشكل تعسفي، تمامًا مثل بعض قد تتسبب الوظائف المساعدة للجهاز (مثل الوصول الخالي من العوائق، وبرامج قراءة الشاشة، وما إلى ذلك) في حدوث خلل، لذا يوصى باستخدام وظائف العرض والإخفاء في المعيار.
3. الطرق الافتراضية المدعومةأولاً، علامة الحوار هي مثال لـ HTMLDialogElement وهي ترث من HTMLElement، لذلك فهي علامة من نفس مستوى علامة div، والفرق الوحيد هو أنها تحتوي على وظائف افتراضية أكثر من div دعونا نلقي نظرة على مربع حوار الأساليب الافتراضية الذي يمكننا استخدامه.
var Dialog = document.getElementById(dialog);// افترض أن هناك علامة حوار بالمعرف=dialog في الصفحة // إغلاق الحوارdialog. Close(); // عرض الحوار على شكل toastdialog.show(); / في نموذج العرض الحوارdialog.showModal();// قيمة المعلمة التي تم تمريرها عندما يُسمى الحوار. حالة عرض مربع الحوار الحوار.فتح؛
يمكنك الذهاب إلى المثال أولاً وتشغيله ثم الاطلاع على الميزات التي يحتوي عليها ثم العودة للمقارنة بالملخص التالي:
1: يمكن استدعاء طريقة الإغلاق عدة مرات، حتى في الحالة المخفية، ويمكن استدعاؤها مرة أخرى.
2: يمكن أن يمرر الإغلاق في متغير، والذي يجب أن يكون سلسلة ويتم التعبير عنه في returnVlaue.
3: يمكن أيضًا استدعاء طريقة العرض عدة مرات، حتى في الحالة المخفية، دون أي مشاكل.
4: لن تغير طريقة العرض موضع الخبز المحمص، وسيظل المربع المنبثق في موضعه الأصلي بعد استدعاء طريقة العرض.
5: طريقة العرض، يكون موضع العرض خلف العنصر السابق مباشرةً، في المنتصف، بدون طبقة قناع خلفه، يشبه وضع عرض z-index الوضع النسبي دون تعيين z-index (إذا لم يتم استدعاء showModal من قبل). )).
6: إذا تم استدعاء showModal، بعد طريقة العرض، فسيتم عرض العنصر في الموضع المعروض بواسطة showModal ولن يتغير (حتى لو تغير ارتفاع المحتوى كثيرًا).
7: إذا كان هناك عنصران من عناصر الحوار، فكلاهما يستدعي طريقة العرض في بنية html، فسيغطي مربع الحوار الأخير دائمًا العنصر السابق (بغض النظر عن مربع الحوار الذي يستدعي طريقة العرض أولاً).
8: ستكون هناك طبقة قناع خلف عرض showModal، ويكون مستوى العرض على مستوى عرض الويب في المتصفح سيكون الحوار في النهاية النقطة السابقة مناسبة بشكل خاص للمربعات المشروطة ولن يكون هناك بالتأكيد أي ارتباك هرمي بعد ظهور المربع المنبثق.
9: لا يمكن استدعاء showModal إلا مرة واحدة هنا، مما يعني أنه إذا كان مربع الحوار في حالة العرض، فسيتم الإبلاغ عن خطأ عند استدعاء showModal مرة أخرى، ولا يمكن تنفيذه مباشرة السمة المفتوحة موجودة، سيؤدي الاتصال بها مرة أخرى إلى الإبلاغ عن خطأ، لذا من الأفضل استخدام السمة المفتوحة الافتراضية لإظهار مربع الحوار وإخفائه.
10: إذا كان هناك عنصري حوار في الصفحة وكلاهما يستدعي الأسلوب showModal، بغض النظر عن بنيتهما في HTML، فإن مستوى مربع الحوار الذي تم استدعاؤه لاحقًا سيكون أعلى من مستوى مربع الحوار الذي تم استدعاؤه سابقًا.
11: قيمة الحوار.returnVlaue هي القيمة التي تم تمريرها عند استدعاء الحوار.إغلاق(سلسلة) وهي تدعم السلاسل فقط. القيمة التي تم تمريرها عند استدعاء الحوار.إغلاق تكون صالحة فقط عند عرض مربع الحوار.
12: إذا لم يتم تمرير أي قيمة في مكان قريب، فإن قيمة returnVlaue فارغة. إذا تم تمرير قيمة الحوار.إغلاق (1) مرة واحدة، بعد العرض التالي، يتم إغلاق الحوار.إغلاق()، ولا تزال قيمة returnVlaue تساوي 1. .
13: القيمة المرجعة للفتح هي: صحيح/خطأ.
4. الأحداث الافتراضية المدعومةميزة أخرى للحوار هي أنه بالإضافة إلى الأحداث الأساسية مثل النقر، فإنه يدعم حدثين خاصين إضافيين للحوار:
var Dialog = document.getElementById(dialog); // افترض أن هناك علامة حوار بالمعرف=dialog في الصفحة // عندما يتم استدعاء طريقة الإغلاق Dialog.onClose = function(){}; على جانب الكمبيوتر عند الضغط على المفتاح. ولكن بعد إصدار الكروم، يبدو أنه لم يعد يعمل. Diagram.oncancel = function(){};الآن دعونا نلقي نظرة على مثال: عرض مثال لحدث الحوار.
هناك أيضًا عدة أسئلة، دعنا نذكرها هنا:
1: لا يمكن تشغيل حدث عند الإغلاق إلا عن طريق استدعاء حوار.إغلاق() لإخفاء مربع الحوار.
2: بعد تشغيل حدث الإلغاء، سيستمر بالتأكيد تشغيل حدث الإغلاق بعد إصدار chrome64، لا يتم تشغيل الإلغاء بواسطة مفتاح esc.
3: إذا كان هناك عدة أزرار لإغلاق مربع الحوار، فقم بتمرير قيمة مختلفة في كل مرة يتم فيها استدعاء حدث الإغلاق، استخدم قيمة returnVlaue لتحديد الزر الذي سيتم استخدامه لتشغيل حدث الإغلاق.
5. آخرونلقد تم شرح بعض أداءات مربع الحوار مسبقًا، وقد تكون غير كاملة أو غير دقيقة، أو قد تظهر ميزات أحدث مع مرور الوقت.
عند النظر إلى الأمثلة السابقة، رأينا أيضًا بعض أوجه القصور، مثل: النمط قبيح بشكل خاص، وفيما يتعلق بهذا، يمكننا استخدام CSS بالكامل لإعادة ضبط النمط دون التأثير على الدلالات أو أي شيء آخر .
أريد فقط أن أتحدث عن أداء الحوار هنا، لذلك لن أفعل ذلك.
6. ملخصبعد كل شيء، يعد الحوار علامة دلالية لمربعات الحوار المنبثقة، وله بعض المزايا الفريدة (مثل ارتفاع مستوى عرض الويب). على الرغم من أنه مدعوم فقط بواسطة Chrome الآن، إلا أنه لا يزال واعدًا جدًا للاستخدام في المستقبل بل إنه متوافق الآن. الآن، في المتصفحات الأخرى، قم بتنفيذ مجموعة من آليات الحوار بنفسك (ربما توجد بالفعل خطة تنفيذ لذلك، لذا لن أبحث عنها هنا).
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.