قد يكون كل شخص على دراية بنموذج القائمة المنسدلة المحددة ، ولكن نموذج القائمة المنسدلة الافتراضية غالبًا ما يجعل بعض المواقع الإلكترونية تشعر بقبيحة ، ومن الصعب ضبط نمط Select with CSS. لذلك ، تقوم العديد من المواقع الإلكترونية بتصنيع النماذج المنسدلة المحددة التي تتماشى أكثر مع نمط الموقع ، وغالبًا ما تستخدم JS لمحاكاة هذا التأثير.
على سبيل المثال ، تعد Tudou.com و Taobao Mall و Amazon جميعها نماذج قائمة منسدلة مصنوعة من JS.
من الواضح أن نتيجة ذلك موحدة بصريًا مع النمط العام لموقع الويب ، وأسلوب القائمة المنسدلة جميلًا جدًا ، ولكنه يجلب أيضًا بعض ردود الفعل السلبية. نظرًا لأنه يتم مع JS ، فإنه سيواجه العديد من الآثار غير المتوقعة. دعنا نحلل عيوبهم من خلال مواقع الويب الثلاثة للمختبر:
مربع اختيار فئة البحث للبطاطس يجعلني أشعر بالغرابة في كل مرة أنقر فيها:
1. بعد النقر ، تختلف قائمة المنبثقة عن ما تتوقعه. دون وعي ، كانت قائمة منسدلة ، لكن البطاطا أعطتني قائمة منتصف أسفل.
2. استخدم مفاتيح أعلى/لأسفل لاختيار عادة ، ولكن يتم تمرير الصفحة بأكملها.
3. في غضب ، لم أكن بحاجة إلى إغلاقه بعد الآن. اضغط على مفتاح ESC ، ولكن لا يوجد استجابة.
4. بعد تعطيل JS ، فإنه غير متوفر تمامًا.
وبالمثل ، يبدو Taobao Mall جميلًا أيضًا:
باستثناء النقطة 1 ، كل شيء آخر يشبه البطاطس ، مع مشكلات الوصول والتوافر.
الحل بسيط للغاية ، ما عليك سوى استخدام مربع اختيار أصلي ، مثل Amazon:
لماذا لا يتم تشجيعها على استخدام مربعات الاختيار المخصصة في صفحات الويب؟
مربع SELECT هو عنصر تحكم تفاعلي ناضج للغاية. النضج يعني أنه من السهل قبول المستخدمين ، لكن النضج يعني أيضًا أنهم مراعدون ولديهم تفاصيل تفاعلية غنية للغاية. على سبيل المثال: يمكن ضبط الاستجابة لعمليات لوحة المفاتيح مثل PGUP/PGDN ، المنزل/النهاية ، والاتجاه المنبثق للقائمة المنسدلة تلقائيًا في مواضع مختلفة ، إلخ.
يتطلب استخدام JS لمحاكاة مربعات الاختيار الكثير من العمل والاختبار الدقيق. حتى لو كانت الشركة على استعداد للاستثمار ، فإنها لا تزال غير قادرة على تنفيذ بعض ميزات الضوابط الأصلية. على سبيل المثال: في مربع اختيار Amazon أعلاه ، قمت بسحب المتصفح إلى مستوى منخفض للغاية ، ويمكن تمديد القائمة المنسدلة خارج المتصفح.
بالنسبة إلى القليل من الحلوى البصرية ، فقد استغرق الأمر الكثير من التفاصيل العملية لجعل التفاعل يخسر الكثير من الوقت ، واستغرق الأمر الكثير من الوقت لمبرمج الواجهة الأمامية ، لكنه كان بلا شكر ، وهو أمر سيء حقًا.
ملاحظة: لاستخدام مربع اختيار مخصص ، يجب استيفاء الشروط التالية:
1. بجنون مثل Google ، على استعداد لقضاء الكثير من الوقت والموارد.
2. بنفس الدقة مثل Google ، افعلها جيدًا ومحاكاةها جيدًا.
3. تطبيق على تطبيق الويب.
لسوء الحظ ، في البلاد ، لم تظهر الشركات المجنونة ودقيقة مثل Google أو Facebook بعد.