Konfigurasi jQuery UI Accordion

Tabel Konten
  1. Dasar Penggunaan 
  2. Konfigurasi jQuery UI Accordion 
  3. Contoh Penerapan 
    1. Membuka Panel ke Empat saat Awal Pertama Kunjungan 
    2. Menciptakan Header dengan Elemen Lain 
    3. fillSpace:true 
    4. autoHeight:false 
    5. Modifikasi Ikon 
    6. Modifikasi Event 

Salah satu kemampuan jQuery UI yang cukup mengesankan adalah tentang begitu mudahnya kita membangun objek hanya dengan menerapkan fungsi pada elemen yang diinginkan. Di sini Saya akan menjelaskan sedikit (atau lumayan 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 selesai sudah:

$(function() {
    $('#accordion').accordion();
});

Lihat Demo


Konfigurasi jQuery UI Accordion 

OpsiNilaiDeskripsi
active0, 1, 2, 3, ...Menentukan panel urutan ke berapa yang akan terbuka saat 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 pola tadi secara otomatis)
"div.header"
fillSpacetruePilihan untuk mengatur tinggi akordion agar memenuhi ruangan secara vertikal. (default: false)
false
icons{header:"nama-ikon-1", headerSelected:"nama-ikon-2"}Mengubah ikon default dari widget akordion.header digunakan untuk mengubah ikon pada pemicu dalam keadaan normal, headerSelected digunakan 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 »
autoHeighttruePilihan untuk menentukan 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 saat Awal Pertama Kunjungan 

Urutan panel dimulai dari 0. Menentukan pembukaan panel ke empat sama artinya dengan menuliskan nilai active:3

$('#accordion').accordion({active:3});

Lihat Demo

Menciptakan Header dengan Elemen Lain 

Header akordion tidak harus selalu dibuat dengan elemen <h3>. Header juga bisa dibuat dengan elemen lain. Misalnya seperti 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 sebenarnya tidak begitu penting dituliskan, karena 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 membuat tinggi akordion menyesuaikan diri dengan tinggi elemen induk. Lebar akordion tidak disertakan ke dalam opsi karena tanpa JavaScript-pun semua elemen blok secara default akan melebarkan diri sesuai dengan lebar elemen induk:

$('#accordion').accordion({fillSpace:true});

Lihat Demo

autoHeight:false 

Menentukan autoHeight:false akan membuat tinggi panel akordion menyesuaikan diri dengan konten yang ada di dalamnya. autoHeight:true akan membuat tinggi panel akordion menyesuaikan diri dengan tinggi rata-rata tiap panel akordion:

$('#accordion').accordion({autoHeight:false});
jQuery UI Accordion
Opsi autoHeight pada UI Accordion

Lihat Demo

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"
    }
});
jQuery UI Accordion
Kustomisasi Ikon pada Pemicu Panel Akordion

Lihat Demo Lihat Daftar Ikon

Modifikasi Event 

Misalnya, jika Anda menuliskan event:"mouseover" pada braket opsi, maka panel akordion akan terbuka berdasarkan aksi mouseover:

$('#accordion').accordion({event:"mouseover"});

Lihat Demo

5 Komentar

  • Unknown

    masa allah.... tambah mummet aku,, artikelmu muuuantep tenan bro...dadi ngelu sirahku iki
    wes lah ra popo seng penting hepi....
    maju trus bro..semoga sukses jaya adil dan makmur slamanya ya..
    serta segala amal perbuatanmu langsung di ACC...!!!

  • Taufik Nurrohman

    "maju trus bro..semoga sukses jaya adil dan makmur slamanya ya..
    serta segala amal perbuatanmu langsung di ACC...!!!"

    @ANGGA CAH PARE: Amin mas... Amiiinnn....

  • orange.net

    ketemu lagi sama saya mas,, ^_^
    nanya ya?
    kmaren saya buat tampilan accordion dari tutor http://hompimpaalaihumgambreng.blogspot.com/2012/02/add-active-state-to-jquery-accordion.html
    takut link'a ilang "add-active-state-to-jquery-accordion"
    kl saya mo nambahin autoHeight:false, penempatan kode'a disebelah mana ya mas?
    saya dah utak atik ga berhasil,, :'(
    terimakasih,, :)
    mudah2an ga bosen dengan coment saya yg hanya bisa bertanya-tanya,,

  • Taufik Nurrohman

    @orange.netHahaha... masnya sih salah tempat. JQuery UI itu plugin, sedangkan posting yang judulnya add-active-state-to-jquery-accordion itu menjelaskan tentang cara membuat akordion secara manual. JQuery UI sebenarnya isinya juga begitu, cuma akhirnya dibuat otomatis dan ditambahi berbagai pengaturan. Intinya sih, secara normal opsi autoHeight:false itu tidak perlu diterapkan karena panel akordion yang dibuat secara manual memiliki tinggi apa adanya. Kecuali untuk konsep autoHeight:true kita tinggal menentukan tinggi yang spesifik pada panel kemudian tambahkan deklarasi overflow:auto:

    .classname {
    height:200px;
    overflow:auto;
    }

    Justru semakin banyak pertanyaan dan jawaban, blog akan menjadi lebih hidup dan tampak ada penghuninya.

  • orange.net

    @Taufik Nurrohman
    ups,, maap kl salah tempat,,
    hehe,,
    udah di terapin mas,,
    berhasil,, horayyyy,, :D
    terimakasih hompimpaalaihumgambreng,,
    i luph u poll dah,, :P

Komentar telah ditutup.