UX Rocket Accordion

İç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.

Kurulum

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.accordion

ya da bower

bower install uxrocket.accordion

Geliştirme İçin

Geliş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'

Doğrudan Kullanım İçin

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>

Kullanım

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
    });
});

Notlar

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;
}

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.
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.

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.

uxrocket / uxrocket.accordion