Anasayfa / Genel / jQuery Accordion Kullanma

jQuery Accordion Kullanma

ACCORDİON

Sınırlı miktarda alana bilgi sunmak için katlanabilir içerik panellerini görüntüler.

◊Options

active Kullanımı:

♦Tür: Boole veya Tamsayı

♦Varsayılan: 0

Şu anda hangi panel açık.

°Boolean: Aktif’i false olarak ayarlamak tüm panelleri daraltır. Bu, collapsible seçeneğin doğru olmasını gerektirir.

°Integer: Panelin sıfır tabanlı indeksi aktif (açık). Negatif bir değer, son panelden geriye doğru giden panelleri seçer.

♦Kod örnekleri:

Akordeon belirtilen aktif seçenekle başlatmak için;

animate kullanımı:

♦Tür:  Boolean  veya  Number  veya  String  veya Object

♦Varsayılan: {}

Panel değiştirme hareketini yapmak için kullanılır.

♦Kod örnekleri:

Akordeon belirtilen animasyon seçeneği ile başlatmak için;

 

classes kullanımı:

♦Tür:  Object

♦Varsayılan:

$( “.selector” ).accordion({

classes: {

“ui-accordion”: “highlight”

}

});

♦Kod örnekleri:

Widget öğelerine eklemek için ek sınıflar belirtin. Tema bölümünde belirtilen sınıfların herhangi biri, değerlerini geçersiz kılmak için anahtar olarak kullanılabilir.

 

 

∴ collapsible kullanımı:

♦Tür:  Boolean

♦Varsayılan: false

Tüm bölümlerin bir defada kapatılıp kapatılamayacağı. Etkin bölümün daraltılmasına izin verir.

♦Kod örnekleri:

Akordeon, belirtilen katlanabilir seçenekle başlatmak için;

 

∴ disabled kullanımı:

♦Tür:  Boolean

♦Varsayılan: false

True olarak ayarlanırsa akordeon devre dışı bırakır.

♦Kod örnekleri:

Akordeon, belirtilen devre dışı seçeneği ile başlatmak için;

 

 event kullanımı:

♦Tür:   String

♦Varsayılan: “click”

İlgili paneli etkinleştirmek için akordeon başlıklarının tepki vereceği olay. Birden fazla olay belirlenebilir, bir boşlukla ayrılabilir.

♦Kod örnekleri:

Akordeon belirtilen etkinlik seçeneğiyle başlatmak için;

 

 

  header kullanımı:

♦Tür:  Selector

♦Varsayılan: “> li > :first-child,> :not(li):even”

Ana eleman için seçici, ana akordeon elemanında .find () ile uygulanır. İçerik panelleri, ilişkili üstbilgilerden hemen sonra kardeş olmalıdır.

♦Kod örnekleri:

Akordeon belirtilen başlık seçeneği ile başlatmak için;

 

∴ heightStyle kullanımı:

♦Tür:  String

♦Varsayılan: “auto”

Akordeon ve her panelin yüksekliğini kontrol eder.

♦Kod örnekleri:

Akordeon belirtilen heightStyle seçeneği ile başlatmak için;

∴ icons kullanımı :

♦Tür:  Object

♦Varsayılan:

{

“header”: “ui-icon-triangle-1-e”,

“activeHeader”: “ui-icon-triangle-1-s”

}

Üstbilgiler için kullanılacak simgeler, jQuery UI CSS Framework tarafından sağlanan bir simge eşleşir. Hiçbir simge görüntülenmeyecek şekilde false olarak ayarlayın.

 

♦Kod örnekleri:

Akordeon belirtilen simge seçeneği ile başlatılır.

 

 

 

Methods

destroy() metodu:

Akordeon fonksiyonunu tamamen kaldırır. Bu, öğeyi varsayılan durumuna geri döndürür.

Bu yöntem herhangi bir bir şeyin doğruluğu kabul etmez.

 

♦Kod örnekleri:

Yok etme yöntemini çağırmak için;

 

 

 disable() metodu:

Akordeonu devre dışı bırakır.

