Saya sangat sibuk dengan pekerjaan baru -baru ini dan sedang merevisi sistem. Latar belakang proyek dikembangkan oleh MVC1.0, tetapi bagian front-end telah dimodifikasi beberapa versi, dan desainer sebelumnya sangat kuat, dan keduanya merancang dan pengembangan front-end. Ini sudah sangat modis dan mutakhir, dan menggunakan toolkit bootstrap yang selalu populer, dan ada banyak yang mendefinisikannya sebagai kerangka kerja CSS front-end web. Sejujurnya, saya hanya tahu sebelumnya bahwa itu diproduksi oleh Twitter dan antarmuka lebih baik. Tapi itu tidak digunakan dalam proyek aktual. Rekan -rekan baru saya dari perusahaan melakukan ini sebelumnya dan berencana untuk menggunakannya dalam proyek situs web resmi perusahaan. Karena saya tidak tahu, pemimpin tidak tertarik dengan ini, jadi itu tidak berguna. Dia mengatakan bahwa bekerja sama dengan kurang untuk bekerja pada proyek dapat meningkatkan efisiensi pengembangan, dan dapat membuat sistem lebih indah dan indah, tetapi juga mendukung desain adaptif lebih baik.
Persyaratan proyek adalah untuk mengganti tag pilih asli HTML dengan efek kotak drop-down yang ditunjukkan pada gambar di bawah ini. Saya biasanya melihat permintaan semacam ini. Jika saya ingin mengubah tag HTML asli, saya tidak menyukainya. Meskipun saya juga tahu bahwa fungsi yang sama seperti Select dapat dicapai melalui tag UI dan LI dan kode JavaScript, saya belum pernah mencoba menulisnya sebelumnya. Jika ada masalah dengan kompatibilitas bug dan browser, saya akan berkomunikasi dengan PM. Haruskah saya tidak mengubah pilihan ini? Saya akan menggunakan SELECT asli. PM mengatakan bahwa itu untuk mengurangi gangguan pengguna dan membiarkan pengguna tidak terlalu memperhatikan opsi ini. Saya pikir ini sama. Pertama -tama, itu tidak terlihat berlebihan seperti yang dipilih. Kedua, panah drop-down agak kecil, sehingga pengguna tidak akan mengklik terlalu sengaja. Bahkan, mengklik teks itu juga akan membuka daftar drop-down di bawah ini.
Gambar (HTML Native Select Tag) Gambar (rendering akhir)
(HTML Native Select Tag)
Fungsi SELECT asli adalah mengklik panah tarik-turun di sebelah kanan untuk membuka daftar drop-down dan memberi pengguna pilihan. Ketika pengguna memilih opsi, nilai di kotak teks harus diubah ke konten opsi yang sesuai, dan nilai nilai opsi dapat diperoleh. Fungsi lain yang sangat penting adalah opsi memiliki properti yang dipilih. Jika opsi telah dipilih = "Dipilih", kotak drop-down akan memilih opsi saat ini secara default.
Bootstrap menyediakan dropdown tombol untuk membuat menu yang indah, dan itu bukan fungsi untuk dipilih. Ketika saya mencari dan melihatnya, saya pikir Bootstrap dapat memberikan komponen terpilih yang mirip dengan gaya dropdown tombol. Tapi saya delusi. Tanpa komponen ini, komponen harus diimplementasikan. Bahkan, saya memiliki pengalaman menulis tag terpilih dengan ul dan li, jadi tidak terlalu sulit untuk menulis ini.
<Div style = "margin-top: 30px;"> <a style = "font-size: 14px;" type = "tombol" id = "dropdownMenu1" data-koggle = "dropdown"> teks 1 <span> </span> </a> <role = "menu" aria-labeledby = "dropdownmenu1"> <role = "presentasi" value => <a role = "menuUtem" tabindex = "1" href = "#"#"#"#"Lies </a </a <buitem" Tabindex = "1" href = "#"#" Role = "MenuUtem" TabIndex = "2" href = "#"> Teks 2 </a> </li> <role = "presentasi"> <a role = "menuUtem" tabindex = "3" href = "#"> Teks 3 </a> </li> </ul> </div>
Ini adalah kode dasar dropdown tombol. Karena itu akan menerapkan gaya CSS itu sendiri, kita perlu mengubah gaya di bootstrap.min.css nanti, jadi kita perlu menaruh beberapa gaya pada halaman ini.
<! Doctype html> <html> <head> <title> bootstrap 101 template </iteme> <meta name = "viewport" content = "width = device-width, skala awal = 1.0" charset = "utf-8"> <!-bootstrap-> <link href = "css/bootstrp." type = "text/css">. btn-group.open .dropdown-koggle {-webkit-box-shadow: none; box-shadow: none;} </style> <!-[jika lt yaitu 9]> <skrip src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <skrip src = "https://oss.maxcdn.com/libs/respress.js/1.3.0/respress.min.js"> </script> <! [Endif]-> </head> <pifes> <p> opsi original </p> <pilih> <spice value = "1"> Text 1 </"Option> <" Opsi = "Opsi 2 Nilai 2 Nilai 2 3 </pection> </dect> <Div ID = "dropdown1" "style =" margin-top: 30px; "> <div> <a style =" font-size: 14px; "type =" tombol "id =" dropdownMenu1 "-lip-kunyah =" dropdown "> setelah dipilih-sperse ige-span —kexies —kening ige-oute, 1 </span> <span> </span> </a> <uL role = "menu" aria-labeledby = "dropdownmenu1"> <role = "presentasi" value = "1"> <a Role = "MenuUtem" Tabindex = "1" href = "Javascript: void (0);"> Teks 1 </a> </a> </lia = "LiA" LIBIP: LiA "LIBOK (0);"> Teks 1 </a> </a> </a> </a> </" Role = "MenuUtem" TabIndex = "2" href = "JavaScript: void (0);"> Teks 2 </a> </li> <role = "presentasi" value = "3"> <a Role = "MenuUtem" Tabindex = "3" href = "JavaScript: void (0);"> JABER (! Plugin JavaScript Bootstrap)-> <skrip src = "js/jQuery-1.10.2.js"> </script> <!-Sertakan semua plugin yang dikompilasi (di bawah), atau sertakan file individual sesuai kebutuhan-> <script src = "js/bootstrap.min.js"> </script> <script script = "JAV/JAV/JABSCRIP" CustomDropDown (ELE) {this.dropdown = ele; this.placeholder = this.dropdown.find (". -1; this.Initevents ();} customDropDown.prototype = {initevents: function () {var obj = this; // metode ini tidak dapat ditulis karena acara klik ditangkap oleh bootstrap itu sendiri. Daftar drop-down obj.options.on ("klik", fungsi () {var opt = $ (ini); obj.text = opt.find ("a"). text (); obj.val = opt.attr ("value"); obj.index = opt.index (); obj.placeholder.text (obj.text);};}; {}; this.text;}, getValue: function () {return this.val;}, getIndex: function () {return this.index;}} $ (dokumen) .ready (function () {var myDropDown = customDropDown baru ($ ("#dropdown1"));}); </script> </body> ($ ("#dropdown1"));}); </script> </body>Latar belakang akan muncul selama proses klik. Melihat elemen melalui Chrome adalah efek dari penulisan kotak-shodow. Tetapi setelah saya mengoreksikannya, itu masih muncul. Mari kita lanjutkan mencari besok.
Tambahkan 1 baris overlay gaya, bootstrap.css di dalam gaya itu sendiri.
<style type = "text/css">. btn-group.open .dropdown-koggle {-webkit-box-shadow: none; box-shadow: none;} </style>Catatan: Selama proses instantiasi, kami meneruskan objek pemilih jQuery, jadi jika halaman memiliki banyak dropdown khusus, kategori akan digunakan. Maka Anda perlu memodifikasi kode selama proses instantiasi!
Alamat demo demo: http://liminjun.sinaapp.com/demo/customselect/index.html
Bootstrap CDN http://www.bootstrapcdn.com/ Meskipun Baidu juga memilikinya, versinya agak lama dan tidak akan diperbarui.
Bootstrap situs resmi http://getboottrap.com/components/#btn-dropdowns