JavaScript ile Sekmeli İçerik Kutusu

14 Ağustos 2015

JavaScript Sekme, JavaScript Tabs

Teknik konularda farklı durumlardan bahsetmeyi pek sevmesem de, yazmak şart oldu bence. Diyeceğim pek bir şey yok aslında. Bloga çok vakit ayırmıyorum, neredeyse senede bir yazı giriyor gibiyim. Daha sık yazı yazmamı istiyorsanız eğer yorum yapabilir veya mail atabilirsiniz. Şimdiden teşekkürler!

Bahsedeceğim konu 2015 yılı web teknolojileri için sanki geri kalmış bir konu gibi olsa da kendi oluşturduğum bu içeriği sizinle de paylaşmak istedim. Yazı başlığından ve görselden anlayacağınız üzere JavaScript dilini kullanarak kendi sekmeli içerik kutumuzu oluşturmuş olacağız. Oluşturduğumuz sekmeli içerik kutusunun biçimsel özelliklerini ise CSS ile yazdım. Bu içerik kutusunu oluşturmadan önce codepen.io gibi daha birçok açık kaynak konuyla ilgili çalışmalara göz attım. Yazmış olduğum JavaScript kodu biraz onların yanında amatör gibi kalsa da, şuan güncel olan web platformlarında gayet stabil çalışabilmekte.

HTML/CSS: İlk olarak nasıl bir içerik kutusu yapacağıma karar verdikten sonra ortaya böyle bir kutu çıkardım. Renk seçimlerini ise Turuncu, Mavi ve Beyaz renklerden yana kullandım. (Beyaz renk mi?) Turuncu renk, seçili olan sekmeyi temsil etmekle olup mavi ise fare ile üzerine gelinen sekmeyi göstermektedir. Kenar çizgilerinde herhangi bir oval işlemi uygulamadım. Bu biraz Windows Metro arayüzünü anımsatmıyor değil. Yazı tipini Google Font aracılığıyla Titillium Web olarak belirledim. Geçişlerdeki hafifliği yine CSS’in Keyframe özelliği ile yaptım.

JavaScript: ul->li yapısı ile oluşturmuş olduğum sekme başlıklarının her birine sırasıyla “javascript:select(1)” şeklinde link tanımladım. Burada toplamda kaç tane sekme yapacağınıza karar vermeniz gerekiyor. Çünkü, yazmış olduğum JavaScript koduna toplam sekme sayısı ve sekme linkleri manuel olarak girilmesi gerekli. İlk açılışta ilk sıradaki sekme için “currentTab” CSS sınıfını kullandım. “currrentTab” sınıfı o an sayfada görüntülenen içerik kutusunun sekme adını temsil etmekle beraber olup turuncu renge sahiptir. Bu sınıf özelliği her sekme seçimiyle birlikte diğer tüm sekme başlıklarından silinerek seçili olan sekme başlığına aktarılır. Bu işlemi yapabilmesi için ‘For’ döngüsü içinde kontroller sağlanır ve işaretlemelerin sınıf özelliği belirlenmiş olur. Aynı bu mantık içerik kutusunun gösterilmesi içinde kullanılmıştır. Bu sayede fare ile seçim yapıldığında tek fonksiyon içerisinde, iki işlem aynı anda sekmelerin kontrolünü yaparak hem seçili başlığı ayırt etmenizi hem de diğer başlıkların görünürlüğünü pasif yaparak seçmiş olduğunuz başlığın içeriğini ekranda görüntüler. Aslında çalışma kodunu incelediğinizde bu kadar yazıyı okumaya gerek olmadığını anlayacaksınız. :)

Çalışmanın çalışır örneğine codepen.io adresinden açık kaynak olarak ulaşabilirsiniz. Basit bir o kadar da talep edilen bir çalışma diyerek burada bir yazıya daha nokta koyuyorum.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir


*