Bu yöntem herhangi bir şeyin doğruluğunu kabul etmez.

♦Kod örnekleri:

Engelleme yöntemini çağırmak için;

 

enable() metodu:

Akordeonu devre dışı bırakır.

Bu yöntem herhangi bir şeyin doğruluğunu kabul etmez.

♦Kod örnekleri:

Devre dışı bırakma yöntemini çağırmak için;

 

 

instance() metodu:

Akordeon örneğini alır. Öğenin ilişkilendirilmiş bir örneği yoksa, tanımsız döndürülür.

Diğer widget yöntemlerinin aksine, instance (), akordeon eklentisi yüklendikten sonra herhangi bir öğe için güvenlidir.

 

♦Kod örnekleri:

Örnek yöntemini çağırmak için;

 

 

 

option( optionName ) metodu:

Belirtilen optionName ile ilişkilendirilmiş olan değeri alır.

♦Kod örnekleri:

Yöntemi çağırmak için;

 

option() metodu:

Geçerli akordeon seçenekleri karmasını temsil eden anahtar / değer çiftlerini içeren bir nesneyi alır.

♦Kod örnekleri:

Yöntemi çağırmak için;

 

refresh() metodu:

Doğrudan DOM’a eklenen veya kaldırılan tüm başlık ve panelleri işleyin ve akordeon panellerinin yüksekliğini yeniden hesaplayın. Sonuçlar içeriğe ve heightStyle seçeneğine bağlıdır.

♦Kod örnekleri:

Yenileme yöntemini çağırmak için;

widget() metodu:

accordion içeren jQuery nesnesini döndürür.

 

♦Kod örnekleri:

Widget yöntemini çağırmak için;

 

 

Events

 

activate( event, ui ) metodu:

Bir panel etkinleştirildikten sonra tetiklenir (animasyon tamamlandıktan sonra).Akordeon daha önce daraltılmışsa, ui.oldHeader ve ui.oldPanel boş jQuery nesneleri olacaktır.Akordeon daraltılırsa, ui.newHeader ve ui.newPanel boş jQuery nesneleri olacaktır.

º event;

 Tür: Event

 

º ui;

Tür: Object

 

º newHeader;

Tür: jQuery

Sadece aktif olan başlık kullanmak için.

 

º newPanel;

Tür: jQuery 

Yeni etkinleştirilen panel olarak kullanmak için.

 

º oldPanel

Tür:  jQuery

Sadece devre dışı bırakılan panel olarak kullanmak için.

 

♦Kod örnekleri:

Akordeon belirtilen aktif geri çağırma ile başlatmak için;

Accordion etkinleştirme olayına bir olay dinleyicisi bağlamak için;

 

 

beforeActivate( event, ui )  metodu;

Bir panel etkinleştirilmeden önce doğrudan tetiklenir. Panelin etkinleşmesini önlemek için iptal edilmelidir. Akordeon şu anda daraltılmışsa, ui.oldHeader ve ui.oldPanel boş jQuery nesneleri olacaktır. Akordeon daraltılırsa, ui.newHeader ve ui.newPanel boş jQuery nesneleri olacaktır.

 

º event

Tür: Event

 

º ui

Tür: Object

 

º  newHeader

Tür: jQuery

Etkinleştirmek üzere olan başlık kullanmak için.

 

º   oldHeader

Tür: jQuery

Devre dışı bırakılacak olan başlık kullanmak için.

 

º newPanel

Tür: jQuery 

Etkinleştirilecek olan panel kullanmak için.

 

º oldPanel

Tür: jQuery

Devre dışı bırakılacak olan panel olarak kullanmak için.

 

Kod örnekleri:

Akordeon, belirtilen geri çağırma ile başlatmak için;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

About Cemre Uysal

Bunu da incele

MEB SERTİFİKA KURULUMU

MEB Sertifikası Yükleme Nasıl Yapılır?  MEB SERTİFİKASI NASIL YÜKLENİR   MEB Sertifika indirmek için ilk …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

%d blogcu bunu beğendi: