Bu yazımızda, jQuery ile tab’lı uygulamalar nasıl geliştirebileceğinizi anlatmaya çalışacağım.
Öncelikle kodlamada kullanacabileceğiniz herhangi bir editör açarak, kodları yazmaya başlayarabiliriz! Bu iş için ben Dreamweaver programını kullandım. Yaptığımız çalışmanın çalışan örneği için BURAYI tıklayabilirsiniz. Şimdi tab içeriğini ekleyeceğimiz bir ana tablo oluşturalım;
Stil kodları;
NOT: ana tabloda kullanıcağımız stiller, değişkendir ve düzenlenebilir.
Şimdide sırasıyla bu tablomuzun içini doldurmaya başlıyoruz. İlk önce tablarımızı atayalım. Tablarımızıda ayrı bir tabloya alalımki n’olur, n’olmaz! Ekstra ayrı stil kullanabiliriz;
Tab – 2
Tab – 3
Örnekteki tablara verdiğimiz stillerde bunlar;
.tab span { cursor:pointer; color:#999; background:#f2f2f2 url(tab-arkaplan.jpg) repeat-x left bottom; padding:5px 8px; font-weight:bold; font-size:16px; margin-left:10px; /*Buradan*/-moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
Tab – 2
Tab – 3
Evet. Tablarımızı yerleştirmemiz bitti. Şimdide sıra bu tablar tıklanınca gösterilecek içeriklere geldi. İçerikleride yine ayrı bir tablo içine alıyoruz. Çünkü; hem stil açısından tek bir tablo kullanmış olucağız, hemde içerik geçişlerinde efekt sadece tablo içindeki içeriğe uygulanacak.
Şimdi bu kodlardı koyup kullanmaya başlarsak! Tüm tablolarımız gözükücek. Sonuçda aktif olan tablo ve içerikleri dışında diğerlerinin saklanıp daha sonra bize “cii” yapması lazım. Onun içinde aktif olan tablo dışında diğer tablolara görünmez yapıyoruz. Bu paragrafda anlattıklarım ve üstteki kod için kullandığım stik kodlarıda bunlar;
#tab-2-icerik, #tab-3-icerik { display:none; }
$(“span#tab-1”).click(function(){$(“span#tab-3”).removeClass(“tab-aktif”);$(“span#tab-2”).removeClass(“tab-aktif”);$(“span#tab-1”).addClass(“tab-aktif”);$(“div.#tab-3-icerik”).slideUp();$(“div.#tab-2-icerik”).slideUp();$(“div.#tab-1-icerik”).slideDown();return false;});$(“span#tab-2”).click(function(){$(“span#tab-3”).removeClass(“tab-aktif”);$(“span#tab-1”).removeClass(“tab-aktif”);$(“span#tab-2”).addClass(“tab-aktif”);$(“div.#tab-3-icerik”).slideUp();$(“div.#tab-1-icerik”).slideUp();$(“div.#tab-2-icerik”).slideDown();return false;});$(“span#tab-3”).click(function(){$(“span#tab-2”).removeClass(“tab-aktif”);$(“span#tab-1”).removeClass(“tab-aktif”);$(“span#tab-3”).addClass(“tab-aktif”);$(“div.#tab-2-icerik”).slideUp();$(“div.#tab-1-icerik”).slideUp();$(“div.#tab-3-icerik”).slideDown();return false;});});
Tab – 2
Tab – 3
Tab – 2
Tab – 3
html>
NOT: en sonda bulunan “< / html >” kodundaki boşluğu silmeyi unutmayın!”
Bahsettiğim gibi! Mantığını kavrarsanız, benim yaptığım gibi 3 tabdan fazlasınıda ekleyebilirsiniz. Bu çalışmanın, çalışır örneğini BURADAN indirebilirsiniz.
Orjinal Makale: jQuery İle “Tab” Uygulaması Geliştirmek