UX Rocket Accordion

İçerikler görütülenirken hareketin geçişi CSS3 transition ile tanımlanmıştır. Eski tarayıcılarda efektsiz olarak çalışmaktadır.

<div class="collapsible">
    <h3 class="collapsible-header"></h3>
    <div class="collapsible-content"></div>
</div>
<div class="collapsible">
    <h3 class="collapsible-header"></h3>
    <div class="collapsible-content"></div>
</div>

Notlar

Aynı ebeveyn içindeki akordiyon elemanlar birbirleri ile etkileşimli olarak çalışırlar. Bir akordiyonun açık gelmesi için current classı eklenmesi yeterlidir.

Tanımlar

Property | Default | Açıklama -------------------- | -------------------- | ------------------------------------------------------------------------ header | .collapsible-header | Akordiyonun açılma/kapanma aksiyonlarını tetikleyen başlık satırı content | .collapsible-content | Akordiyonun içeriği. Metin, tablo, form, resim içerik kısıtlaması yoktur. current | current | Aktif olan akordiyon elemanı için tanımlanan CSS classı. closeSiblings | true | Akordiyon açıldığında, aynı ebeveyn içindeki diğer akordiyonların kapanması ya da açık kalmasını belirler. true değerinde, diğer akordiyonlar kapanır. animateWith | css | css ya da js parametrelerini alır. Akordiyonlar açılıp/kapanırken animasyonun CSS ile mi yoksa JS ile mi olacağını belirler. JS durumunda slideUp/Down şeklinde çalışır. CSS durumunda ise CSS ile tanımlanmış şekilde çalışır. duration | 200 | JS animate kullanırken, animasyon süresini belirler.

Callback |   -------------------- | ----- onReady | Akordiyon plugini elemanlara bağlandığında çalışacak fonksiyonu çağırır. onOpen | Akordiyon elemanı açıldığında çalışacak fonksiyonu çağırır. onClose | Akordiyon elemanı kapandığından çalışacak fonksiyonu çağırır.

Public Metodlar

Method | Açıklama -------------------------------- | ------------------------------------------------------- $(selector).collapsible(options) | Bu method plugini manuel olarak bir elemana bağlamanızı sağlar. $.uxcollapsible | Bu method pluginin detayını görmenizi sağlar. $.uxcollapsible.version | Sayfaya eklenmiş pluginin versiyon numarasını gösterir. $.uxcollapsible.settings | Aktif pluginin ayarlarını gösterir.