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.
|
1 2 3 4 |
<link href="eklenti/jqueryUi/jquery-ui.min.css" rel="stylesheet"> <link href="eklenti/jqueryUi/jquery-ui.theme.min.css" rel="stylesheet"> |
Body etiketlerinin arasında da JQuery-ui’nin javascript dosyalarını bağlıyoruz.
|
1 2 3 4 |
<script src="js/jquery-1.11.1.min.js"></script> <script src="eklenti/jqueryUi/jquery-ui.min.js"></script> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="sekme"> <ul> <li><a href="#sekme1">Web Tasarım</a></li> <li><a href="#sekme2">Veritabanı</a></li> <li><a href="#sekme3">Grafik Animasyon</a></li> </ul> <div id="sekme1"> <p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir.</p> </div> <div id="sekme2"> <p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir.orem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p> </div> <div id="sekme3"> <p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir.Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.</p> </div> </div> |
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.
|
1 2 3 4 5 |
$(function(){ $(".sekme").tabs({}); }); |
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.
|
1 2 3 4 5 6 7 8 |
$(function(){ $(".sekme").tabs({ active:1, collapsible:true }); }); |
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.
|
1 2 3 4 5 6 7 8 9 10 |
$(function(){ $(".sekme").tabs({ active:1, collapsible:true, hide:{effect:"fadeOut", duration:800}, show:{effect:"fadeIn", duration:800} }); }); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function(){ $(".sekme").tabs({ active:1, collapsible:true, hide:{effect:"fadeOut", duration:800}, show:{effect:"fadeIn", duration:800}, disabled:[1] }); }); |
Daha çok Tabs Menü özelliğine şu linkten ulaşabilirsiniz;
Kodları toparlayacak olursak şu şekilde olacaktır;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JQuery Tabs Paneli</title> <link href="eklenti/jqueryUi/jquery-ui.min.css" rel="stylesheet"> <link href="eklenti/jqueryUi/jquery-ui.theme.min.css" rel="stylesheet"> </head> <body> <div class="sekme"> <ul> <li><a href="#sekme1">Web Tasarım</a></li> <li><a href="#sekme2">Veritabanı</a></li> <li><a href="#sekme3">Grafik Animasyon</a></li> </ul> <div id="sekme1"> <p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir.</p> </div> <div id="sekme2"> <p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir.orem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.</p> </div> <div id="sekme3"> <p>Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir.Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.</p> </div> </div> <script src="js/jquery-1.11.1.min.js"></script> <script src="eklenti/jqueryUi/jquery-ui.min.js"></script> <script> $(function(){ $(".sekme").tabs({ active:1, collapsible:true, hide:{effect:"fadeOut", duration:800}, show:{effect:"fadeIn", duration:800}, disabled:[1] }); }); </script> </body> </html> |
Selamlar, çok güzel anlatım olmuş öncelikle bunun için teşekkür ederim. Bir sorum olacak. Ben bu eklentiyi kendi temamda kullanıyorum ancak sekmelere id olarak “tabs-1, tabs-2 vs.” bunlar haricinde bir id eklediğimde ve tıkladığımda sayfayı en üste gönderiyor ancak bunları kullandığımda olduğu yerde kalıp sekmeleri değiştiriyor yani sorunsuz çalışıyor. Umarım anlatabilmişimdir. Nasıl bir çözüm yolu izlemem gerekir yardımcı olur musun?
[…] […]