التصميم التفاعلي

كيفية نمط ≪Select≫s باستخدام DropKick

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

في هذه المقالة سنستخدم DropKick لإنشاء قائمة منسدلة. ما يفعله Dropkick هو تحويل

أول شيء يتعين علينا القيام به هو إعداد

استدعاء DropKick

بمجرد إعداد لدينا في شيء يمكننا أن نكون واثقين من التصميم باستخدام CSS. علاوة على ذلك ، تم إدراج قيمنا في سمات بيانات HTML5 الجديدة (مع اسم البيانات- dk- القائمة المنسدلة-القيمة).

يمكننا الآن تصميم نمط القائمة المنسدلة باستخدام CSS ، أو استخدام أحد موضوعات DropKick إذا كنا نفضل ذلك ؛ في وقت كتابة هذا المقال ، هناك ثلاثة موضوعات متاحة ، وهي المظهر الافتراضي ، واللمعان الغامق واللمعان اللامع. ولكن معظم الناس يرغبون في استخدام أساليبهم الخاصة التي تناسب احتياجات مشروعهم.

توسيع DropKick

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

$('select').dropkick({change: function (value) {console.log('Option selected: ' + value);}});

افكار اخيرة

أنا متأكد من أن هناك ألف طريقة لتصميم قائمة مختارة دون استخدام jQuery ، ولكن تلك التي تستخدم CSS فقط تخوض معركة خاسرة ضد الإعدادات الافتراضية للمتصفح. إن بساطة هذا البرنامج الإضافي والمرونة الهائلة التي يقدمها ونهج التحسين التدريجي الذي يتطلبه الأمر DropKick هو حل ممتاز.

هل استخدمت DropKick في مشروع؟ هل لديك طريقة مفضلة في التصميم