Plugin
/** * Simple jQuery Accordion Plugin * Author: Taufik Nurrohman * Date: 8 June 2012 * https://plus.google.com/108949996304093815163/about */ (function($) { $.fn.accordion = function(settings) { settings = jQuery.extend({ active: 1, sUpSpeed: 400, sDownSpeed: 400, sUpEasing: null, sDownEasing: null }, settings); return this.each(function() { var $this = $(this), $item = $this.children('div[data-header]'), activePanel = settings.active - 1; $item.each(function() { $(this).hide().before('<h2 class="accordion-header">' + $(this).data('header') + '</h2>'); }); $this.children('div:eq(' + activePanel + ')').show().prev().addClass('active'); $this.find('.accordion-header').on("click", function() { $this.children('h2').removeClass('active'); $item.slideUp(settings.sUpSpeed, settings.sUpEasing); $(this).addClass('active').next().slideDown(settings.sDownSpeed, settings.sDownEasing); }); }); }; })(jQuery);Dasar Penggunaan
Cara menggunakannya sama dengan plugin jQuery UI Accordion. Hanya saja Saya mencoba menyederhanakan kerangka dan opsinya untuk kebutuhan skala kecil.
Pertama-tama buat kerangka HTML menyerupai ini:
<div id="accordion"> <div data-header="Accordion Title 1">Content 1</div> <div data-header="Accordion Title 2">Content 2</div> <div data-header="Accordion Title 3">Content 3</div> <div data-header="Accordion Title 4">Content 4</div> </div>Setiap nama header akordion disimpan di dalam atribut data-header. Plugin di atas nantinya akan memindahkan/menyalin nilai atribut tersebut untuk disisipkan ke dalam elemen <h2> yang akan diciptakan secara otomatis.
Berikutnya yaitu arahan CSS dasar untuk membuat dimensi akordion seperlunya. Silakan dimodifikasi sendiri:
#accordion { width:300px; background-color:green; border:2px solid black; } #accordion h2.accordion-header { cursor:pointer; background-color:black; font:bold 12px Arial,Sans-Serif; color:white; padding:10px 15px; margin:0px 0px; } #accordion h2.active { background-color:yellow; color:black; } #accordion div[data-header] { padding:10px; }Seleksi elemen induk pada kerangka yang Anda buat kemudian terapkan plugin .accordion():
$(function() { $('#accordion').accordion(); });Pengaturan Lanjutan
Ada lima buah opsi yang Saya buat untuk pengaturan tingkat lanjut:
$(function() { $('#accordion').accordion({ active: 1, sUpSpeed: 400, sDownSpeed: 400, sUpEasing: null, sDownEasing: null }); });| Opsi | Keterangan |
|---|---|
| active | Digunakan untuk memilih panel yang akan terbuka ketika pertama kali. Nilai 1 mempunyai arti bahwa panel pertama akan terbuka |
| sUpSpeed | Digunakan untuk memilih kecepatan penutupan panel |
| sUpSpeed | Digunakan untuk memilih kecepatan pembukaan panel |
| sUpEasing | Digunakan untuk memilih tipe easing panel ketika panel menutup (misal: "easeOutBounce") |
| sDownEasing | Digunakan untuk memilih tipe easing panel ketika panel membuka. |