Bootstrap js plug-in yang anda mesti pelajari setiap hari kemahiran javascript

1. Gambaran keseluruhan pemalam 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.

2. Import pemalam JavaScript

Selain komponen web yang kaya, Bootstrap termasuk menu lungsur turun, kumpulan butang, navigasi, halaman, dsb. yang diperkenalkan sebelum ini. Ia juga termasuk beberapa pemalam JavaScript.

Pemalam JavaScript Bootstrap boleh diimport ke dalam halaman secara individu atau sekali gus. Oleh kerana pemalam JavaScript dalam Bootstrap semuanya bergantung pada perpustakaan jQuery, perpustakaan jQuery mesti diimport terlebih dahulu sama ada ia diimport secara individu atau sekaligus.

Import sekali:

Bootstrap menyediakan satu fail yang mengandungi semua pemalam JavaScript Bootstrap, iaitu bootstrap.js (versi termampat: bootstrap.min.js).

<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） -->
<script src="js/bootstrap.min.js"></script>

Import secara individu:

Untuk memudahkan import fail kesan khas yang berasingan, Bootstrap V3.2 menyediakan 12 pemalam JavaScript Ia adalah:

☑ Peralihan animasi: fail pemalam yang sepadan "transition.js"

☑ Tetingkap pop timbul Modal (Modal): fail pemalam yang sepadan "modal.js"

☑ Menu lungsur turun (Turun turun): fail pemalam yang sepadan "dropdown.js"

☑ Pengesanan tatal (Scrollspy): fail pemalam yang sepadan "scrollspy.js"

☑ Tab: fail pemalam yang sepadan "tab.js"

☑ Petua alat: fail pemalam yang sepadan "tooltop.js"

☑ Kotak timbul (Popover): fail pemalam yang sepadan "popover.js"

☑ Kotak amaran (Makluman): fail pemalam yang sepadan "alert.js"

☑ Butang: fail pemalam yang sepadan "button.js"

☑ Lipat/Akordeon (Rubuh): fail pemalam yang sepadan "collapse.js"

☑ Karusel imej Karusel: Fail pemalam yang sepadan "carousel.js"

☑ Cari pelampung Imbuhan secara automatik: Fail pemalam yang sepadan "affix.js"

3. 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.

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')

4. 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.bahaya").butang("togol").addClass("lemak")

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 tingkah laku 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').

5. 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   

6、事件

Bootstrap 为大多数插件的独特行为提供了自定义事件。一般来说，这些事件有两种形式：
动词不定式：这会在事件开始时被触发。例如 ex: show。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。

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

过去分词形式：这会在动作执行完毕之后被触发。例如 ex: shown。

以上就是本文的全部内容，希望对大家的学习有所帮助。