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.
Index dosyasının temel yapısı aşağıdaki gibidir.ÖRNEĞİ İNDİR
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>UI ORNEKLER</title> <link rel="stylesheet" type="text/css" href="jquery-ui.css"> <script src="jquery-1.12.1.min.js"></script> <script src="jquery-ui.js"></script> <script src="site.js"></script> </head> <body> </body> </html> |
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
(index.html dosyası body etiketleri arasındaki kod)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="panel"> <h3>BAŞLIK 1</h3> <div> <p> İÇERİK 1 </p> </div> <h3> BAŞLIK 3</h3> <div> <p> İÇERİK 2 </p> </div> <h3> BAŞLIK 3</h3> <div> <p> İÇERİK 3 </p> </div> </div> |
(site.js dosyası)
|
1 2 3 4 5 6 7 8 9 |
/* belge yüklendikten sonra ready metodu çalıştırılacaktır. Çalıma için zorunlu*/ $(document).ready(function(e) { /*id değeri panel olan nesneyi akordiyon yapıyor. Örneğimizdeki etiketi çalıştıran kod*/ $("#panel").accordion(); }); |
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.)
|
1 2 3 |
$("#panel").accordion({active:1});//0. index ilk sekmeyi ifade ediyor |
2.panel açık gelecek ve animasyon süresi 500ms olacak
|
1 2 3 4 5 6 7 |
/*özellikleri eklerken her özellik arasında ,(virgül) olduğunu unutmayın.*/ $("#panel").accordion({ active:1, animate:500 }); |
animasyon süresi 500ms olacak
|
1 2 3 4 5 6 |
/*özellikleri eklerken her özellik arasında ,(virgül) olduğunu unutmayın.*/ $("#panel").accordion({ animate:500 }); |
Başlığına tıkladığında açılacak ve kapanacak, animasyon süresi 500ms ve açık olan sekme 2. sekme olacak
|
1 2 3 4 5 6 7 8 |
/*özellikleri eklerken her özellik arasında ,(virgül) olduğunu unutmayın.*/ $("#panel").accordion({ active:1, animate:500, collapsible: true }); |
Fare üzerine gelince açılacak.(diğer olaylar ile de açmak mümkün)
|
1 2 3 4 5 6 7 8 9 |
/*özellikleri eklerken her özellik arasında ,(virgül) olduğunu unutmayın.*/ $("#panel").accordion({ event: "mouseover", active:1, animate:500, collapsible: true }); |
Başlık sembolünü değiştirme. Yazılabilecek tüm sembolleri için: http://api.jqueryui.com/theming/icons/
|
1 2 3 4 5 6 7 8 |
/*icons özelliğine bir json nesneyi ekleniyor. header->kapalı olan sembol activeHeader ise panel açık olduğunda gösterilecek sembolü ifade ediyor.*/ $("#panel").accordion({ icons: { "header": "ui-icon-pin-w", "activeHeader": "ui-icon-pin-s" }, collapsible: true }); |
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)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$("#panel").accordion({ animate:500, collapsible: true, activate:function(olay,nesne){ //panel açıldıktan sonra çalıştırılacak kodlar. }, beforeActivate: function( olay, nesne ) { //aktif olan akordiyonun index numarasını getirir. var aktifIndex= $("#panel").accordion( "option", "active" ); alert(aktifIndex+". index kapanacak."); }); |
Akordiyon paneline ait bütün özellik, metod ve olaylara ulaşmak için:http://api.jqueryui.com/accordion/
[…] Jquery UI Accordion Panel Kullanımı, akordiyon yapısının kullanımını temel bir şekilde anlatır. […]