Contoh ini memperkenalkan aplikasi menerapkan tab tab. Plug-in ini relatif sederhana. Konten spesifiknya adalah sebagai berikut
File kode sumber:
tab.js
Prinsip Implementasi:
1. Saat mengklik elemen, pertama -tama batalkan elemen yang disorot semula.
2. Kemudian sorot elemen yang diklik
3. Jika mengklik elemen adalah opsi di kotak drop-down, pilih sendiri dan juga pilih kotak drop-down.
5. Jika animasi didefinisikan, jalankan animasi terlebih dahulu dan kemudian panggilan balik
Analisis Kode Sumber:
1. Metode acara dipicu ketika suatu elemen diklik, yang akan memicu empat peristiwa berikut.
1.1. Hiden.bs.tab: Sembunyikan elemen sebelumnya
1.2. Show.bs.tab: tampilkan elemen saat ini
1.3. Hideen.bs.tab: diselesaikan dengan menyembunyikan elemen sebelumnya
1.4. Showed.bs.tab: tunjukkan elemen saat ini lengkap
1.5. Kode Sumber Acara Hiden/Show:
var $ sebelumnya = $ ul.find ('. Active: last a') var hideevent = $ .event ('hide.bs.tab', {terkait target: $ this [0]}) var showevent = $ .event ('show.bs.tab', {terkait target: $ sebelumnya [0]}))2. Aktif: Aktifkan objek saat ini
2.1. Tambahkan atribut yang diperluas aria ke elemen navigasi untuk menandai apakah elemen ini dalam keadaan diperluas
2.2. Menggunakan mekanisme reflow, gunakan atribut offsetwidth untuk mencapai pengecatan ulang parsial
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Serangkaian tutorial ini telah dikompilasi ke dalam: Tutorial Dasar Tutorial Bootstrap Topik Khusus, Selamat datang untuk mengklik untuk belajar.
Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.