Responsive Bootstrap Tabs

Geçtiğimiz günlerde geniş bir tab yapı kullanmam gerekti. Tablı yapıları responsive kodlarken genellikle tabları gizleyip, onun yerine bir select elemanı koymayı tercih ederim ve select elemanının ‘change’ olayı tetiklendiğinde ilgili taba Javascript yardımıyla tıklarım. Açıkçası kullanışlı olduğunu da düşünüyorum. Fakat bu kez aklıma farklı bir kullanım şekli geldi ve nasıl olacağını merak edip üzerinde biraz çalıştım.

Aşağıdaki görsel nasıl bir şey yapmayı planladığımı açıklıyor:

Sağdaki ve soldaki oklar aslında birer tab. Biraz CSS tanımlamasıyla içindeki metinleri gizliyoruz ve :after elemanlarının da birer ok gibi görünmesini sağlıyoruz. Bunun sıkıntılı bir yanı var: Eğer tablarımızın içinde dropdown kullanırsak, sağdaki ve soldaki okların aşağıyı göstermesini sağlamamız gerekecek. Bu durumda ilk tıklamada dropdown menümüz açılacak ve biz açılan alt tablardan birini görüntüledikten sonra (eğer varsa) diğer  taba geçebileceğiz. Çok şık bir çözüm değil ama tablarımızı bu şekilde kullanmak istiyorsak şimdilik başka çaremiz yok gibi görünüyor.

Standart tab yapısında bazı küçük değişiklikler yapmamız gerekiyor.

<ul class="nav nav-tabs nav-tabs-responsive">
    <li class="active">
        <a href="#tab1" data-toggle="tab">
            <span class="text">Tab 1</span>
        </a>
    </li>
    <li class="next">
        <a href="#tab2" data-toggle="tab">
            <span class="text">Tab 2</span>
        </a>
    </li>
    <li>
        <a href="#tab3" data-toggle="tab">
            <span class="text">Tab 3</span>
        </a>
    </li>
    ...
</ul>

Fark edeceğiniz üzere dikkat çekmek istediğim üç nokta var:

1. İstediğimizde tabları olduğu gibi kullanabilmemiz için, yeni bir sınıf tanımlıyoruz.
   Gerektiğinde bu küçük eklemeleri yapıp, responsive tabımızı kullanabileceğiz. Eğer bazı tablarda bu responsive yaklaşımı uygulamak istemiyorsak, standart yapıyla devam edebiliriz.
2. Tab başlıklarını ‘text’ sınıfını verdiğimiz span elemanlarının içine yazıyoruz.
   Bu sayede telefon genişliğine geldiğimizde metinleri kolayca gizliyoruz.
3. İkinci tabımıza ‘next’ sınıfını veriyoruz.
   Aslında bu sınıfı sayfa yüklendiğinde Javascript ile verebilirdik fakat bu durumda scriptler yüklenip, çalıştırılana kadar sağ okumuz görüntülenmeyecekti. Bunun önüne geçmek için her zaman ilk markupu, nasıl olması gerekiyorsa öyle oluşturmalıyız.

Bunları yaptıktan sonra sıra CSS ve Javascript yazmaya geliyor. Bunları detaylı açıklamayacağım. Benim yazdığım kodları doğrudan kullanabilirsiniz. Eğer tabların tasarımını değiştirdiyseniz, ‘.nav-tabs-primary’ için yazılan stilleri de güncellemeniz gerekecektir.

Bitmiş uygulamayı aşağıda görebilirsiniz. Ayrı bir pencerede görüntülemek için tıklayınız.

Umarım hoşunuza gitmiştir ;)