Cuma , 21 Temmuz 2017
Anasayfa » JavaScript » Jquery UI Accordion Paneli
JQUERY ACCCORDION PANEL
JQUERY ACCCORDION PANEL

Jquery UI Accordion Paneli

Jquery UI kütüphanesi etkileşimli web projeleri için  hazır nesneler etkin birşekilde kullanma şansı veren güçlü bir kütüphanesir.

Bu kütüphane ile hazır Accordion, tab, tarih, tooltip , efectler kullanmak mümkündür.  Kütüphanede kullanılan nesnelerden bir kaç tanesini önem sırasına göre(benim sıralamam) bu makalede açıklayacağım.

 

Örneğin yanındaki linke tıklayarak çalışan uygulamayı indirebilirsiniz.

Kütüphane kullanımına geçmeden önce ilk yapılması gerekenleri madde madde yazıyorum.

1.jquery kütüphanesini projenize dahil edin.(indirmek için tıkla)

2. jquery ui kütüphanesini projenize dahil edin.(indirmek için tıkla)

3.jquery ui kütüphanesi ile birlikte indirdiğiniz. ui css kütüphanesini projenize dahil edin.

4. kütüphane ile birlikte indirdiğiniz images klasörünü projenize dahil edin. Unutmayın resimleriniz görünmüyorsa, css dosyası resimleri aradığı yolda bulamamıştır.

Bizim örneğimiz için dosya dizi yapısı aşağıdaki gibi olması gerekecektir.

 

jquery-ui-1

Index dosyasının temel yapısı aşağıdaki gibidir.ÖRNEĞİ İNDİR

 

1.Accordion Panel

Temel bir acordiyon yapısı açılıp kapanan panelleri ifade etmektedir. her bir panel başlığı altındaki içerik bölümünü açıp kapatmak için kullanılır.

Her hangi ek kod eklenemeden kullanılırsa h3 etiketi panel başlığını  h3 etiketinin hemen altındaki div ise bu panele ait olan içeriği ifade etmektedir. Bu şekilde diğer panel başlığı ve içeriği şeklide devam etmektedir. Bu panelin sarmalaması içinde en dışa id değerini jquey ile kullanacağımız bir div tanımlanır.

Örnekte akordiyon olacak div’e panel kimliğini verdim.Çalışmanın Kodlarını İndir

ui-02

 

(index.html dosyası body etiketleri arasındaki kod)

 

(site.js dosyası)

Akordiyon panelini kendi isteğimize göre kişiselleştirebiliriz. accordiyon() metoduna javascript objesi şeklide property yada metodları tanımlayarak kişiselleştirmemiz mümkün.

İşte bu bir kaç özellik ve bu özelliklerin kullanımları;

Özellikleri üzerine ekleyerek hazırlayacağım. İstenildiğinde diğer özellikler çıkartılıp eklenebilir.

Açık olacak paneli seçme(site.js dosyasındaki accordion metodunu aşağıdaki şekilde güncellediğinizde 2. sekme açık gelecektir.)

2.panel açık gelecek ve animasyon süresi 500ms olacak

animasyon süresi 500ms olacak

 

Başlığına tıkladığında açılacak ve kapanacak, animasyon süresi 500ms ve açık olan sekme 2. sekme olacak

 

Fare üzerine gelince açılacak.(diğer olaylar ile de açmak mümkün)

Başlık sembolünü değiştirme. Yazılabilecek tüm sembolleri için: http://api.jqueryui.com/theming/icons/

Çalışmanın Kodlarını İndir

 

Başlıca kullanılan örneklerden sonra bazı olayları da açıklayalım. Ui olayları gerçekleştiğinde ona iliştirilmiş olan metod çalıştırılacaktır. Çalıştırılan metod(fonksiyon) iki tane parametre alır. 1.paremetre olayı(event) ikinci parametre ilgili nesneyi(ui) ifade etmektedir.

 

akordiyonda paneller arası geçiş yapıldığında(activate)

$(“#panel”).accordion({
animate:500,
collapsible: true,
activate:function(olay,nesne){

//eski panelin içindeki yazı .oldHeader ile başlığa da ulaşmak mümkün
alert(nesne.oldPanel.html());

//açılan panelin içindeki yazı newHeader ile başlığa da ulaşmak mümkün
alert(nesne.newPanel.html());

}
});

Akordiyon panelleri arasında geçiş yapılmadan önce(beforeActivate)

Çalışmanın Kodlarını İndir

 

 

 

 

 

 

 

Akordiyon paneline ait bütün özellik, metod ve olaylara ulaşmak için:http://api.jqueryui.com/accordion/

ui-03

Hakkında Hayri

İlginizi Çekebilir

JQuery UI Tabs Menü Kullanımı

Bu örneğimizde JQuery’nin Ui eklentisini kullanarak Tabs Menü yapacağız. İlk olarak JQuery’nin sayfasından, JQuery ve …

Bir Cevap Yazın

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