ฉันยุ่งมากกับงานเมื่อเร็ว ๆ นี้และกำลังทบทวนระบบ พื้นหลังของโครงการได้รับการพัฒนาโดย MVC1.0 แต่ส่วนหน้าได้รับการแก้ไขหลายรุ่นและนักออกแบบก่อนหน้านี้มีประสิทธิภาพมากและพวกเขาทั้งการออกแบบและการพัฒนาส่วนหน้า มันเป็นแฟชั่นและล้ำสมัยมากและใช้ชุดเครื่องมือ bootstrap ยอดนิยมเสมอและมีหลายอย่างที่กำหนดว่าเป็นเฟรมเวิร์ก CSS ส่วนหน้าเว็บ พูดตามตรงฉันรู้ก่อนว่ามันถูกผลิตโดย Twitter และอินเทอร์เฟซดีกว่า แต่มันไม่ได้ใช้ในโครงการจริง เพื่อนร่วมงานใหม่ของฉันจาก บริษัท ทำสิ่งนี้มาก่อนและวางแผนที่จะใช้ในโครงการเว็บไซต์ทางการของ บริษัท เพราะฉันไม่รู้ผู้นำไม่สนใจเรื่องนี้ดังนั้นมันจึงไร้ประโยชน์ เธอกล่าวว่าการร่วมมือกับการทำงานน้อยลงในโครงการสามารถปรับปรุงประสิทธิภาพการพัฒนาและสามารถทำให้ระบบสวยงามและสวยงามยิ่งขึ้น แต่ก็รองรับการออกแบบที่ปรับตัวได้ดีขึ้น
ข้อกำหนดของโครงการคือการแทนที่แท็ก Select HTML Native ด้วยเอฟเฟกต์แบบเลื่อนลงที่แสดงในรูปด้านล่าง ฉันมักจะเห็นความต้องการเช่นนี้ หากฉันต้องการเปลี่ยนแท็ก HTML ดั้งเดิมฉันไม่ชอบ แม้ว่าฉันจะรู้ด้วยว่าฟังก์ชั่นเดียวกับที่เลือกสามารถทำได้ผ่านแท็ก UI และ LI และรหัส JavaScript แต่ฉันไม่เคยพยายามเขียนมาก่อน หากมีปัญหาใด ๆ กับความเข้ากันได้ของข้อผิดพลาดและเบราว์เซอร์ฉันจะสื่อสารกับ PM ฉันไม่ควรเปลี่ยนเลือกนี้หรือไม่? ฉันจะใช้การเลือกดั้งเดิม PM กล่าวว่าเป็นการลดการรบกวนของผู้ใช้และให้ผู้ใช้ไม่ให้ความสนใจกับตัวเลือกนี้มากเกินไป ฉันคิดว่ามันเหมือนกัน ก่อนอื่นมันไม่ได้ดูเกินจริงตามที่เลือก ประการที่สองลูกศรแบบเลื่อนลงมีขนาดเล็กเล็กน้อยดังนั้นผู้ใช้จะไม่คลิกอย่างจงใจ ในความเป็นจริงการคลิกที่ข้อความนั้นจะเปิดรายการดรอปดาวน์ด้านล่าง
รูปภาพ (HTML Native Select Tag) รูปภาพ (การแสดงผลสุดท้าย)
(แท็ก Select HTML Native)
ฟังก์ชั่นดั้งเดิมของการเลือกคือการคลิกลูกศรแบบเลื่อนลงทางด้านขวาเพื่อเปิดรายการดรอปดาวน์และให้ผู้ใช้เลือก เมื่อผู้ใช้เลือกตัวเลือกค่าในกล่องข้อความควรเปลี่ยนเป็นเนื้อหาตัวเลือกที่เกี่ยวข้องและสามารถรับค่าค่าของตัวเลือกได้ อีกฟังก์ชั่นที่สำคัญมากคือตัวเลือกนั้นมีคุณสมบัติที่เลือก หากตัวเลือกได้เลือก = "เลือก" กล่องดรอปดาวน์จะเลือกตัวเลือกปัจจุบันตามค่าเริ่มต้น
Bootstrap จัดเตรียมปุ่มแบบเลื่อนลงเพื่อสร้างเมนูที่สวยงามและไม่ใช่ฟังก์ชั่นให้เลือก เมื่อฉันค้นหาและเห็นมันฉันคิดว่า bootstrap สามารถให้องค์ประกอบที่เลือกคล้ายกับสไตล์การเลื่อนลงของปุ่ม แต่ฉันเป็นคนหลงผิด หากไม่มีส่วนประกอบนี้จะต้องดำเนินการส่วนประกอบ อันที่จริงฉันมีประสบการณ์ในการเขียนแท็กที่เลือกด้วย UL และ LI ดังนั้นจึงไม่ยากที่จะเขียนสิ่งนี้
<div style = "margin-top: 30px;"> <a style = "font-size: 14px;" type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> ข้อความ 1 <pan> </span> </a> <ul role = "เมนู" aria-labelledby = "dropdownMenu1"> <li role = "การนำเสนอ" role = "menuitem" tabindex = "2" href = "#"> ข้อความ 2 </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "3" href = "#"> ข้อความ 3 </a> </li>
นี่คือรหัสพื้นฐานของการดรอปดาวน์ปุ่ม เนื่องจากมันจะใช้สไตล์ CSS เองเราจึงต้องเปลี่ยนสไตล์ใน bootstrap.min.css ในภายหลังดังนั้นเราจึงต้องใส่สไตล์บางอย่างในหน้านี้
<! doctype html> <html> <head> <title> bootstrap 101 เทมเพลต </title> <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0" charset = "utf-8"> <! type = "text/css">. btn-group.open .dropdown-toggle {-webkit-box-shadow: none; box-shadow: none;} </style> <!-[ถ้า lt ie 9]> <สคริปต์ src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <สคริปต์ src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <! 3 </potion> </select> <div id = "dropdown1" "style =" margin-top: 30px; "> <div> <a style =" ตัวอักษรขนาด: 14px; "type =" ปุ่ม "id =" dropdownMenu1 "texted-togtle-toggle =" dropdown "> <!-หลังจากเลือกตัวเลือก 1 </span> <span> </span> </a> <ul role = "เมนู" aria-labelledby = "dropdownmenu1"> <li role = "การนำเสนอ" value = "1"> <a role = "menuitem" tabindex = "1" href = "JavaScript: void (0); role = "menuitem" tabindex = "2" href = "javascript: void (0);"> ข้อความ 2 </a> </li> <li role = "การนำเสนอ" value = "3"> <a role = "menuitem" tabindex = "3" href = "javascript ปลั๊กอิน JavaScript ของ Bootstrap)-> <script src = "js/jQuery-1.10.2.js"> </script> <!-รวมปลั๊กอินที่รวบรวมทั้งหมด (ด้านล่าง) หรือรวมไฟล์แต่ละไฟล์ตามต้องการ-> <script src = "js/bootstrap.min.js" CustomDropdown (ele) {this.dropdown = ele; this.place.holder = this.dropdown.find (". placeholder"); this.options = this.dropdown.find ("ul.dropdown-menu> li"); this.val = '; -1; this.initevents ();} customdropdown.prototype = {initevents: function () {var obj = this; // วิธีนี้ไม่สามารถเขียนได้เนื่องจากเหตุการณ์การคลิกถูกจับโดย bootstrap ของรายการดรอปดาวน์ obj.options.on ("คลิก", function () {var opt = $ (this); obj.text = opt.find ("a"). text (); obj.val = opt.attr ("value"); obj.index = opt.index (); this.text;}, getValue: function () {return this.val;}, getIndex: function () {return this.index;}} $ (เอกสาร). พร้อม (ฟังก์ชั่น () {var myDropdown = new CustomDropDown ($ ("#dropdown1");พื้นหลังจะปรากฏขึ้นในระหว่างกระบวนการคลิก การดูองค์ประกอบผ่านโครเมี่ยมเป็นผลของการเขียนกล่องโฟโตว แต่หลังจากที่ฉันแก้ไขมันก็ยังปรากฏอยู่ มาค้นหาต่อไปในวันพรุ่งนี้
เพิ่ม 1 บรรทัดของการซ้อนทับสไตล์, bootstrap.css ภายในสไตล์ของตัวเอง
<style type = "text/css">. btn-group.open .dropdown-toggle {-webkit-box-shadow: none; box-shadow: none;} </style>หมายเหตุ: ในระหว่างกระบวนการอินสแตนซ์เราผ่านวัตถุของตัวเลือก jQuery ดังนั้นหากหน้ามีตัวอักษรแบบเลื่อนลงที่กำหนดเองจำนวนมากหมวดหมู่จะถูกใช้ จากนั้นคุณต้องแก้ไขรหัสระหว่างกระบวนการอินสแตนซ์!
ที่อยู่ตัวอย่างตัวอย่าง: http://liminjun.sinaapp.com/demo/customselect/index.html
Bootstrap cdn http://www.bootstrapcdn.com/ แม้ว่า Baidu จะมีมัน แต่รุ่นนี้ค่อนข้างเก่าและจะไม่ได้รับการอัปเดต
เว็บไซต์ทางการ Bootstrap http://getbootstrap.com/components/#btn-dropdowns