JQuery Accordion Panel – Web Tasarım & Programlama
Javascript Jquery

JQuery Accordion Panel

Bu örneğimizde JQuery’nin Ui eklentisini kullanarak Accordion Panel yapacağız.

İlk olarak JQuery’nin sayfasından, JQuery ve JQuery-Ui eklenti dosyalarını indiriyoruz.  ui.css ve theme.css dosyalarını çalışma klasörünün içerisindeki eklenti klasörünün içerisine kopyalıyoruz.

Dosyaların ağaç yapısı şu şekilde olacaktır;

Head etiketlerinin arasına ui.css ve theme.css dosyalarını ekliyoruz.

Body etiketlerinin arasına da ilk olarak JQuery dosyasını daha sonra JQuery-ui dosyasının yolunu yazarak çalışma dosyamıza ekliyoruz. Varsa kendi JavaScript dosyamızı en sona ekliyoruz. Ben burada harici yerine dahili kullandığım için eklemiyorum.
HTML: Accordion panelini oluşturmak için ilk olarak bir div oluşturuyoruz. Daha sonra h3 etiketiyle başlıkları oluşturuyoruz.  Son olarak bir div daha oluşturarak içerisine p etiketi açıyoruz ve yazılarımızı yazıyoruz. İki div açmamızın sebebi ise ilk açtığımız div genel olarak accordion panelini gösteriyor. Açılma olaylarını bu divden kontrol edeceğiz. İkinci div ise yazıların bulunduğu bölüm için.
JQuery: İlk olarak sayfa yüklendikten sonra çalışması için .ready olayını kullanılıyoruz. Daha sonra ilk divin id’sini alarak ‘accordion’ özelliğini yazıyoruz. Bu şekilde ön izleme yapıldığında panel oluşacaktır.
Birkaç düzenleme ve ekleme yapalım. Öncelikle Sayfa yüklendiğinde açılan pencerelerden en alttakinin aktif olmasını sağlayalım. Bunun için accordion özelliğinin parantezleri içerisine çalışacak kodlarımızı yazıyoruz. Kullanacağımız kod ‘active’. Açılan açıklamaların sıralaması 0(sıfır)’dan başlamaktadır. Yani en alttaki pencere 2 olarak algılanıyor.
Bir diğer özelliğimiz ‘animate’. Pencerelerin açılma süresini buradan ayarlıyoruz.
Pencerelerin hepsinin kapanabilmesini sağlamak için ise ‘collapsible’ özelliğini kullanıyoruz. ‘true’ ve ‘false’ olarak iki değer alabilen ‘collapsible’, ‘true’ değerini aldığında pencereleri istediğimiz gibi kapatabiliriz. ‘false’ değerini aldığında ise pencerelerden bir tanesi sürekli açık durmaktadır. ‘false’ değeri varsayılan değerdir.
Bu örneğimizde göstereceğim son özellik ‘event’ özelliği. Varsayılan değeri ‘click’ yani tıklamadır. İstersek bunu ‘mouseover’ yapabiliriz. Böylece üzerine geldiğimizde tıklama olayını gerçekleştirmeden pencereler açılacaktır.

 

Daha çok Accordion özelliğine şu linkten ulaşabilirsiniz;

http://api.jqueryui.com/accordion/

 

Yorum yap

Sayfamızı YouTube'da da takip etmek ister misiniz?
Holler Box