The style of accordion tabbox include 3 parts, style of panel, selected tab and non-selected tab.
|
CSS Definition |
Description |
Default Values |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
CSS Definition |
Description |
Default Values |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The way to customize the background and border of a accordion 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"> <tabbox width="400px" mold="accordion"> <tabs> <tab label="Tab 1" /> <tab label="Tab 2" /> </tabs> <tabpanels sclass="mytp" > <tabpanel height="200px">This is panel 1</tabpanel> <tabpanel height="200px">This is panel 2 The second panel</tabpanel> </tabpanels> </tabbox> </tabbox>
<%@ page contentType="text/css;charset=UTF-8" %>
<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
.mytp .tabpanel-accordion{
background-color:#FFEEB6;
border-top:1px solid #FFBB47;
border-bottom:1px solid #FFBB47;
border-right:3px solid #FFBB47;
}
The way to customize the selected of accordion Tabbox is declaring the style as following.
1.append customized css into mytab.css.dsp in class path/web/
.
mytp
.tabaccd-3d-tl-sel{
background-image : url(${c:encodeURL('/tabbox-acc/mytab-tl-sel.gif')});
height:5px;
width:5px;
}
.
mytp
.tabaccd-3d-tm-sel{
background-image : url(${c:encodeURL('/tabbox-acc/mytab-tm-sel.gif')});
height:5px;
}
.
mytp
.tabaccd-3d-tr-sel{
background-image : url(${c:encodeURL('/tabbox-acc/mytab-tr-sel.gif')});
height:5px;
width:5px;
}
.
mytp
.tabaccd-3d-ml-sel{
background-image : url(${c:encodeURL('/tabbox-acc/mytab-ml-sel.gif')});
width:5px;
}
.
mytp
.tabaccd-3d-mm-sel{
background-image : url(${c:encodeURL('/tabbox-acc/mytab-mm-sel.gif')});
}
.
mytp
.tabaccd-3d-mr-sel{
background-image : url(${c:encodeURL('/tabbox-acc/mytab-mr-sel.gif')});
width:5px;
}
.
mytp
.tabaccd-3d-b{
background-image : url(${c:encodeURL('/tabbox-acc/mytab-b.gif')});
}
2.Design the image files of above style. And put these files in the application folder(ex, /tabbox-acc. It depends on you design)
The way to customize the non-selected of Tabbox is declaring the style as following.
.
mytp
.tabaccd-3d-tl-uns{
background-image : url(${c:encodeURL('/tabbox-acc/mytab-tl-uns.gif')});
height:5px;
width:5px;
}
.
mytp
.tabaccd-3d-tm-uns{
background-image : url(${c:encodeURL('/tabbox-acc/mytab-tm-uns.gif')});
width:5px;
}
.
mytp
.tabaccd-3d-tr-uns{
background-image : url(${c:encodeURL('/tabbox-acc/mytab-tr-uns.gif')});
height:5px;
width:5px;
}
.
mytp
.tabaccd-3d-ml-uns{
background-image : url(${c:encodeURL('/tabbox-acc/mytab-ml-uns.gif')});
width:5px;
}
.
mytp
.tabaccd-3d-mm-uns{
background-image : url(${c:encodeURL('/tabbox-acc/mytab-mm-uns.gif')});
}
.
mytp
.tabaccd-3d-mr-uns{
background-image : url(${c:encodeURL('/tabbox-acc/mytab-mr-uns.gif')});
width:5px;
}
2.Design the image files of above style. And put these files in the application folder(ex, /tabbox-acc. It depends on you design)