UX Rocket TabView

Tab görünümü oluşturmak için hazırlanmıştır, Butona tıklandığında tıklanan buton seçili hale gelir ve bağlı olduğu içeriği gösterir.

<div class="tab-view">
    <div class="tab-view-buttons">
        <a class="tab-view-button current" href="#">Button 1</a>
        <a class="tab-view-button" href="#">Button 2</a>
    </div>
    <div class="tab-view-content current">
        content 1
    </div>
    <div class="tab-view-content">
        content 2
    </div>
</div>

Notlar

Bir tabın açık gelmesi için buton'una ve içeriğine 'current' class'ı vermek yeterlidir. Buton elemanına role attribute'u eklenerek TabView'in Dış containerına class atayarak her tab için farklı görünüm sağlanabilir. Tabların hover ile açılması isteniyorsa

containerının yanına tab-view-hover eklenir. Tabların toggle ile açılması isteniyorsa

containerının yanına tab-view-toggle eklenmesi yeterlidir.

Tanımlar

Property	Default	Açıklama
button	.tab-view-button	TabViewi tetikleyen buton elemanı.
content	.tab-view-content	Tetiklenen butonun içeriğinin tanımlandığı eleman
current	.current	Aktif olan tab elemanı için tanımlanan CSS classı.
toggleClass	.tab-view-toggle	Tabların ikinci tıklanışında açılan content alanını kapatır.
hoverClass	.tab-view-hover	Tabların üzerine gelindiğinde content alanını açar.
hashLink	false	URL'de hash kullanımını sağlar.

Public Metodlar

Metod	Açıklama
$.uxtabview	Bu method pluginin detayını görmenizi sağlar.
$.uxtabview.version	Sayfaya eklenmiş pluginin versiyon numarasını gösterir.
$.uxtabview.settings	Aktif pluginin ayarlarını gösterir.