JavaScript Jquery

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 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 etiketleri arasına JQuery-ui’nin css dosyalarının yollarını yazarak bağlıyoruz.

 

Body etiketlerinin arasında da JQuery-ui’nin javascript dosyalarını bağlıyoruz.

 

HTML: İlk olarak bir div etiketi açıyoruz. Sekmeli menü oluşturacağımız için buna bir class veya id veriyoruz. Sekmeleri kontrol etmek için ‘ul’ etiketi açıyoruz. ‘li’ etiketlerinin içerisine ‘a’ etiketi açıyoruz ve sekmelerin isimlerini yazıyoruz.

Daha sonra her bir sekme için ayrı div açıyoruz ve ‘a’ etiketlerine bu divlerin id’lerini veriyoruz. Böylece başlıklardan birine basıldığında link verdiğimiz div açılacak.

 

JQuery: Yazdıklarımızı tabs menüsüne dönüştürmek için sayfa yüklendikten sonra çalışacak fonksiyonun içerisine tabs menüsünün fonksiyonunu yazıyoruz. İlk açtığımız div etiketinin class/id sini yazarak belirtilen divi seçiyoruz. ‘.tabs’ ile de jquery’nin bağlanan dosyalarından ilgili fonksiyonu çektik.

 

Tabs menüsünde kullanılan birkaç özelliğe bakalım;

İlk olarak kullanacağımız özellik ‘active’ özelliği. Sayfa açıldığında aktif olan sekmeyi ifade ediyor. (İlk sekme için 0(sıfır) değeri kullanılır.) Buna ek olarak ‘collapsible’ yani katlanabilirlik özelliğini ekliyorum. Bu özelliğin varsayılan değeri ‘false’tur. Yani sekmelerden bir tanesi daima açık kalır. ‘False’ değerini ‘True’ yaptığımızda bütün sekmeleri kapatabiliriz.

 

Bir diğer özelliğimiz ‘hide’ özelliği sadece kaybolurken oluşacak geçiş animasyonlarını ayarlamak için kullanılır. İçerisine iki ayrı değer yazılır. İlki ‘effect’ yani kaybolurken oluşacak animasyondur. ‘Duration’ ise animasyonun süresini ayarlamak için kullanılır.

‘Show’ özelliği ise açılırken oluşacak geçiş animasyonları ayarlamak için kullanılır. İçerisine ‘hide’ ile aynı değerleri alır.

 

Son olarak ekleyeceğim özellik ise ‘disabled’. Yani pasif özelliği. Kodlara bakıldığında aktif olan sekme 2. Sekme. Sadece sayfa açıldığında görünmesini daha sonra seçilememesini sağlayalım.

 

Daha çok Tabs Menü özelliğine şu linkten ulaşabilirsiniz;

http://jqueryui.com/tabs/

 

Kodları toparlayacak olursak şu şekilde olacaktır;

Yorum Yap