ديناميكي HTML (DHTML) يسمح لك بإنشاء تجربة نمط التطبيق على مواقع الويب الخاصة بك ، مما يقلل من تكرار تحميل الصفحات بالكامل. في التطبيقات ، عند النقر فوق شيء ما ، يتغير التطبيق على الفور لإظهار هذا المحتوى المحدد أو لتزويدك بإجابتك.
في المقابل ، يجب إعادة تحميل صفحات الويب ، أو يجب تحميل صفحة جديدة تمامًا. هذا يمكن أن يجعل تجربة المستخدم أكثر تفككًا. يتعين على عملائك الانتظار حتى يتم تحميل الصفحة الأولى ثم الانتظار مرة أخرى حتى يتم تحميل الصفحة الثانية ، وهكذا.
تستخدم لتحسين تجربة العارض
باستخدام DHTML ، يعد امتلاك أحد أسهل الطرق لتحسين هذه التجربة شعبة تبديل العناصر وإيقاف تشغيلها لعرض المحتوى عند طلبه. أ عنصر div يحدد التقسيمات المنطقية على صفحة الويب الخاصة بك. فكر في div كمربع قد يحتوي على فقرات وعناوين وروابط وصور وحتى عناصر div أخرى.
ماذا ستحتاج
لإنشاء عنصر div يمكن تشغيله وإيقاف تشغيله ، تحتاج إلى ما يلي:
- رابط للتحكم في div عن طريق تشغيله وإيقاف تشغيله عند النقر عليه.
- عنصر div المراد إظهاره وإخفائه.
- CSS لتحديد نمط div المخفي أو المرئي.
- جافا سكريبت لأداء الإجراء.
رابط التحكم
رابط التحكم هو أسهل جزء. ببساطة قم بإنشاء ارتباط كما تفعل مع صفحة أخرى. في الوقت الحالي ، اترك ملف سمة href فارغ.
تعلم HTML
ضع هذا في أي مكان على صفحة الويب الخاصة بك.
Div لإظهار وإخفاء
قم بإنشاء عنصر div الذي تريد إظهاره وإخفائه. تأكد من أن div الخاص بك يحتوي على معرف فريد عليه. في المثال ، المعرف الفريد هو تعلم HTML.
هذا هو عمود المحتوى. يبدأ فارغًا باستثناء نص التفسير هذا. اختر ما تريد معرفته في عمود التنقل على اليسار. سيظهر النص أدناه:
تعلم HTML
- فئة HTML مجانية
- دروس HTML
- ما هو XHTML؟
CSS لإظهار وإخفاء Div
أنشئ صنفين لـ CSS: أحدهما لإخفاء div والآخر لإظهاره. لديك خياران لهذا: العرض والرؤية.
تزيل شاشة العرض div من تدفق الصفحة ، وتغير الرؤية فقط كيفية رؤيتها. يفضل بعض المبرمجين عرض، لكن بعض الأحيان الرؤية من المنطقي أيضًا. على سبيل المثال:
.hidden {display: none؛ }
.unhidden {display: block؛ }
إذا كنت تريد استخدام الرؤية ، فقم بتغيير هذه الفئات إلى:
.hidden {visibility: hidden؛ }
.unhidden {visibility: مرئي ؛ }
أضف الفئة المخفية إلى div الخاص بك بحيث يبدأ كمخفي في الصفحة:
جافا سكريبت لجعلها تعمل
كل ما يفعله هذا البرنامج النصي هو إلقاء نظرة على الفئة الحالية التي تم تعيينها على div الخاص بك وتبديله لإلغاء الإخفاء إذا تم تمييزه على أنه مخفي أو العكس.
هذه ليست سوى بضعة أسطر من JavaScript. ضع ما يلي في رأس الخاص بك مستند HTML (قبل.
ما يفعله هذا البرنامج النصي ، سطرًا بسطر:
يستدعي الوظيفة إظهار، و divID هو المعرف الفريد الدقيق الذي تريد إظهاره أو إخفاءه.
يقوم بإعداد متغير iتيم بقيمة div.
يقوم بإجراء فحص بسيط للمتصفح ؛ إذا كان المتصفح لا يدعم getElementById، لن يعمل هذا البرنامج النصي.
يتحقق من الفصل على div. إذا كان كذلك مختفي، فإنه يغيره إلى غير مخفي. خلاف ذلك ، فإنه يغيره إلى مختفي.
يغلق إذا بيان.
يغلق الوظيفة.
لجعل النص يعمل ، عليك القيام بشيء آخر. ارجع إلى الرابط الخاص بك وأضف جافا سكريبت إلى سمة href. تأكد من استخدام المعرف الفريد الدقيق الذي قمت بتسميته div الخاص بك في href هذا:
تعلم HTML
تهانينا! لديك الآن div سيظهر ويختفي عندما تنقر على رابط.
المشاكل المحتملة التي يجب الانتباه إليها
هذا البرنامج النصي ليس خداعًا. هناك بعض المواقف التي قد تسبب لك مشاكل:
لم يتم تشغيل JavaScript. إذا لم يكن لدى القراء جافا سكريبت أو تم إيقاف تشغيله ، فلن يعمل هذا البرنامج النصي. تظل divs المخفية مخفية بغض النظر عما يفعله القراء. تتمثل إحدى طرق إصلاح ذلك في وضع divs المخفية في منطقة noscript ، ولكن سيتعين عليك التلاعب بهذا الأمر حتى يتم عرضها بشكل صحيح.
الكثير من المحتوى. يمكن أن تكون هذه أداة رائعة للسماح للقراء بمشاهدة المحتوى الذي يحتاجون إليه فقط ، ولكن إذا وضعت الكثير داخل عناصر div المخفية ، فقد يؤثر ذلك بشكل كبير على كيفية تحميل الصفحة. تذكر أنه على الرغم من عدم عرض المحتوى ، لا يزال متصفح الويب يقوم بتنزيله ، لذا استخدم الحس السليم في تحديد مقدار المحتوى الذي تخفيه.
العملاء لا يفهمون. أخيرًا ، قد لا يكون العملاء معتادين على النقر فوق ارتباط يعرض المحتوى أو يخفيه. العب مع الرموز (تعمل علامات الجمع والسهام بشكل جيد) أو نص لشرح ما سيحدث لعملائك. الحل الآخر هو ترك أحد divs مفتوحًا بينما يتم إغلاق الأقسام الأخرى. يمكن أن ينقل هذا الفكرة إلى عملائك ، حتى يتمكنوا من معرفة كيفية فتح المحتوى المتبقي بسرعة أكبر.
يجب عليك دائمًا اختبار Dynamic HTML مثل هذا مع عملائك. بمجرد أن تشعر بالثقة في قدرتهم على فهمه واستخدامه ، يمكن أن تكون هذه طريقة رائعة للحصول على قدر كبير من المحتوى على صفحات الويب الخاصة بك دون شغل الكثير من المساحة المرئية.