bildirgec.org

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ı;.tab-tablo { width:450px; margin:0 auto; }

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;

Örnekteki tablara verdiğimiz stillerde bunlar;.tab { margin-bottom:5px; }
.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!!!..*/ }Bu şekilde kullandığımızda aktif tab’da hiç bir belirginlik olmayacağından, aktif olmasını istediğimiz tab’ada bu stil’i verip;span.tab-aktif { cursor:pointer; color:#666; background:#fff; 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!!!..*/ }HTML kodlarımızı bu şekilde değiştiriyoruz;

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-icerik { padding:10px; background:#fff; /*Buradan*/-moz-box-shadow:1px 1px 5px #7e7e7e; -moz-border-radius:5px; -webkit-border-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
#tab-2-icerik, #tab-3-icerik { display:none; }HTML kodların burada işi bitiyor. Şimdi jQuery kodlarımıza geçiyoruz. Kodlarıda uzunca anlatmayacağım, görünce zaten çok basit (basit ama çok kullanışlı) olduğunu sizde anlayacaksınız. Kodlardaki çalışma mantığını kısaca açıklayalım! Sayfa yüklenince en başda bizim üstde verdiğimiz css kodlarına göre gösterim yapıyorlar, daha sonrasında tablar tıklanınca jQuery kodlarımız devreye giriyor. jQuery kodlarımızda da tablarımıza teker tek görevler atıyoruz! 1. tab tıklanınca bu içerik gözüksün ve bu tab aktif stilini alsın, bunlarda gözükmesin. 2. tab tıklanınca bu içerik gözüksün ve bu tab aktif stilini alsın, bunlarda gözükmesin vs.vs.vs. Bu şekilde bir çok tab’da kullanabilirsiniz. Bu mantıkla, bu kodları yazdım;$(document).ready(function() {
$(“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;});});Şimdi tüm kod işimiz bitti. Sonuç olarak aşağıdaki kod topluluğu çıkardım;

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