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:
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!
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: