Penjelasan terperinci tentang kemahiran plug-in_javascript Bootstrap

Komponen yang dibincangkan dalam bab Komponen Reka Letak sebelum ini hanyalah permulaan. Bootstrap dilengkapi dengan 12 pemalam jQuery, yang memanjangkan fungsi dan menambah lebih interaktiviti pada tapak. Walaupun anda bukan pembangun JavaScript lanjutan, anda boleh mula mempelajari pemalam JavaScript Bootstrap. Menggunakan API Data Bootstrap, kebanyakan pemalam boleh dicetuskan tanpa menulis sebarang kod.

Terdapat dua cara untuk tapak merujuk pemalam Bootstrap :

Rujukan berasingan: Gunakan fail *.js individu Bootstrap. Sesetengah pemalam dan komponen CSS bergantung pada pemalam lain. Jika anda merujuk pemalam secara individu, pastikan anda menyemak kebergantungan antara pemalam tersebut terlebih dahulu.
Kompilasi (juga) rujukan: Gunakan bootstrap.js atau versi mini bootstrap.min.js.
"Jangan cuba merujuk kedua-dua fail pada masa yang sama, kerana kedua-dua bootstrap.js dan bootstrap.min.js mengandungi semua pemalam."

Semua pemalam bergantung pada jQuery. Jadi jQuery mesti dipetik sebelum fail pemalam. Sila lawati bower.json untuk melihat versi jQuery yang kini disokong oleh Bootstrap.

1. atribut data Anda boleh menggunakan semua pemalam Bootstrap hanya melalui API atribut data tanpa menulis satu baris kod JavaScript. Ini ialah API kelas pertama dalam Bootstrap dan harus menjadi pilihan pertama anda.
Kemudian sekali lagi, mungkin terdapat situasi di mana ciri ini perlu dimatikan. Oleh itu, kami juga menyediakan cara untuk mematikan API atribut data, iaitu, untuk menyahikat acara dengan ruang nama data-api dan terikat pada dokumen. Seperti ini:

$(document).off('.data-api')
Jika anda perlu menutup pemalam tertentu, anda hanya perlu menambah nama pemalam sebagai ruang nama sebelum ruang nama data-api, seperti ditunjukkan di bawah:
$(document).off('.alert.data-api')

2. API Pengaturcaraan Kami menyediakan API JavaScript tulen untuk semua pemalam Bootstrap. Semua API awam menyokong kaedah panggilan individu atau rantaian, dan mengembalikan koleksi elemen yang mereka kendalikan (nota: borang panggilan adalah konsisten dengan jQuery). Contohnya:

$(".btn.danger").button("toggle").addClass("fat")

Semua kaedah boleh menerima objek pilihan pilihan sebagai parameter, atau rentetan yang mewakili kaedah tertentu, atau tanpa sebarang parameter (dalam kes ini, pemalam akan dimulakan kepada kelakuan lalai), seperti ditunjukkan di bawah :

// 初始化为默认行为
$("#myModal").modal()  
 // 初始化为不支持键盘       
$("#myModal").modal({ keyboard: false }) 
// 初始化并立即调用 show
$("#myModal").modal('show') 

Setiap pemalam juga mendedahkan pembina asalnya pada sifat Pembina: $.fn.popover.Constructor. Jika anda ingin mendapatkan contoh pemalam tertentu, anda boleh mendapatkannya terus melalui elemen halaman:

$('[rel=popover]').data('popover').

3. Elakkan konflik ruang nama
Kadangkala pemalam Bootstrap mungkin perlu digunakan dengan rangka kerja UI yang lain. Dalam kes ini, konflik ruang nama mungkin berlaku. Jika ini malangnya berlaku, anda boleh memulihkan nilai asalnya dengan memanggil kaedah .noConflict pemalam.

// 返回 $.fn.button 之前所赋的值
var bootstrapButton = $.fn.button.noConflict()
// 为 $().bootstrapBtn 赋予 Bootstrap 功能             
$.fn.bootstrapBtn = bootstrapButton      

4 Bootstrap menyediakan acara tersuai untuk kebanyakan gelagat unik pemalam. Secara umumnya, acara ini datang dalam dua bentuk:

Kata kerja infinitif:

Ini akan dicetuskan pada permulaan acara. Contohnya cth: tunjukkan. Peristiwa infinitif menyediakan fungsi preventDefault. Ini memungkinkan untuk menghentikan pelaksanaan operasi sebelum acara bermula.

$('#myModal').on('show.bs.modal', function (e) {
// 阻止模态框的显示
 if (!data) return e.preventDefault()
})

Borang participle lalu:

Ini akan dicetuskan selepas tindakan telah dilaksanakan. Contohnya cth: ditunjukkan. Di atas ialah gambaran ringkas tentang pemalam Bootstrap, saya harap ia akan membantu semua orang untuk memahami pemalam Bootstrap.