لقد كنت مشغولاً للغاية بالعمل مؤخرًا وأراجع نظامًا. تم تطوير خلفية المشروع بواسطة MVC1.0 ، ولكن تم تعديل الجزء الأمامي من العديد من الإصدارات ، والمصممين السابقين قويون للغاية ، وهم يصممون وتطوير الواجهة الأمامية. إنه بالفعل عصري للغاية ومتطور ، ويستخدم مجموعة أدوات bootstrap الشائعة دائمًا ، وهناك الكثير الذي يعرّفها كإطار عمل CSS في الواجهة الأمامية على شبكة الإنترنت. لكي أكون صادقًا ، لم أكن أعرف فقط أنه تم إنتاجه بواسطة Twitter وكانت الواجهة أفضل. ولكن لم يتم استخدامه في المشاريع الفعلية. قام زملائي الجدد من الشركة بذلك من قبل وخططوا لاستخدامه في مشروع الموقع الرسمي للشركة. لأنني لا أعرف ، فإن القائد غير مهتم بهذا ، لذلك فهو عديم الفائدة. وقالت إن التعاون مع أقل للعمل في المشاريع يمكن أن يحسن كفاءة التنمية ، ويمكن أن يجعل النظام أكثر جمالا وجمالا ، ولكنه يدعم أيضًا التصميم التكيفي بشكل أفضل.
تتمثل متطلبات المشروع في استبدال علامة تحديد HTML الأصلية مع تأثير المربع المنسدلة الموضح في الشكل أدناه. عادة ما أرى هذا النوع من الطلب. إذا كنت أرغب في تغيير علامات HTML الأصلية ، فأنا لا أحب ذلك. على الرغم من أنني أعلم أيضًا أنه يمكن تحقيق نفس الوظائف التي تم تحديدها من خلال علامات واجهة المستخدم و LI ورمز JavaScript ، إلا أنني لم أحاول أبدًا كتابتها من قبل. إذا كان هناك أي مشكلة في توافق الأخطاء والمتصفح ، فسوف أتواصل مع PM. هل يجب ألا أغير هذا الاختيار؟ سأستخدم المحدد الأصلي. قال رئيس الوزراء إنه يقلل من تداخل المستخدم والسماح للمستخدمين بعدم إيلاء الكثير من الاهتمام لهذا الخيار. أعتقد أن هذا هو نفسه. بادئ ذي بدء ، لا يبدو مبالغًا فيه مثل الاختيار. ثانياً ، السهم المنسدل صغير بعض الشيء ، لذلك لن ينقر المستخدم بشكل متعمد. في الواقع ، سيفتح النقر على هذا النص أيضًا القائمة المنسدلة أدناه.
الصورة (HTML الأصلي تحديد علامة) الصورة (التقديم النهائي)
(HTML الأصلي تحديد علامة)
الوظيفة الأصلية لـ SELECT هي النقر فوق السهم المنسدل على اليمين لفتح القائمة المنسدلة ومنح المستخدم تحديدًا. عندما يحدد المستخدم خيارًا ، يجب تغيير القيمة في مربع النص إلى محتوى الخيار المقابل ، ويمكن الحصول على قيمة القيمة للخيار. وظيفة أخرى مهمة للغاية هي أن هذا الخيار لديه خاصية محددة. إذا تم تحديد خيار = "محدد" ، فسيحدد المربع المنسدل الخيار الحالي افتراضيًا.
يوفر Bootstrap القائمة المنسدلة لإنشاء قوائم جميلة ، وهي ليست وظيفة للاختيار. عندما بحثت ورأيته ، اعتقدت أن Bootstrap يمكن أن يوفر مكونًا محددًا مشابهًا لنمط الزر المنسدلة. لكنني وهم. بدون هذا المكون ، يجب تنفيذ المكون. في الواقع ، كان لدي خبرة في كتابة علامات مختارة مع UL و LI ، لذلك ليس من الصعب جدًا كتابة هذا.
<div style = "margin-top: 30px ؛"> <a style = "font-size: 14px ؛" type = "button" id = "sropdownmenu1" data-toggle = "speldown"> text 1 <span> </span> </a> <ul rom = "menu" aria-labelledby = "sropdownmenu1"> <li rob = "value" <a rol = "menuitem" rob = "menuitem" tabindex = "2" href = "#"> text 2 </a> </li> <li rob = "العرض التقديمي"> <a rob = "menuitem" tabindex = "3" href = "#"> text 3 </a> </li> </ul> </ul>
هذا هو الكود الأساسي للزر المنسدلة. نظرًا لأنه سيطبق نمط CSS نفسه ، نحتاج إلى تغيير النمط في bootstrap.min.css لاحقًا ، لذلك نحتاج إلى وضع بعض الأنماط في هذه الصفحة.
<! doctype html> <html> <head> <title> bootstrap 101 template </itha> <meta name = "viewport" content = "width = width device ، inial-scale = 1.0" charset = "utf-8" <! type = "text/css">. btn-group.open .dropdown-toggle {-webkit-box-shadow: none ؛ box-shadow: none ؛} </style> <!-[if lt ie 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <! 3 </soph> </soph> <div id = "sropdown1" "style =" margin-top: 30px ؛ "> <viv> <a style =" font-size: 14px ؛ "type =" button "id =" dropdownmenu1 "data-toggle =" select "> <! 1 </span> <span> </span> </a> <ul rom = "menu" ariA-labelledby = "sropdownmenu1"> <li rob = "عرض تقديمي" value = "1"> <a real = "menuitem" tabindex = "1" "href =" javaScript: void (0) ؛ rob = "menuitem" tabindex = "2" href = "javaScript: void (0) ؛ مكونات JavaScript الخاصة بـ Bootstrap)-> <script src = "js/jquery -1.10.2.js"> </script> <!-قم بتضمين جميع الإضافات المترجمة (أدناه) ، أو تضمين الملفات الفردية حسب الحاجة-> <script src = "js/bootstrap.min.js" customdropdown (eLe) {this.dropdown = eLe ؛ this.placeholder = this.dropdown.find (". -1 ؛ هذا. من القائمة المنسدلة obj.options.on ("انقر" ، الدالة () {var opt = $ (this) ؛ obj.text = opt.find ("a" this.text ؛} ، getValue: function () {return this.val ؛} ، getIndex: function () {return this.index ؛}} $ (document) .Ready (function () {var mydropdown = new customdropdown ($ ("#dropdown1)) ؛ستظهر الخلفية أثناء عملية النقر. عرض العناصر من خلال Chrome هو تأثير كتابة مربع. ولكن بعد تصحيحه ، لا يزال يبدو. دعنا نستمر في البحث غدًا.
أضف خطًا واحدًا من تراكب النمط ، bootstrap.css داخل النمط نفسه.
<type type = "text/css">
ملاحظة: أثناء عملية التثبيت ، نمر في كائن من محدد jQuery ، لذلك إذا كانت الصفحة تحتوي على العديد من المنسدلة المخصصة ، فسيتم استخدام الفئة. ثم تحتاج إلى تعديل الكود أثناء عملية الاستئصال!
العنوان التجريبي التجريبي: http://liminjun.sinaapp.com/demo/customselect/index.html
bootstrap cdn http://www.bootstrapcdn.com/ على الرغم من أن Baidu لديها أيضًا ، فإن الإصدار قديم بعض الشيء ولن يتم تحديثه.
موقع Bootstrap الرسمي http://getbootstrap.com/components/#btn-dropdowns