İçeriklerin açılır/kapanır şekilde gözükmesini sağlar. Açılıp/kapanma için CSS ya da JS animasyonları seçilebilir. Overwrite ihtiyacının azaltılması için, plugin stilleri içinde sadece açma/kapama işlemleri için ihtiyaç duyulan tanımlar bulunmaktadır.
UX Rocket Accordion'u ihtiyacınıza göre dist klasöründeki dosyaları projenizin içerisine kopyalayarak ya da lib klasöründeki kaynak kodlarını projenize ekleyerek kullanmaya başlayabilirsiniz. Ya da, npm veya bower paket olarak kullanabilirsiniz. Bunun için, aşağıdaki komutları çağırmanız yeterlidir.
npm
npm install uxrocket.accordionya da bower
bower install uxrocket.accordionGeliştirme sırasında sisteminize doğrudan ekleyerek kullanmak için, lib klasörü içindeki kaynak dosyalarını Sass ve JS dosyalarınızın içerisine import gerekmektedir.
// styles.scss
// Plugin stilleri
@import "<path-to-accordion>/lib/_uxrocket-accordion";
// Sonra kendi stilleriniz// app.js
// Grunt ya da Gulp kullanıyorsanız JS içerisine import etmeniz gerekmiyor.
// Codekit ve benzeri araçlar için.
// @codekit-append '<path-to-accordion>/lib/uxrocket.accordion.js'HTML nizin içinde jQuery'den sonra uxrocket.accordion.min.js dosyasını ekleyiniz ve head içine
<head>
...
<link rel="stylesheet" href="<path-to-accordion>/dist/uxrocket.accordion.min.css" />
<script src="<path-to-jquery>/jquery.js"></script>
<script src="<path-to-accordion>/dist/uxrocket.accordion.min.js"></script>
...
</head>Elemanların birbirleri ile etkileşimi ve açılma/kapanma işlemleri için minimum HTML yapısı aşağıdaki gibidir.
<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>Yukarıdaki gibi HTML yapısını oluşturduktan sonra JavaScript içerisinde plugini aşağıdaki gibi çağırabilirsiniz.
$(function(){
// standart
$('.collapsible').collapsible();
// özelleştirilmiş
$('.collapsiple').collapsible({
closeSiblings: true
});
});Bir Elemanı Başlangıçta Açık Getirme
Aynı ebeveyn içindeki akordiyon elemanlar birbirleri ile etkileşimli olarak çalışırlar. Bir akordiyonun açık gelmesi için uxr-collapsible-current classı eklenmesi yeterlidir.
İç içe Akordiyon
Akordiyon elemanları çalışırken her zaman > şeklinde seçilen ilk seviye header ve content olarak belirlenmiş elemanları kontrol etmektedir. Dolayısı ile bir content içine tanımlanacak yukarıdaki örnekte belirtilen yapıda istenildiği kadar iç içe akordiyon oluşturulabilir.
Yana Açılır Akordiyon
Bazı durumlarda akordiyon elemanların alta doğru değil de yana doğru açılması istenebilir. JS Animasyon kullanıldığı durumlarda bunu slideUp/Down metodları kullanıldığı için yana doğru açmak kolayca mümkün olmayacak. Dilenirse, yana açmak istenen elemanların runtime sırasında animate metodu overwrite edilebilir. CSS Animasyon kullanıldığı durumlarda ise, kolayca aşağıdaki yöntem izlenebilir
.uxr-collapsible-animateCSS > .uxr-collapsible-content {
width: 0;
}
.uxr-collapsible-current.uxr-collapsible-animateCSS > .uxr-collapsible-content {
width: auto;
}| 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. |
| closeSiblings | false | 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/slideDown ş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. |
| waitOnOpen | Akordiyon elemanına tıklandığında init olur ve fonksiyonun true dönmesini bekler. |
| Event | |
|---|---|
| uxrexpanded | Bir uxr-collapsible-node elemanı açıldığında, bu eleman üzerinde trigger metodu ile çalışan event tir. Plugin bind olurken yapılan onOpen callbacki de bu event ile çalışmaktadır. |
| uxrcollapsed | Bir uxr-collapsible-node elemanı kapandığında, bu eleman üzerinde trigger metodu ile çalışan event tir. Plugin bind olurken yapılan onClose callbacki de bu event ile çalışmaktadır. |
| 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. |