Artikel ini memperkenalkan penggunaan dropdown modul dropdown bootstrap untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
1. Analisis Kode Sumber:
Dropdowns.scss: modul kotak dropdown
JavaScripts/Bootstrap/Dropdown.js: Menerapkan respons kotak drop-down
2. Fungsi dan Prinsip:
Pull Down Tab, fungsi menampilkan item yang dipilih tidak dapat diwujudkan secara default.
prinsip:
1. Gunakan kelas dropdown sebagai titik jangkar, dan kemudian biarkan anak-anak menundukkan menu-menu benar-benar memposisikannya. Anda juga perlu menambahkan titik klik sebagai pengaturan data-kilat = "dropdown" untuk membuat asosiasi.
2. Butuh dukungan dari plug-in JS
3. Analisis Kode Sumber:
1. Caret: Menerapkan segitiga ke bawah, menggunakan batas untuk diterapkan
1.1. Warna perbatasan adalah warna font secara default
1.2. Implementasi segitiga: Perbatasan harus memiliki lebar, dan kemudian sisi yang berdekatan harus memiliki lebar, tetapi warnanya transparan; Akhirnya, elemen harus menjadi elemen blok di baris untuk membuat tinggi dan lebarnya 0.
1.3. Kodenya adalah sebagai berikut
Salinan kode adalah sebagai berikut: <span style = "Border-left: 4px solid; border-top: 4px transparan padat; batas-back: 4px transparan padat; tinggi: 0px; lebar: 0px; line-height: normal; display: inline-block;"> </span>
2. Jenis acara klik yang mendengarkan terikat pada dokumen, dan tipe mendengarkan adalah data-kilat = "dropdown".
3. Fungsi plugin yang ditulis oleh plugin JS dan konstruktor kelas digunakan untuk memanggil plugin menggunakan metode JS;
4. Mode data-* memanggil plug-in, yang digunakan untuk menyuntikkan peristiwa ke dalam dokumen, kode ini adalah sebagai berikut:
$ (dokumen) .on ('click.bs.dropdown.data-api', clearmenus) .on ('click.bs.dropdown.data-api', '.dropdown form', fungsi (e) {e.stoppropagation ()}). on ('click.bs.dropdown.data-api ()}). on (' click.bs.dropdown.data-api ()}). on ('click.bs.dropdown.data-api ()}). on (' click.bs.dropdown.data-api ()}). on ('click.bs.dropdown.data-api ()). Dropdown.prototype.toggle) .on ('keydown.bs.dropdown.data-api', sakelar, dropdown.prototype.keydown) .on ('keydown.bs.dropdown.data-api', '. Dropdown-menu', dropdown.protypdown.data) ','Kode secara langsung memanggil metode yang ditentukan oleh dropdown. Desain yang indah di sini terletak pada kerangka plug-in, panggilan mode data-* dan panggilan mode plug-in JS, sementara kedua mode panggilan ini menggunakan kode yang sama.
5. Jika Anda menyebutnya dengan plug-in JS, Anda harus memanggil metode dasar sendiri. Hanya acara sakelar yang akan terikat saat membuat instance.
var dropdown = function (elemen) {$ (elemen) .on ('click.bs.dropdown', this.toggle)}6. ClearMenu: Hanya elemen data-kilat = "dropdown" yang dihapus
7. Dropdown-Backdrop: Digunakan untuk memindahkan pemrosesan acara tanpa klik
8. Keydown: Ketika tombol dropdown mendapatkan fokus, tekan tombol untuk memperluas dan tekan tombol atas untuk menyusut.
9. Data-target dan herf = "#id": Untuk mencapai klik, perluas daftar drop-down yang ditentukan. Standarnya adalah memperluas node saudara di belakang tombol:
<ul> <li><a>Index</a></li> <li><a>Zhenglu</a></li> <li > <a data-toggle="dropdown" href="#name" >User tools</a></li></ul><div id="name" > <ul > <li><a>About us</a></li> </ul></div>
10. Implementasikan Submenu Pop-Up dan Gunakan Bottom: 100% (Penentuan posisi submenu pop-up bawah) untuk mengimplementasikannya
11. Contoh aplikasi
<Div id = "dropdown"> <a id = "dropdown-btn" data-target = "#dropdown"> nomor </a> <ul> <li> <a> 3343 </a> </li> <li> <a> 555 </a> </li> </ul> </div>
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan dua topik menarik kepada Anda: Tutorial Pembelajaran Bootstrap Bootstrap Tutorial Praktis
Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.