غالبًا ما يكون النمط الافتراضي لـ Select قبيحًا. من أجل ضمان النمط الموحد للصفحة ، يجب أن يكون SELECT أن يتم تجميله. على الرغم من وجود العديد من المكونات الإضافية المميتة ، والبحث عن الكثير ، إلا أنه من الصداع حقًا تقديم ملفات CSS طويلة وملفات JS. في الواقع ، مبدأ التنفيذ الخاص بـ SELECT بسيط للغاية ، فهو عملية للنقر على تبديل القيم وإخفائها وتمريرها. قمت محاكاة ذلك مع jQuery ، وكتابة أي نمط تريد ، دون الحد من الرقم.
آثار بسيطة:
HTML:
<viv> <font>› </font> <span> الخيار 1 </span> <ul> <li> الخيار 1 </li> <li> الخيار 1 </li> <li> الخيار 2 </li> <li> الخيار 3 </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> 3 </li> </ul> </viv>
CSS:
ul {margin: 0 ؛ الحشو: 0 ؛ Style List: None ؛}. Select_box {Width: 200px ؛ الارتفاع: 36 بكسل ؛ الحدود: 1px الصلبة #3cf ؛ الموقف: قريب تعويم: اليسار. يمين الهامش: 50px ؛}. select_box span {display: inline block ؛ العرض: 200 بكسل ؛ الارتفاع: 36 بكسل ؛ منحنى: مؤشر. Text-Indent: 10px ؛}. select_box .span_aa {color:#c36 ؛}. select_box ul {width: 200px ؛ الموقف: مطلق ؛ أعلى: 36 بكسل ؛ اليسار: -1px ؛ الحدود: 1px الصلبة #3cf ؛ العرض: لا شيء ؛ الخلفية: #fff ؛}. select_box li {cursor: pointer ؛ رفع الخط: 36 بكسل ؛ استقلاب النص: 10px ؛}. select_box li: hover {background:#39f ؛ اللون: #fff ؛}. select_box font {position: absolute ؛ اليمين: 10px ؛ حجم الخط: 26 بكسل ؛ Font-Family: "Microsoft Yahei" ؛ اللون:#3CF ؛ التحويل: تدوير (90deg) ؛}JS:
$ (function () {var s_title = $ (". select_box span") ؛ var s_select = $ (". select_box li") ؛ s_title.click (function (e) {$ (this) .addClass ("span_aa") ؛ $ (this) .next ("ul"). s_select.click (function () {var s_text = $ (this) .html () ؛ var s_title_2 = $ (this) .parent ('ul'). $ (document) .click (function () {s_title.removeclass ("span_aa") ؛ $ (". select_box ul"). Hide () ؛}) ؛تنزيل رمز المصدر: JS حدد تنزيل تجميل مربع منسدلة
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر فوق ملخص تأثير مربع JQuery وملخص تأثير مربع JavaScript للتعلم.
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون من المفيد للجميع تعلم برمجة JavaScript.