يعد تصميم بعض العناصر القياسية مهمة غير بسيطة.بالطبع ، يمكن للأخصائي الجيد أن يصمم أي شيء ، لكن كل شيء يعتمد على مدى تعقيد هذا الإجراء.سيستغرق الأمر وقتًا طويلاً لتصفيف أزرار الراديو ومربعات الاختيار - فكرة تصميم ملصق بإدخال مخفي ليست جديدة ، وقد تم استخدامها منذ فترة طويلة في كل مكان.لتصفيف الباقي - هناك جافا سكريبت.اليوم أريد أن أخبركم عن كيفية سهولة نسق القوائم المنسدلة مع الحد الأدنى من كود JavaScript (من 0 إلى 26 سطرًا) والحد الأدنى من ترميز HTML الإضافي.
في ذلك اليوم ، كما يحدث غالبًا ، كنت بحاجة إلى تصميم قائمة منسدلة. ومع ذلك ، فقد أصبحت قائمة منسدلة فقط في إصدار الهاتف المحمول ، قبل أن تتصرف مثل المجموعة الأكثر شيوعًا من أزرار الراديو.وهكذا ، عندما كنت على وشك الانتهاء من كتابة بناء زاحف آخر مصمم ليحل محل سيليكت المؤسف ، كان لدي سؤال:لماذا؟عادة ما يؤدي هذا السؤال إلى التسويف الحكيم ، وإعادة التفكير في الحياة ، وما إلى ذلك ، ولكن هذه المرة حدث خطأ ، وأدركت أن السؤال كان جيدًا حقًا ، والأهم من ذلك - مفيد.
برنامج تعليمي صغير:لذلك ، بالنسبة لأولئك الموجودين في الخزان ، وكذلك أولئك الذين تسبب لهم القوائم المنسدلة الكثير من الألم لدرجة أنهم قرروا نسيانها ككابوس ، سأذكرك قليلاً (حقًا) بما هو عليه. تتكونالقوائم المنسدلة من عنصرين رئيسيين :- حدد - الحاوية للقائمة بالكامل
- الخيار - عنصر القائمة
في بعض الأحيان يتم استخدام OptGroup أيضًا (مجموعة من عناصر القائمة) ، ولكن يظل تنفيذها حتى الآن في JavaScript.تتمثل الوظيفة الرئيسية للقائمة المنسدلة في إرسال معلومات حول العنصر (العناصر) المحددة إلى الخادم.للاستكمال ، إليك قائمة بسمات العناصر (بحيث يمكنك تقدير عدد العناصر التي سيتم تنفيذها):- حدد - معطل ، نموذج ، متعدد ، اسم ، مطلوب ، حجم
- الخيار - تعطيل ، التسمية ، اختيار ، قيمة
في هذا ، ربما ، سننتهي بالوصف ، وننتقل إلى التنفيذ .
لقد تم بالفعل كتابة الكثير من الكلمات - أقرب إلى الرمز:<form>
<div class="content">
<h3 class="title"> 0 </h3>
<input id="selectName0" type="radio" value="0" name="selectName" />
<label for="selectName0"> 0 </label>
<input id="selectName1" type="radio" value="1" name="selectName" />
<label for="selectName1"> 1 </label>
<input id="selectName2" type="radio" value="2" name="selectName" />
<label for="selectName2"> 2 </label>
</div>
</form>
فما فائدة هذا الرمز؟ (تتم إزالة كل ما يمكن الاستغناء عنه عند التفسير بشكل خاص)دعونا نلاحظ العناصر التي أصبحت ممكنة تلقائيًا من وظيفة التحديد والخيار بسبب استخدام الإدخال + التسمية:- حدد - النموذج ، الاسم ، مطلوب
- الخيار - معطل ، تسمية ، محدد ، قيمة
وهذا كل ما تبقى ليتم تنفيذه:- حدد - معطل ، متعدد الحجم
- الخيار - نفذ بالكامل
فقط عن طريق إضافة حزم الإدخال + التسمية ، قمنا بتخفيض قائمة الوظائف الضرورية من 10 نقاط إلى 3. ليس سيئًا ، لكن هذه ليست النهاية ، أليس كذلك؟لتنفيذ العنصر Select.multiple (الاختيار من متعدد) - قم بما يلي:<form>
<div class="content">
<input id="selectName0" type="checkbox" value="0" name="selectName" />
<label for="selectName0"> 0 </label>
<input id="selectName1" type="checkbox" value="1" name="selectName" />
<label for="selectName1"> 1 </label>
<input id="selectName2" type="checkbox" value="2" name="selectName" />
<label for="selectName2"> 2 </label>
</div>
</form>
نحن فقط نغير نوع المدخلات من الراديو إلى خانة الاختيار ، ونحصل على تناظرية شبه كاملة متعددة .الفرق هو أنه بالنسبة للاختيار المتعدد ، لا تحتاج إلى الضغط باستمرار على ctrl (حسنًا ، إذا أراد أحد الأشخاص تقليد الوظيفة تمامًا - JavaScript للمساعدة).ما تبقى؟- حدد - معطل ، الحجم
- الخيار - نفذ بالكامل
حسنًا ، كل من Select.disabled و Select.size سهل التنفيذ باستخدام CSS:- Select.size - الحجم الذي تحدده ، سيكون هذا. تحتاج فقط إلى إضافة الحاوية.
- Select.disabled - بالنسبة للحاوية ، تحتاج إلى إضافة أحداث المؤشر: لا شيء لإلغاء رد الفعل على أي إجراءات للمستخدم (التمرير ، والنقرات ، وما إلى ذلك) ، حسنًا ، يمكنك جعلها شفافة قليلاً.
لذا ، فإن الوظيفة الرئيسية هي. ما المفقود؟تحتاج أيضًا إلى إضافة الإكمال التلقائي لرأس القائمة المنسدلة مع الاختيار الوحيد ، وستكون هناك أيضًا مشكلة عند إعادة تعيين النموذج (زر إعادة الضبط ) ، لأن لن يتم إعادة تعيين العنوان. ولكن حتى هذا قابل للحل تمامًا (باستخدام JavaScript).
والآن - أمثلة:القليل من التنفيذ (القائمة المنسدلة مع اختيار واحد):وأكثر من ذلك بقليل (ليست قائمة منسدلة بخيارات متعددة):المكافأة: لا أعرف لماذا فعلت ذلك ، ولكن ... قائمة منسدلة مع خيار واحد وإعادة تعيين رأس قائمة على CSS:
لماذا هذا مطلوب؟نظرًا لحقيقة أنه من خلال التعليقات ، لا يفهم الجميع سبب فائدة هذا الرمز ، أعتقد أنه من الضروري تقديم بعض التوضيح.عند تصميم القوائم المنسدلة للنموذج:<select>
<option> 1</option>
<option> 2</option>
</select>
هناك قيود خطيرة على التصميم. لذلك ، يتم استبدالها بقوائم بسيطة:<ul>
<li> 1</li>
<li> 2</li>
</ul>
يتم من خلالها تعليق جميع الوظائف الضرورية باستخدام JavaScript.نظرًا لأن القوائم في البداية لا تتفاعل مع النماذج بأي شكل من الأشكال ، فإن هذا يسبب مشاكل.ليس من الضروري فقط تنفيذ جميع الوظائف الأساسية:- تبديل النقاط وتفاعلها
- الحالة (محددة ، معطلة)
- ملزمة للنموذج وإرسال البيانات إلى الخادم
- تهيئة البيانات الأولية (الملء التلقائي)
- إعادة تعيين النموذج (عند النقر فوق الزر "إعادة تعيين" ، يجب إعادة القائمة إلى الحالة أثناء التهيئة)
في الواقع ، إذا انكسر شيء ما في جافا سكريبت ، فلا يهم ، لأنه لم يتم تحميل النص البرمجي ، ظهر خطأ ، أجرى تصحيحات - في حالة حدوث أي مشكلة ، تتحول القائمة المنسدلة إلى ... شيء يشبه قائمة منسدلة ، ولكنه لا يعمل.
عموما. لا يمكن.بالنسبة للمستخدم ، ستبدو كما يلي: هناك قائمة منسدلة ، ولكن لا يمكنك العمل معها.بالنسبة للخادم ، سيبدو هذا "أكثر متعة" - لقد وصل نموذج لا توجد فيه بيانات كافية. من الجيد أن مثل هذا الموقف كان متوقعًا مسبقًا أثناء التطوير ... بعد كل شيء ، كان متوقعًا ، أليس كذلك؟
إيجابيات الحل الناتج:- ( ), . JavaScript ( ). , — . , — / — html ( JS), .
- . , , ( ). ul — li , .
(. , , JavaScript' / ):- tab
- ( select -)
- ( , )
- select ( select . select)
- , (JS )
- ( OptGroup) (, )
كما ترى ، لا يوجد أي من العيوب المذكورة أعلاه أمر بالغ الأهمية للغالبية العظمى من القوائم ، وإذا لزم الأمر يتم تنفيذه باستخدام JavaScript ، وبالتالي ...
مرحبًا بك في العالم حيث ستصبح مكتباتك الخاصة بتصميم القوائم التي تشبه Select-Option أصغر قليلاً ، وسيكون العمل مع هذه القوائم بدون مكتبات مريحًا تقريبًا!
UPD: كما اتضح ، في حالة مربعات الاختيار ، لا تعمل السمة المطلوبة بشكل صحيح ، ويجب أيضًا محاكاتها باستخدام جافا سكريبت (في الوقت الحالي ، تصبح جميع مربعات الاختيار التي تم تحديدها على أنها مطلوبة إلزامية ، وهي فقط)