Salah satu kemampuan jQuery UI yang cukup mengesankan ialah wacana begitu mudahnya kita membangun objek hanya dengan menerapkan fungsi pada elemen yang diinginkan. Di sini Saya akan menjelaskan sedikit (atau tidak mengecewakan banyak?) mengenai jQuery UI Accordion.
Dasar Penggunaan
Sebelum menerapkan fungsi .accordion() pada elemen, pertama-tama Anda buat dulu kerangka objeknya yang secara umum diciptakan dari elemen-elemen berupa header, link dan divisi:
<div id='accordion'> <h3><a href='#'>Pemicu 1</a></h3> <div> ... </div> <h3><a href='#'>Pemicu 2</a></h3> <div> ... </div> <h3><a href='#'>Pemicu 3</a></h3> <div> ... </div> </div> <!-- end accordion -->Setelah itu Anda cukup menyeleksi elemen induknya saja kemudian terapkan fungsi .accordion() dan final sudah:
$(function() { $('#accordion').accordion(); });Konfigurasi jQuery UI Accordion
| Opsi | Nilai | Deskripsi |
|---|---|---|
| active | 0, 1, 2, 3, ... | Menentukan panel urutan ke berapa yang akan terbuka ketika pertama kali. Urutan pertama dimulai dari 0. (default: 0) |
| header | "h3" | Tentukan header akordion. Nilainya berupa selektor. (default: otomatis ditentukan oleh script. Elemen pertama akan menjadi header/pemicu dan elemen ke dua akan menjadi panel. Selebihnya akan disusun mengikuti contoh tadi secara otomatis) |
| "div.header" | ||
| fillSpace | true | Pilihan untuk mengatur tinggi akordion biar memenuhi ruangan secara vertikal. (default: false) |
| false | ||
| icons | {header:"nama-ikon-1", headerSelected:"nama-ikon-2"} | Mengubah ikon default dari widget akordion.header dipakai untuk mengubah ikon pada pemicu dalam keadaan normal, headerSelected dipakai untuk megubah ikon pada pemicu yang sedang aktif. (default: header:"ui-icon-triangle-1-e", headerSelected:"ui-icon-triangle-1-s")Lihat semua nama ikon jQuery UI 1.8.16 » |
| autoHeight | true | Pilihan untuk memilih apakah panel-panel akordion akan mengatur tinggi mereka sesuai dengan rata-rata ukuran tinggi terkecil dan ukuran tinggi terbesar atau membiarkan panel mengikuti ukuran konten yang ada di dalamnya. (default: true) |
| false | ||
| event | "mouseover" | Menentukan bagaimana cara Anda membuka panel (default: click)Pelajari event-event dasar jQuery » |
Contoh Penerapan
Membuka Panel ke Empat ketika Awal Pertama Kunjungan
Urutan panel dimulai dari 0. Menentukan pembukaan panel ke empat sama artinya dengan menuliskan nilai active:3
$('#accordion').accordion({active:3});Menciptakan Header dengan Elemen Lain
Header akordion tidak harus selalu dibentuk dengan elemen <h3>. Header juga bisa dibentuk dengan elemen lain. Misalnya menyerupai ini:
<div id='accordion'> <div class='header'><a href='#'>Pemicu 1</a></div> <div> ... </div> <div class='header'><a href='#'>Pemicu 2</a></div> <div> ... </div> <div class='header'><a href='#'>Pemicu 3</a></div> <div> ... </div> </div> <!-- end accordion -->$('#accordion').accordion({header:"div.header"});Opsi ini tolong-menolong tidak begitu penting dituliskan, alasannya ialah script widget accordion sudah bisa menemukan sendiri elemen mana yang akan menjadi header/pemicu dan elemen mana yang akan menjadi panel.
fillSpace:true
Menentukan fillSpace:true akan menciptakan tinggi akordion beradaptasi dengan tinggi elemen induk. Lebar akordion tidak disertakan ke dalam opsi alasannya ialah tanpa JavaScript-pun semua elemen blok secara default akan melebarkan diri sesuai dengan lebar elemen induk:
$('#accordion').accordion({fillSpace:true});autoHeight:false
Menentukan autoHeight:false akan menciptakan tinggi panel akordion beradaptasi dengan konten yang ada di dalamnya. autoHeight:true akan menciptakan tinggi panel akordion beradaptasi dengan tinggi rata-rata tiap panel akordion:
$('#accordion').accordion({autoHeight:false});
Modifikasi Ikon
Caranya sama persis dengan modifikasi ikon pada jQuery UI Button:
$('#accordion').accordion({ icons: { header:"ui-icon-arrowthick-1-e", headerSelected:"ui-icon-arrowthick-1-s" } });
Modifikasi Event
Misalnya, bila Anda menuliskan event:"mouseover" pada braket opsi, maka panel akordion akan terbuka menurut agresi mouseover:
$('#accordion').accordion({event:"mouseover"});