Yapısal olarak div kullanılmakta.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!-- TabPanel -->
<!-- TabPanel -->
        <div id="tabPanel1">
 
            <!-- TabHeader -->
            <div>
                <div>Tab 1</div>
                <div>Tab 2</div>
                <div>Tab 3</div>
                <div>Tab 4</div>
                <div>Tab 5</div>
                <div style="clear:both"></div>
            </div>
            <!-- /TabHeader -->
 
            <!-- Contents -->
            <div>
                <div>Icerik 1</div>
                <div>Icerik 2</div>
                <div>Icerik 3</div>
                <div>Icerik 4</div>
                <div>Icerik 5</div>
            </div>
            <!-- /Contents -->
 
        </div>
        <!-- /TabPanel -->

Yapı bu kadar basit.  Birtane kapsayıcı div’imiz var. Bu div’e bir id veriyoruz. Bunun altına iki tane daha div ekliyoruz. Eklediğimiz divlerden ilki (Sekme) tabPanelin sekmelerini, diğeri (İçerik) ise içerikleri barındırıyor. Sekme div’inin altında bulunan div’ler ise sıra ile tab’ları temsil ediyor. İçerik div’inin altındaki divler ise sırası ile Sekme div’indeki tablara karşılık geliyor. Yani Sekmedeki 1. div’in içeriği İçerikteki 1. divdir.

Bu örneğimizde Sekme div’inde 6, İçerik div’inde ise 5 tane alt div bulunmakta. Bunun sebebi Sekme div’indeki 6. div css float özelliğini clear etmek için kullanmamız. Bu yapıyı tabPanel haline getirmek için aşağıdaki kod parçacığını kullanıyoruz

1
2
3
4

 
            $(document).ready(function() {
                $('#tabPanel1').vzTabPanel(2);
            });

Bu şekilde tabPanelimizi sayfa yüklendiğinde hazırlamış oluyoruz. Burada parametre olarak gönderilen 2 sayısı sayfa yüklendiğinde aktif olacak olan sekmeyi temsil eder. Sekmelerin index numaraları 0 dan başladığı kabul edilmiştir. Bu durumda sayfamız yüklendiğinde aktif olan sekme 3. sekme olacaktır.

TabPanel şekillendirilirken birkaç css sınıfına ihtiyaç duyor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.vz-tabPanel {
    font-size: 11px;
}
 
.vz-tabHeader {
    border-bottom: 2px solid #333;
}
 
.vz-tabHeader-item {
    background-color:#ccc;
    float:left;
    padding:3px;
    margin-right:5px;
    cursor:pointer;
}
 
.vz-tabHeader-item-active {
    background-color:#333;
    float:left;
    padding:5px;
    margin-right:5px;
    cursor:pointer;
    color:#fff;
}
 
.vz-tabContent {
    padding: 4px;
}

bu css kodlarını kendinize göre düzenleyerek tabPanelin görünümünü değiştirebilirsiniz. Default olarak görünümü aşağıdaki gibidir.

Vision TabPanel'in çalışır örneğine bakmak için şurayı, indirmek için ise burayı tıklayabilirsiniz.