0.5.1 • Published 10 years ago
uxrocket.accordion v0.5.1
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. |