Peraturan ini tentunya akan memakasa kita untuk menciptakan sebuah sistem yang dapat membuka sebuah panel, dan dalam waktu yang bersamaan juga dapat menutup panel lainnya yang masih terbuka:
Langkah Pertama: Buat Elemen dan Desain Tampilan
Di sini Saya membuat kerangka akordion dari elemen<h2>
dan <div class='panel-akordion'>
yang Saya letakkan di dalam wilayah kekuasaan <div id='akordion'> ... </div>
seperti ini:<div id='akordion'>
<h2>Tombol Akordion</h2>
<div class='panel-akordion'>
KONTEN DI SINI
</div>
<h2>Tombol Akordion</h2>
<div class='panel-akordion'>
KONTEN DI SINI
</div>
<h2>Tombol Akordion</h2>
<div class='panel-akordion'>
KONTEN DI SINI
</div>
<h2>Tombol Akordion</h2>
<div class='panel-akordion'>
KONTEN DI SINI
</div>
<h2>Tombol Akordion</h2>
<div class='panel-akordion'>
KONTEN DI SINI
</div>
</div>
Kemudian Saya deklarasikan konsep-konsep tampilan sederhana pada kerangka akordion di atas seperti pemberian warna hijau pada latar belakang, warna putih pada teks dan sebagainya:
#akordion {
padding:0;
}
#akordion h2 {
cursor:pointer;
margin:0;
padding:10px 20px;
background:#344317;
color:#fff;
font:bold 10px Georgia,Serif;
text-transform:uppercase;
}
.panel-akordion {
background:#88AE27;
color:#fff;
padding:10px;
}
Langkah ke Dua: Pemanggilan JQuery
Kamu bisa memakai versi JQuery apa saja, namun Saya sarankan untuk menggunakan JQuery minimal versi 1.3.2 seperti ini:<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
Langkah ke Tiga: Deklarasikan Cara Kerja
Buat sebuah sistem seperti peraturan yang telah Saya katakan di atas:<script type='text/javascript'>
$(document).ready(function() {
$('.panel-akordion').hide();
$('#akordion h2').click(function() {
$('.panel-akordion').slideUp(500);
$(this).next().slideDown(500);
});
});
</script>
Susun semua kode tersebut pada templatemu lalu simpan. Jika kamu sudah terbiasa membedakan kode CSS, JavaScript dan Elemen pasti tahu tempat-tempat yang umum untuk meletakkan kode-kode tersebut.
Pemahaman Lebih Lanjut
Seperti halnya saat membuat slide panel, di sini akan selalu ada dua faktor penting, yaitu menentukan elemen pemicu dan elemen terpicu/elemen yang akan bereaksi. Elemen pemicu Saya buat dari kode<h2>Tombol Akordion</h2>
, sedangkan elemen terpicu (elemen yang akan bereaksi setelah sebuah elemen dikenai perintah) Saya buat dari kode <div class='panel-akordion'>KONTEN DI SINI</div>
Sekarang fokuslah pada kode ini:
$(document).ready(function() {
$('.panel-akordion').hide();
$('#akordion h2').click(function() {
$('.panel-akordion').slideUp(500);
$(this).next().slideDown(500);
});
});
- Kode
$('.panel-akordion').hide();
maksudnya adalah semua elemen<div class='panel-akordion'>KONTEN DI SINI</div>
akan disembunyikan. Perintah ini sangat umum dinyatakan saat kita membangun fungsi dengan JQuery. Selain menggunakan perintah.hide()
, menyembunyikan elemen juga dapat dilakukan dengan mendeklarasikandisplay:none;
dalam kode CSS seperti ini:Metode Penghilangan Elemen dengan JQuery Metode Penghilangan Elemen dengan CSS $('.panel-akordion').hide();
.panel-akordion {
display:none;
} - Kode
$('#akordion h2')
maksudnya adalah JQuery akan menyeleksi elemen<h2>
yang berada di dalam wilayah kekuasaan<div id='akordion'> ... </div>
. Elemen inilah yang Saya maksud sebagai elemen pemicu.
Di depan kode tersebut terdapat perintah.click()
yang maksudnya bahwa#akordion h2
akan membuat "sesuatu" menjadi bereaksi setelah#akordion h2
diklik ("sesuatu" yang dimaksud di sini adalah.panel-akordion
). $('.panel-akordion').slideUp(500);
maksudnya bahwa setelah#akordion h2
diklik, maka.panel-akordion
yang sedang terbuka akan menutup ke atas (.slideUp
) dengan kecepatan 500 milidetik (500
). Dan dalam waktu yang bersamaan juga akan membuka panel berikutnya yang masih tertutup. Perintah ini dinyatakan dalam kode$(this).next().slideDown(500);
.
Elementhis
yang dimaksud di sini adalah#akordion h2
.
0 comments:
Post a Comment