Plugin Collapse memudahkan untuk melipat area halaman. Apakah Anda menggunakannya untuk membuat navigasi yang runtuh atau panel konten, itu memungkinkan banyak opsi konten.
Jika Anda ingin merujuk fungsionalitas plugin secara individual, Anda perlu merujuk collapse.js, atau, sebagaimana disebutkan dalam bab ikhtisar plugin Bootstrap , Anda dapat merujuk bootstrap.js atau versi terkompresi bootstrap.min.js.
1. Penggunaan
Tabel berikut mencantumkan plug-in collapse untuk menangani penskalaan berat:
Anda dapat menggunakan plugin Collapse dengan dua cara:
Melalui atribut data: Tambahkan data-kilat = "collaps" dan target data ke elemen untuk secara otomatis menetapkan kontrol ke elemen yang dapat dilipat. Properti target data menerima pemilih CSS dan menerapkan efek keruntuhan untuk itu. Pastikan untuk menambahkan kelas .collapse ke elemen yang dapat dilipat. Jika Anda menginginkannya secara default, tambahkan kelas tambahan .in.
Untuk menambahkan manajemen pengelompokan seperti panel yang dilipat ke kontrol yang dapat dilipat, tambahkan data properti data-parent = "#pemilih".
Melalui JavaScript : Metode keruntuhan dapat diaktifkan melalui JavaScript, seperti yang ditunjukkan di bawah ini:
$ ('. Collapse'). Collapse ()
2. Contoh
Konten dapat diciutkan dengan mengklik.
// Contoh Dasar
<tombol data-kilat = "collapse" data-target = "#content"> bootstrap </button> <div id = "content"> <div> bootstrap adalah toolkit open source untuk pengembangan front-end yang diluncurkan oleh Twitter. Ini dikembangkan oleh perancang Twitter Mark Otto dan Jacob Thornton dan merupakan kerangka kerja CSS/HTML. Saat ini, versi terbaru Bootstrap adalah 3.0. </div> </div>
// lipat akordeon
<Div ID = "Accordion"> <div> <div> <h4> <a href = "#collapsone" data-koggle = "collapse" data-parent = "#akordeon"> klik saya untuk ditampilkan, lalu klik saya untuk melipat, bagian 1 </a> </h4> </div> <Div ID = "CollapsOne"> <Div> di sini adalah bagian pertama. </div> </div> </div> <div> <h4> <a href = "#collapsetwo" data-koggle = "collapse" data-parent = "#akordeon"> klik saya untuk ditampilkan, lalu klik saya untuk melipat, bagian 2 </a> </h4> </div> <Div ID = "collapsetwo"> </a> di sini adalah di sini. </div> </div> </div> <div> <div> <h4><a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">Click me to display, then click me to fold, Part 3</a></h4> </div> <div id="collapseThree"> <div> Here is the third part. </div> </div> </div> </div>
// Efek Accordion
$ ('#collapsone,#collapsetwo,#collapsethree, #collapsefour'). collapse ({parent: '#Accordion', sakelar: false,});// panggil secara manual
$ ('tombol'). on ('click', function () {$ ('#collapsone'). Collapse ({sakelar: true,});});// Metode Collapse juga menyediakan tiga parameter: Hide, Show, dan Toggle.
$ ('#collapsone'). Collapse ('hide'); $ ('#collapsetwo'). Collapse ('show'); $ ('tombol'). on ('click', function () {$ ('#collapsone'). Collapse ('sakgle');});Ada empat jenis acara di plug-in collapse.
// Acara, kesamaan lainnya
$ ('#collapsone'). on ('show.bs.collapse', function () {alert ('gratis saat metode acara disebut');});Saya harap artikel ini akan membantu dan menginspirasi untuk belajar tentang plug-in bootstrap collapse.