Membuat Collapse Plugin Bootstrap (Part 2)

Membuat Collapse Plugin Bootstrap (Part 2)

Tutorial sebelumya kita membuat collapse plugin bootstrap sederhana, pada tutorial kali ini kita membahas membuat collapse plugin bootstrap (part 2).

Di sini kita menambahkan pilihan, method dan event collapse plugin bootstrap. 
 
Tabel berikut berisi daftar class plugin collapse yang lebih kompleks lagi :

Class	Keterangan
.collapse	Untuk menyembunyikan konten.
.collapse.in	Untuk menampilkan konten.
.collapsing	Untuk melakukan transisi pada saat mulai dimulai dan ketika selesai.

 

Ada 2 cara dalam membuat collapse Plugin Bootstrap:

Berikut ini ada 2 cara dalam membuat collapse plugin Bootstrap

• Data atribut : Tambahkan data-toggle="collapse" dan data-target agar mengontrol otomatis pada saat dari elemen yang di sembunyikan. Atribut data-target akan menerima pemilih CSS untuk menerapkan untuk collapse. Pastikan untuk menambahkan class .collapse untuk elemen yang dilipat. Jika ingin elemen pertama default terbuka, termasuk tambahan class .in. Untuk menambahkan manajemen kelompok accordion seperti untuk kontrol dilipat, tambahkan data atribut-parent = "# pemilih".
  
• Javascript : Metode collapse dapat diaktifkan dengan JavaScript seperti contoh berikut ini. $('.collapse').collapse().
  

 

Pilihan dalam membuat collapse plugin Bootstrap

Ada pilihan dalam membuat collapse plugin Bootstrap yang bisa kita gunakan, yaitu melalui atribut data atau JavaScript yang tercantum dalam tabel berikut:

Pilihan nama	Type / nilai awal	Nama data atribut	Keterangan
parent	Selector / default : false	data-parent	Jika nilai false, maka semua elemen collapse di bawah induk ditentukan akan ditutup (mirip dengan tradisional perilaku accordion - ini tergantung pada class accordion-group).
toggle	Boolean / default : true	data-toggle	Matikan unsut lipat.

 

Method

Berikut adalah daftar dari beberapa method yang berguna yang digunakan dengan dalam penggunaan collapse.

Method	Keterangan	Contoh
Options:.collapse(options)	mengaktifkan agar elemen konten dilipat. menerima sebuah Pilihan opsional obyek.	$('#identifier').collapse({ toggle: false })
Toggle:.collapse('toggle')	Untuk menampilkan atau menyembuyikan elemen konten.	$('#identifier').collapse('toggle')
Show:.collapse('show')	Untuk menampilkan elemen konten.	$('#identifier').collapse('show')
Hide:.collapse('hide')	Untuk menyembunyikan elemen konten.	$('#identifier').collapse('hide')

 

Contoh

Berikut ini contoh metode collapse :

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Click me to exapand. Click me again to collapse. Section 1--hide method
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Click me to exapand. Click me again to collapse. Section 2--show method
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Click me to exapand. Click me again to collapse. Section 3--toggle method
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
Click me to exapand. Click me again to collapse. Section 4--options method
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () { $('#collapseFour').collapse({
toggle: false
})});
$(function () { $('#collapseTwo').collapse('show')});
$(function () { $('#collapseThree').collapse('toggle')});
$(function () { $('#collapseOne').collapse('hide')});
</script>

Event

Tabel berikut berisi beberapa event yang dapat digunakan dengan fungsional collaspe : 

 

Event	Keterangan	Contoh
show.bs.collapse	Efek sesudah pemanggilan collapse.	$('#identifier').on('show.bs.collapse', function () { // do something... })
shown.bs.collapse	Efek dimana elemen collapse tampil (transisi CSS).	$('#identifier').on('shown.bs.collapse', function () { // do something... })
hide.bs.collapse	Contoh kapan efek disembunyikan setelah dipanggil.	$('#identifier').on('hide.bs.collapse', function () { // do something... })
hidden.bs.collapse	Efek dimana elemen collapse tak terlihat (transisi CSS).	$('#identifier').on('hidden.bs.collapse', function () { // do something... })

 

Contoh

Contoh berikut menunjukkan penggunaan event:

<div class="panel-group" id="accordion">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseexample">
Click me to exapand. Click me again to collapse. Section --shown event
</a>
</h4>
</div>
<div id="collapseexample" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#collapseexample').on('show.bs.collapse', function () {
alert('Hey, this alert shows up when you expand it');})
});
</script>