The style of horizontal tabbox include 4 parts, style of panel, tabs corner, selected tab and non-selected tab.
|
CSS Definition |
Description |
Default Values |
|
|
|
|
|
.tab-3d-first2 |
|
|
|
.tab-3d-last1 |
|
|
|
.tab-3d-last2 |
|
|
|
CSS Definition |
Description |
Default Values |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
CSS Definition |
Description |
Default Values |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The way to customize the background and border of Tabbox is declaring the style as following.
1.include style and assign sclass of tabpanels
<style src="~./mytab.css.dsp"/> <tabbox width="400px"> <tabs> <tab label="Tab 1" /> <tab label="Tab 2" /> </tabs> <tabpanels sclass="mytp" height="300px"> <tabpanel >This is panel 1</tabpanel> <tabpanel >This is panel 2 The second panel</tabpanel> </tabpanels> </tabbox>
<%@ page contentType="text/css;charset=UTF-8" %>
<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
.mytp .tabpanel .tabpanel-hr{
background-color:#EBEBFF;
border-bottom:3px solid #FFBB47;
border-right:1px solid #FFBB47;
border-left:1px solid #FFBB47;
}
The way to customize the tabs corner of Tabbox is declaring the style as following.
1.assign sclass of tabs
<style src="~./mytab.css.dsp"/> <tabbox width="400px" > <tabs sclass="mytabs"> <tab label="Tab 1" /> <tab label="Tab 2" /> </tabs> <tabpanels sclass="mytp" height="300px"> <tabpanel >This is panel 1</tabpanel> <tabpanel >This is panel 2 The second panel</tabpanel> </tabpanels> </tabbox>
.mytabs .tab-3d-first1{
background-image:url(${c:encodeURL('/tabbox/mytab-first1.gif')});
height:6px;
width:2px;
}
.mytabs .tab-3d-first2{
background-image:url(${c:encodeURL('/tabbox/mytab-first2.gif')});
height:6px;
width:1px;
}
.mytabs .tab-3d-last1{
background-image:url(${c:encodeURL('/tabbox/mytab-last1.gif')});
height:6px;
width:1px;
}
.mytabs .tab-3d-last2{
background-image:url(${c:encodeURL('/tabbox/mytab-last2.gif')});
height:6px;
width:2px;
}
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. It depends on you design)
The way to customize the selected of Tabbox is declaring the style as following.
.mytabs .tab-3d-m{
height:22px;
}
.mytabs .tab-3d-tl-sel{
background-image : url(${c:encodeURL('/tabbox/mytab-tl-sel.gif')});
height:5px;
width:5px;
}
.mytabs .tab-3d-tm-sel{
background-image : url(${c:encodeURL('/tabbox/mytab-tm-sel.gif')});
height:5px;
}
.mytabs .tab-3d-tr-sel{
background-image : url(${c:encodeURL('/tabbox/mytab-tr-sel.gif')});
height:5px;
width:5px;
}
.mytabs .tab-3d-ml-sel{
background-image : url(${c:encodeURL('/tabbox/mytab-ml-sel.gif')});
width:5px;
}
.mytabs .tab-3d-mm-sel{
background-image : url(${c:encodeURL('/tabbox/mytab-mm-sel.gif')});
}
.mytabs .tab-3d-mr-sel{
background-image : url(${c:encodeURL('/tabbox/mytab-mr-sel.gif')});
width:5px;
}
.mytabs .tab-3d-bl-sel{
background-image : url(${c:encodeURL('/tabbox/mytab-bl-sel.gif')});
height:6px;
width:5px;
}
.mytabs .tab-3d-bm-sel{
background-image : url(${c:encodeURL('/tabbox/mytab-bm-sel.gif')});
height:6px;
}
.mytabs .tab-3d-br-sel{
background-image : url(${c:encodeURL('/tabbox/mytab-br-sel.gif')});
height:6px;
width:5px;
}
2.Design the image files of above style. And put these files in the application folder(ex, /tabbox. It depends on you design)
The way to customize the non-selected of Tabbox is declaring the style as following.
.mytabs .tab-3d-tl-uns{
background-image : url(${c:encodeURL('/tabbox/mytab-tl-uns.gif')});
height:5px;
width:5px;
}
.mytabs .tab-3d-tm-uns{
background-image : url(${c:encodeURL('/tabbox/mytab-tm-uns.gif')});
width:5px;
}
.mytabs .tab-3d-tr-uns{
background-image : url(${c:encodeURL('/tabbox/mytab-tr-uns.gif')});
height:5px;
width:5px;
}
.mytabs .tab-3d-ml-uns{
background-image : url(${c:encodeURL('/tabbox/mytab-ml-uns.gif')});
width:5px;
}
.mytabs .tab-3d-mm-uns{
background-image : url(${c:encodeURL('/tabbox/mytab-mm-uns.gif')});
}
.mytabs .tab-3d-mr-uns{
background-image : url(${c:encodeURL('/tabbox/mytab-mr-uns.gif')});
width:5px;
}
.mytabs .tab-3d-bl-uns{
background-image : url(${c:encodeURL('/tabbox/mytab-bl-uns.gif')});
height:6px;
width:5px;
}
.mytabs .tab-3d-bm-uns{
background-image : url(${c:encodeURL('/tabbox/mytab-bm-uns.gif')});
height:6px;
}
.mytabs .tab-3d-br-uns{
background-image : url(${c:encodeURL('/tabbox/mytab-br-uns.gif')});
height:6px;
width:5px;
}
3.Design the image files of above style. And put these files in the application folder(ex, /tabbox. It depends on you design)