متوافق تمامًا مع قائمة طي المخزن المؤقت الثانوية القابلة للتمييز

لقد كنت مشغولاً للغاية مؤخرًا ولم أهتم بمدونتي لعدة أشهر. سأقوم الآن بفرز مثال القائمة الذي تم إنشاؤه مؤخرًا في المشروع ومشاركته.

غالبًا ما يكون التخطيط الأكثر استخدامًا في الواجهة الخلفية أو نظام الوصول المفتوح هو تخطيط ملء الشاشة، وهو بشكل عام تخطيط يحتوي على ثلاثة صفوف وعمودين في الأعلى والوسط والأسفل، مع رأس وتذييل وقائمة يسرى وإطار ifame الصفحة على اليمين. ولذلك، غالبًا ما يتم استخدام القائمة الثانوية القابلة للطي. هذا المثال هو لتنفيذ قائمة قابلة للطي ثانوية أكثر توافقًا وقابلة للتمييز.

سمات :

1. متوافق تمامًا، تم اختبار المتصفح: IE5.5، IE6، IE7، IE8، FF3.0، Google، Safari 4.0، Opera9.0.
2. هيكل HTML أنيق وموجز، بدون علامات زائدة عن الحاجة، مما يساعد على إخراج حلقة البرنامج.
3. يتم فصل النمط والبنية، ويمكنك تعديل أنماط مختلفة في ورقة الأنماط.
4. يمكن تمييز العنصر المحدد حاليًا على كل من قائمة المستوى الأول وقائمة المستوى الثاني.
5. رسوم متحركة عازلة أنيقة للطبقات القابلة للطي.
6. الأكثر ملاءمة للواجهة الخلفية وبعض واجهات نظام الوصول الحر.

القصور :

1. ميزة مكافحة التحديث غير مدعومة، ولا ينبغي أن تكون هذه الوظيفة ذات فائدة كبيرة في نظام التطبيقات الخلفية، لذا لم تتم إضافة هذه الوظيفة.
2. لا يظهر تأثير التخزين المؤقت في IE6، سيتم إضعاف التأثير.

3. دعونا نتحدث بإيجاز عن بعض الأفكار البسيطة والمشكلات التي واجهتنا عند إنشاء مثل هذه القائمة.

   بشكل عام، عند إنشاء تأثير، تتمثل عملية الإنتاج الخاصة بي أولاً في رسم محتوى طبقة هيكل HTML، ثم كتابة النمط، ثم إضافة بعض الزينة على تأثيرات الكعكة، مثل تأثيرات JS الخاصة وما إلى ذلك. لا أعرف ما هو نموذج العملية الذي يمتلكه الخبراء.

   الطبقة الهيكلية :

   تعتمد فكرة الطبقة الهيكلية عمومًا على الفهم الإدراكي، عادةً مع العرض، وبناءً على هذا العرض يتم إنشاء بنية HTML الأكثر إيجازًا. كما هو موضح في الصورة أعلاه، الانطباع الأول الذي يظهر هو استخدام قائمة غير مرتبة من UL، ولكن... هذه قائمة متداخلة ذات مستويين. هذه هي المشكلة الأولى التي نحتاج إلى أخذها في الاعتبار.

   لذلك يجب أن يبدو الهيكل كما يلي:

   عندما تكون هناك قائمة المستوى الثاني، فهي بنية UL متداخلة. عندما لا تكون هناك قائمة المستوى الثاني، فهي كما يلي:

   <ul class="menu">
   <li><a href="#none">عناصر قائمة المستوى الأول</a></li>
   </ul>

   بالطبع، يمكنك أيضًا استخدام طريقة القائمة المرتبة dl-dt-dd لإنشاء هذه البنية المتداخلة، اعتمادًا على موقفك الفعلي.

   مع الطبقة الهيكلية الأكثر أصالة، تحتاج إلى إضافة بعض الخطافات الضرورية لـ CSS وJS للتحكم في الأنماط والتأثيرات. لقد عارضت دائمًا طريقة إضافة الكثير من أسماء الفئات، والتي ستزيد حجم الصفحة، وبالتالي أكثر الأسلوب المبسط هو تطبيق واحد أو اثنين من أسماء الفئات الضرورية على الحاوية الأصلية، ثم استخدام محدد الطفل (المجموعة) لتعيين إعدادات مخصصة متنوعة في ورقة الأنماط. في البنية المذكورة أعلاه، كم عدد أسماء الفئات التي قد تفكر في استخدامها لتحديد جميع الأنماط؟

   أسلوبي هو استخدام ثلاثة أسماء فئات فقط للتحكم في جميع عروض الأنماط. أحدهما هو UL ذو المستوى الأعلى، والذي تم تعريفه على أنه class = "menu"، والآخر هو حاوية قائمة المستوى الثاني، أي أن UL المتداخل يحدد فئة = "level2"، وأخيرًا عنصر قائمة المستوى الأول يحدد li فئة = "level1" ، باستخدام هذه الخطافات الثلاثة، يمكنك التعامل مع نمط البنية بأكملها.

   طبقة العرض :

   يعد إعداد ورقة الأنماط أمرًا بسيطًا للغاية، والشيء الوحيد الذي يجب ملاحظته هو أنه من أجل تسهيل JS للتحكم في عرض القائمة الثانوية وإخفائها وتسجيل حالة التمييز للعنصر المحدد حاليًا، لا أستخدم التمرير الزائف. -class لتحقيق تأثير الانزلاق للداخل والانزلاق للخارج واستخدام JS لمحاكاته. الرموز الأساسية للتحكم في الأنماط باستخدام JS هي كما يلي:

   نمط القائمة المستوى الأول

   /*نمط قائمة المستوى الأول ثلاثي الحالات، للاتصال بـJS*/
   .menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; ) عدم تكرار الجزء العلوي الأيسر؛}
   .menu li.level1 a.hove{background-position:left -31px;}
   .menu li.level1 a.cur{background-position:left -62px;}

   نمط القائمة الثانوية

   /*نمط القائمة الثانوية ثلاثي الحالات للاتصال بـJS*/
   .menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; ) عدم تكرار الجزء العلوي الأيسر؛}
   .menu li.level1 a.hove{background-position:left -31px;}
   .menu li.level1 a.cur{background-position:left -62px;}

   الطبقة السلوكية :

   كما ذكرنا سابقًا، لم نحدد تأثير الحالات الثلاث للقائمة في ورقة الأنماط، لذلك نحتاج إلى ربط أحداث onmouseover وonmouseout وonclick بكل عنصر قائمة لمحاكاة هذا التأثير. في طبقة البنية، لم نحدد معرف هذه الحاوية الإجمالية، لكننا حددنا اسم فئة فقط، لذلك أضفنا طريقة getElementsByClassName() موسعة في JS (بفضل صديقي Situ Zhengmei) للحصول على هذا الكائن بناءً على الفئة اسم. استخدم حلقات الإغلاق لربط هذه الأحداث الثلاثة.

   لن أشرح الكود التفصيلي واحدًا تلو الآخر، التعليقات الموجودة في العرض التوضيحي واضحة جدًا، يرجى تنزيله على جهاز الكمبيوتر المحلي لديك لتصفحه.

   إذا كان لديك أي أسئلة، يرجى النشر والمناقشة في هذه المدونة وأتمنى لك استخدامًا سعيدًا!

   <li><a href="#none">عناصر قائمة المستوى الأول</a>
   <ul>
   <li><a href="#none">عناصر قائمة المستوى الثاني</a></li>
   </ul>
   </لي>