Jquery ile tab nasıl yapılır?

Abi eğer arayüzle uğraşıyorsan bilmen gereken tek bir şey var: jQuery.

Şimdi piyasada bin tane ücretsiz tab hedesi yapan plug-in var. Onlardan bir tanesini seçip çört diye işin içinden de çıkabilirsin. Yapılabilir yani, ama bir süre sonra “easah yeter bea” deme ihtimalin de var. Mesela benim vardı. Hala da var lan. Artık hiç sevmiyorum öyle iki tane tab yapıcam diye bilmem kaç kb’lik javascript’i include etmek falan. Sevmiyorum işte. Kılım. Bir de o plug-inler html’in içine SEKİZGBİNONİKİTÜÇRDÇRKTA tane class atıyor abi. Nefret ediyorum

Bak mesela: En çok kullanılan jQuery UI Tabs plugini ne hale getiriyor class isimlerini:

Bu ne abi? Hepi topu bir tab yapıcaz

Eh tabi durum böyle olunca, tablara istediğiniz stillemeyi yapabilmek için de boşu boşuna vakit kaybediyorsunuz.

O durumda, ne yapmak gerekiyor? Kendimiz yazıcaz. Çok da basit aslında. Tembelliğe alıştırmasaydın kendini şimdiye kadar çoktan öğrenirdin!

Bak bu senin baz alacağın HTML yapısı

Yukarda gördüğün gibi, bir ufak UL listesi içinde #tab1 #tab2 ve #tab3 şeklinde verilmiş bağlantılar ve o bağlantılara denk gelen ID’lere sahip üç güzel divin var. Bu divlerin sınıflarına dikkat: “tab” elbette biliyorsun ki, bu “tab”ların display’i “none” olmak zorunda. Zira gizlenecekler.

CSS’in pseudo class’larını kullanarak div.tab:first-child dediğin zaman, ona da display:block dediğin zaman, ilk tab’inin açık olması gerektiğini browser’a anlatabilirsin. Veya, javascript ile ilk “tab” sınıflı div’e “ona ekle sen css’ten display block” da diyebilirsin. jQuery sağ olsun. Konumuz bu değil, onu sen hallet. Konumuz o ul.tabs altında kalan li’de bulunan a’ya tıklandığında hangi div’in açılacağını anlatmak.

Bunu nasıl yapacağız?

böyle:

$(document).ready(function() {

$(‘ul.tabs li a’).click( //ul içindeki li içindeki a’ya tıklayıncaaaa

function() {

var target = $(this).attr(‘href’); // burada hangi id’li divi şey edeceğimizi seçtik

$(‘ul.tabs li’).removeClass(‘active’); //daha önce açılan tab’in linkini tutan li’ye “artık sen aktif değilsin sigigigit pasif

$(‘div.tab’).css(‘display’, ‘none’); //açık olan tab’leri kapattık haco

$(this).parent().addClass(‘active’); //tıkladığımız linki tutan li’ye artık aktif sensin haco. kralsın dedik.

$(target).css(‘display’, ‘block’); //target olarak belirlediğimiz divi görünür kıldık

}

);

});

</script>

bundan sonra da, yapacağınız şey o “active” ler o pasifler artık nasıl görülecekse. onu şey etmek haco. hadi kolay gelsin.

(tamam

$(document).ready(function() {

$(“#tabs”).tabs();

});

demek işin içinden çıkmak da kolay ama… sevmiyorum be abi. Kendin yapınca daha güzel geliyor.)

ps: jQuery’yi include ettirmeden bi boka yaramaz kod. Bir de test edip yazmadım, ama genel mantık bu. Patlarsa benden değil. Mesuliyet kabul etmem. Canım sıkılıyodu yazıverdim. Hıh.

Kıçım iki karat.

Meriç Kara

Jquery ile tab nasıl yapılır?

Leave a Reply