Tabbox – Vertical
Prev 1. XUL Components Next

Tabbox – Vertical

The style of vertical tabbox include 4 parts, style of panel, tabs corner, selected tab and non-selected tab.

Style of Panel

CSS Definition

Description

Default Values

. tabpanels_scalss

the style of a tab panel

border-bottom:1px solid #5C6C7C;

border-right:1px solid #5C6C7C;

border-top:1px solid #5C6C7C;

padding:5px;

Style of Tabs Corner

CSS Definition

Description

Default Values

. tabs_sclass

.tab-v3d-first1

The top corner

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-first1.gif);

height:1px;

width:3px;

. tabs_class

.tab-v3d-first2

The line of top corner

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-first2.gif);

height:3px;

width:3px;

. tabs_class

.tab-v3d-last1

The line of right corner

background- image:url(/zkdemo/zkau/web/zul/img/tab/v3d-last1.gif);

height:3px;

width:3px;

. tabs_class

.tab-v3d-last2

The right corner

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-last2.gif);

height:1px;

width:3px;

Style of Selected Tab

CSS Definition

Description

Default Values

. tab-v3d-tl-sel

Top-left corner of a selected tab

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-tl-sel.gif);

height:5px;

width:5px;

.tab-v3d-tm-sel

Top-middle line of a selected tab

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-tm-sel.gif);

height:5px;

.tab-v3d-tr-sel

Top-right corner of a selected tab

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-tr-sel.gif);

height:5px;

width:3px;

. tab-v3d-ml-sel

Middle-left of a selected tab

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-ml-sel.gif);

width:5px;

.tab-v3d-mm-sel

Middle-middle of a selected tab

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-mm-sel.gif);

.tab-v3d-mr- sel

Middle-right of a selected tab

background- image:url(/zkdemo/zkau/web/zul/img/tab/v3d-mr-sel.gif);

width:3px;

.tab-v3d-bl-sel

bottom-left of a selected tab

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-bl-sel.gif);

height:5px;

width:5px;

.tab-v3d-bm-sel

bottom-middle of a selected tab

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-bm-sel.gif);

height:5px;

.tab-v3d-br-sel

bottom-right of a selected tab

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-br-sel.gif);

height:5px;

width:3px;

Style of Non-Selected Tab

CSS Definition

Description

Default Values

. tab-v3d-tl- uns

Top-left corner of a non-selected tab

background- image:url(/zkdemo/zkau/web/zul/img/tab/v3d-tl-uns.gif);

height:5px;

width:5px;

.tab-v3d-tm-uns

Top-middle line of a non-selected tab

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-tm-uns.gif);

height:5px;

.tab-v3d-tr-uns

Top-right corner of a non-selected tab

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-tr-uns.gif);

height:5px;

width:3px;

. tab-v3d-ml-uns

Middle-left of a non-selected tab

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-ml-uns.gif);

width:5px;

.tab-v3d-mm-uns

Middle-middle of a non-selected tab

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-mm-uns.gif);

.tab-v3d-mr-uns

Middle-right of a non-selected tab

background-image:url(/zkdemo/zkau/web/zul/i mg/tab/v3d-mr-uns.gif);

width:3px;

.tab-v3d-bl-uns

bottom-left of a non-selected tab

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-bl-uns.gif);

height:5px;

width:5px;

.tab-v3d-bm-uns

bottom-middle of a non-selected tab

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-bm-uns.gif);

height:5px;

.tab-v3d-br-uns

bottom-right of a non-selected tab

background-image:url(/zkdemo/zkau/web/zul/img/tab/v3d-br-uns.gif);

height:5px;

width:3px;

Customize the panel style

The way to customize the background and border of a vertical tabbox is declaring the style as following.

1.include style and assign sclass of tabpanels

<style src="~./mytab.css.dsp"/>
<tabbox width="400px" orient="vertical">
<tabs width="50px">
<tab label="Tab 1" />
<tab label="Tab 2" />
</tabs>
<tabpanels sclass="mytp" height="200px">
<tabpanel >This is panel 1</tabpanel>
<tabpanel >This is panel 2 The second panel</tabpanel>
</tabpanels>
</tabbox>

2.Add mytab.css.dsp in class path/web/

