Skip to content

uxrocket/uxrocket.accordion

Repository files navigation

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.