<%@ page contentType="text/css;charset=UTF-8" %>
<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
.mytp {
background-color:#FFEEB6;
border-top:1px solid #FFBB47;
border-bottom:1px solid #FFBB47;
border-right:3px solid #FFBB47;
    }

Customize the corner style

The way to customize the tabs corner of vertical tabbox is declaring the style as following.

1.assign sclass of tabs

<style src="~./mytab.css.dsp"/>
<tabbox width="400px" orient="vertical">
<tabs width="50px" sclass="mytabs">
<tab label="Tab 1" />
<tab label="Tab 2" />
</tabs>
<tabpanels sclass="mytp" height="200px">
<tabpanel >This is panel 1</tabpanel>
<tabpanel >This is panel 2 The second panel</tabpanel>
</tabpanels>
</tabbox>

2.append customized css into mytab.css.dsp in class path/web/

.mytabs .tab-v3d-first1{
background-image:url(${c:encodeURL('/tabbox-ver/mytab-first1.gif')});
height:2px;
width:6px;
}
.mytabs .tab-v3d-first2{
background-image:url(${c:encodeURL('/tabbox-ver/mytab-first2.gif')});
height:1px;
width:6px;
}
.mytabs .tab-v3d-last1{
background-image:url(${c:encodeURL('/tabbox-ver/mytab-last1.gif')});
height:1px;
width:6px;
}
.mytabs .tab-v3d-last2{
background-image:url(${c:encodeURL('/tabbox-ver/mytab-last2.gif')});
height:2px;
width:6px;
}

3.Design the image files of above style (mytab-first1.gif, mytab-first2.gif, mytab-last1.gif, mytab-last2.gif). And put these files in the application folder(ex, /tabbox-ver. It depends on you design)

Customize the selected tab style

The way to customize the selected of vertical Tabbox is declaring the style as following.

1.append customized css into mytab.css.dsp in class path/web/

.mytabs .tab-v3d-tl-sel{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-tl-sel.gif')});

height:5px;

width:5px;

}

.mytabs .tab-v3d-tm-sel{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-tm-sel.gif')});

height:5px;

}

.mytabs .tab-v3d-tr-sel{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-tr-sel.gif')});

height:5px;

width:6px;

}

.mytabs .tab-v3d-ml-sel{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-ml-sel.gif')});

width:5px;

}

.mytabs .tab-v3d-mm-sel{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-mm-sel.gif')});

}

.mytabs .tab-v3d-mr-sel{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-mr-sel.gif')});

width:6px;

}

.mytabs .tab-v3d-bl-sel{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-bl-sel.gif')});

height:5px;

width:5px;

}

.mytabs .tab-v3d-bm-sel{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-bm-sel.gif')});

height:5px;

}

.mytabs .tab-v3d-br-sel{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-br-sel.gif')});

height:5px;

width:6px;

}

2.Design the image files of above style. And put these files in the application folder(ex, /tabbox-ver. It depends on you design)

Customize the non-selected tab style

The way to customize the non-selected of Tabbox is declaring the style as following.

1.append customized css into mytab.css.dsp in class path/web/

.mytabs .tab-v3d-tl-uns{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-tl-uns.gif')});

height:5px;

width:5px;

}

.mytabs .tab-v3d-tm-uns{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-tm-uns.gif')});

width:5px;

}

.mytabs .tab-v3d-tr-uns{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-tr-uns.gif')});

height:5px;

width:6px;

}

.mytabs .tab-v3d-ml-uns{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-ml-uns.gif')});

width:5px;

}

.mytabs .tab-v3d-mm-uns{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-mm-uns.gif')});

}

.mytabs .tab-v3d-mr-uns{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-mr-uns.gif')});

width:6px;

}

.mytabs .tab-v3d-bl-uns{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-bl-uns.gif')});

height:5px;

width:5px;

}

.mytabs .tab-v3d-bm-uns{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-bm-uns.gif')});

height:5px;

}

.mytabs .tab-v3d-br-uns{

background-image : url(${c:encodeURL('/tabbox-ver/mytab-br-uns.gif')});

height:5px;

width:6px;

}

3.Design the image files of above style. And put these files in the application folder(ex, /tabbox-ver. It depends on you design)

Prev Up Next
Tabbox – Accordion Mold  Home Tabbox – Horizontal