ZK Style Guide

The material in this document is for information only and is subject to change without notice. While reasonable efforts have been made to assure its accuracy, Potix Corporation assumes no liability resulting from errors or omissions in this document, or from the use of the information contained herein.

Potix Corporation may have patents, patent applications, copyright or other intellectual property rights covering the subject matter of this document. The furnishing of this document does not give you any license to these patents, copyrights or other intellectual property.

Potix Corporation reserves the right to make changes in the product design without reservation and without notification to its users.

The Potix logo and ZK are trademarks of Potix Corporation.

All other product names are trademarks, registered trademarks, or trade names of their respective owners.

1. Introduction

Table of Contents

ZK Class Concept

Sclass
Zclass
Overwriting

DOM Naming Structure

Layout Elements:
Other Elements:
Tool Icons:

DOM Naming Position

Regions:
Parts: (3 x 3 grid)
Compass:

DOM Event Effect

Action Image Indexing

Welcome to ZK, the simplest way to make Rich Web Applications.

The Style Guide describes the styling concepts and design of ZK. For installation refer to the Quick Start Guide. For concepts, features, refer to the Developer's Guide. For a full description of component properties and methods refer to the Developer's Reference.

This chapter describes the CSS naming pattern and styling concepts of ZK.

ZK Class Concept

ZK Class concept was introduced in ZK 3.5.0 version, it is a naming pattern, it appends some regular patterns for client action (please refer to the next section) , like click, focus, mouse-over, mouse-out, and so on. ZK Class is also used for changing mold of components, and can be used to separate the two same components with different theme without any conflict. For example, there is a Button component and its ZK Class is called “z-button”, when user mouse is over the button, the ZK Class of the component will be appended with “-over” by ZK client engine, then the full ZK Class will be “z-button-over” so that we can easily customize a specific component theme for special purpose.

There are three different ways to change the style of ZK components as follows. The figure shows where the Sclass and Zclass should be located, the red box means the Sclass will be appended to the root DOM tree of the component, and the green box means the Zclass will be treated as a prefix template to append the postfix action CSS rule.

Figure1

Sclass

The purpose of the Sclass is to lightly change the CSS of the component.

For example,

<zk>
<style dynamic="true">
.mydb {
border: 1px solid blue;
}
</style>
<textbox sclass="mydb" value="having Sclass"/>
<textbox value="Without Sclass"/>
</zk>

As you can see, the above example has two Textbox, one has the Sclass property, and the other has no the Sclass property. Most of the time we need to customize a style with a special field without influencing others, we can specify the Sclass property instead.

Zclass

The purpose of the Zclass is to change the full CSS of the specific component. It usually uses to change the mold of the component, which supports more than one theme.

For example,

<zk>
<style dynamic="true">
.mydb-disd {
    color: blue !important; cursor: default !important; opacity: .6; -moz-opacity: .6; filter: alpha(opacity=60);    
    font-weight: bold;    
}
.mydb-disd * {
    color: blue !important; cursor: default !important;    
    font-weight: bold;    
}
.mydb {
    background: white;    
    border: 1px solid #7F9DB9;    
}
.mydb-focus, .mydb-focus input {
    border: 1px solid red;    
}
.mydb-text-invalid {
    background: yellow;    
    border: 1px solid red;    
}
.mydb-readonly, .mydb-text-disd {
    background: green;    
}
</style>
<grid width="450px">
    <columns>    
        <column label="Having Zclass"/>        
        <column label="Without Zclass"/>        
    </columns>    
    <rows>    
        <row><textbox zclass="mydb" value="Default"/><textbox value="Default"/></row>        
        <row><textbox zclass="mydb" readonly="true" value="Readonly"/><textbox readonly="true" value="Readonly"/></row>        
        <row><textbox zclass="mydb" disabled="true" value="Disabled"/><textbox disabled="true" value="Disabled"/></row>        
        <row><textbox zclass="mydb" focus="true" value="Focus"/><textbox value="Focus"/></row>        
    </rows>    
</grid>
</zk>

As you can see, the Zclass is used to change all the action CSS rules of the component. Therefore, we must replace all the CSS rules of the component with a new CSS name. For example as above, the new name is called “mydb”, and we must replace the original name of Textbox called “z-textbox” to the new one, it is dirty but necessary. Note: The CSS source of Textbox from SVN

Overwriting

The last part, it is called overwriting, replacing the original CSS rules of the component is that we want to customize all the components with a special style.

For example Textbox.

<zk>
<style dynamic="true">
.z-textbox {
    background: black;    
    color: white;    
    border: 3px outset blue;    
}
</style>
<textbox value="Default"/>
</zk>

As you can see, we merely replace the default CSS with black background, white color, and three pixel borders, we can use the component replacement instead.

DOM Naming Structure

The naming pattern of the DOM structure is used to describe the components which are composed of more than one part. The following recommended naming patterns are to clarify the DOM structure of ZK components, not a limitation.

Layout Elements:

-outer:
the exterior of the specified component (ends with !chdextr) like splitter in vbox and hbox
-body:
the body content, like grid, tree, listbox, and so on.
-header:
the header content, like grid, tree, listbox, and so on.
-inner:
the interior of the specified component, like slider and tab.
-cnt:
like window's contentSclass or groupbox's contentSclass
-footer:
describes the footer content, like grid, tree, listbox, and so on.

Negative option:

-noheader:
no header element.
-noborder:
no border element.
-nofooter:
no footer element.

Other Elements:

-faker:
faker element to mark a reference point at browser side, like grid, listbox, and tree.
-text:
text area.
-inp:
input element.
-sep:
separator element.
-img:
image area.
-pp:
pop-up element, like datebox, combobox, and so on.
-btn:
a button or an icon.

`Tool Icons:`

Usage	Switch	Resize	Split
Postfix	-close: describes an icon which is closed, like `tree, group`, an so on. -collapse: describes a collapsible icon, like `panel`. -collapsed: describes a collapsible icon which is collapsed, like `panel`. -expand: describes an expandable icon, like `panel`. -expanded: describes an expandable icon which is expanded, like `panel`.	-maximize: describes a maximizable icon. -maximized: describes a maximizable icon which is maximized. -minimize: describes a minimizable icon. -minimized: describes a minimizable icon which is minimized.	-split: describes a splittable icon. -ns: describes a non-splittable icon.

DOM Naming Position

The naming position is used to locate which edge of the component should be, it usually expresses a circle corner of the component, such as Button, Groupbox, Window, and so on.

`Regions:`

-ver:
vertical aspect, like menubar.
-hor:
horizontal aspect, like menubar.
-start:
beginning aspect, like toolbar.
-center:
center aspect, like toolbar.
-end:
ending aspect, like toolbar.

`Parts:` `(3 x 3 grid)`

-tl: Top Left	-tm: Top Middle	-tr: Top Right
-cl: Center Left	-cm: Center Middle	-cr: Center Right
-bl: Bottom Left	-bm: Bottom Middle	-br: Bottom Right

`Compass:`

-north
-west	-center	-east
-south

`DOM Event Effect`

These postfix string are appended to component's class name by ZK client engine.

1. example:
  a component=> z-mycmp
  mouse over => z-mycmp-over
  disabled and mouse over => z-mycmp-over-disd

The appending order MUST follow the priority as follow

Priority 1	Priority 2	Priority 3
-clk: clicked event. -focus: focused event. -over: mouse over event. -drag: dragged event. -drop: dropped event.	-seld: selected event. -ck: checked event. -unck: unchecked event.	-disd: disabled event. -visi: visited event. -hide: hidden event. -invalid invalid event -readonly readonly event

Action Image Indexing

The CSS background of the action event of the DOM element is to use an arranged image composed of the following descriptions.

Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
Close	Same as above	Same as above	Same as above	Same as above	Same as above

For example,

This icon is a Timebox image.

This icon is a Tree toggle image.

2. XUL Components

Table of Contents

Auxhead

Mold: Default

Bandbox

Mold: Default

Bandpopup

Mold: Default

Borderlayout

Mold: Default
North:
South:
West:
East:
Center:

Box

Mold: Default (Vbox)

Button

Mold: Default
Mold: os
Mold: Default

Caption

Mold: Default
Mold: Default (legend)

Checkbox

Mold: Default

Column

Mold: Default

Columnlayout

Mold: Default

Combobox

Mold: Default

Comboitem

Mold: Default

Datebox

Mold: Default
Mold: Default - Calendar

Intbox

Mold: Default

Detail

Mold: Default

Doublebox

Mold: Default

Fisheyebar

Mold: Default

Footer

Mold: Default

Grid

Mold: Default
Mold: paging

Group

Mold: Default

Groupbox

Mold: Default
Mold: 3d

Groupfoot

Mold: Default

Hbox

Mold: Default

Intbox

Mold: Default

Label

Mold: Default

Listbox

Mold: Default
Mold: paging
Mold: select

Listfooter

Mold: Default

Listgroup

Mold: Default

Listgroupfoot

Mold: Default

Listheader

Mold: Default

Listitem

Mold: Default

Longbox

Mold: Default

Menubar

Mold: Default (Horizontal)
Mold: Default (Vertical)
Menu in Menubar
Menuitem in Menubar

Menupopup

Mold: Default
Menu in Menupopup
Menuitem in Menupopup

Menuseparator

Mold: Default

Paging

Mold: Default
Mold: os

Panel

Mold: Default

Popup

Mold: Default

Portallayout

Mold: Default

Progressmeter

Mold: Default

Radio

Mold: Default

Row

Mold: Default

Separator

Mold: Default (Horizontal)
Mold: Default (Vertical)

Slider

Mold: Default (Horizontal)
Mold: Default (Vertical)
Mold: sphere (Horizontal)
Mold: sphere (Vertical)
Mold: scale

Spinner

Mold: Default

Splitter

Mold: Default (Vertical)
Mold: Default (Horizontal)
Mold: Default (OS-Vertical)
Mold: Default (OS-Horizontal)

Tabbox

Mold: Default (Horizontal)
Mold: Default (Vertical)
Mold: accordion
Mold: accordion-lite

Tablelayout

Mold: Default

Textbox

Mold: Default

Timebox

Mold: Default

Toolbar

Mold: Default
Mold: Panel

Toolbarbutton

Mold: Default

Tree

Mold: Default
Mold: paging

Treechildren

Mold: Default

Treecol

Mold: Default

Treefooter

Mold: Default

Treerow

Mold: Default

Window

Mold: Default (embedded)
Mold: Default (popup)
Mold: Default (overlapped, highlighted, and modal)

Auxhead

Auxhead and Auxheader.

Note:

Mold: Default

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-auxhead,

z-auxheader

Supported

CSS Specification:

Class Name	Description	Default Values
`div.z-grid-header tr.z-auxhead`	Background image	`background-image: url(` `${c:encodeURL('~./zul/img/grid/s_hd.gif')}` `);` background-color: #C7E5F1;background-repeat: repeat-x;
div.z-grid-header th.z-auxheader	Font size	overflow: hidden; border: 1px solid; border-color: #DAE7F6 #9EB6CE #9EB6CE #DAE7F6; white-space: nowrap; padding: 2px; font-size: ${fontSizeM}; font-weight: normal;
.z-auxheader-cnt	Font size of the content	font-size: ${fontSizeM}; font-weight: normal; font-family: ${fontFamilyT}; border: 0; margin: 0; padding: 0; overflow: hidden;

Bandbox

Bandbox is composed of two parts, an input box and a button.

Source:

The CSS source of Bandbox from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-bandbox`	`-over`	`-btn-clk`	`-focus`	`-btn-over`	-disd
Supported	V	V	V	V	V	!

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
`.z-bandbox`	Font size	border: 0; padding: 0; margin: 0; white-space: nowrap; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal; repeat-x;
.z-bandbox-inp	Background of input element	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border: 1px solid #7F9DB9;
.z-bandbox-text-invalid	Background of invalidated	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870;
.z-bandbox-readonly, .z-bandbox-text-disd	Background of disabled and read only	background: #ECEAE4;
.z-bandbox .z-bandbox-img	Background of the button image	background: transparent url(${c:encodeURL('~./zul/img/button/bandbtn.gif')}) no-repeat 0 0; vertical-align: top; cursor: pointer; width: 17px; height: 19px; border: 0; border-bottom: 1px solid #86A4BE;

Bandpopup

Bandpopup is a container of Bandbox .

Source:

The CSS source of Bandpopup from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-band-popup`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`.z-bandbox-pp`	Font size	border: 0; padding: 0; margin: 0; white-space: nowrap; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal; repeat-x;display: block; position: absolute; z-index: 88000; background: white; border: 1px solid #7F9DB9; padding: 2px; font-size: ${fontSizeS};

Borderlayout

Borderlayout is composed of five children: North, South, East, West, and Center

Source:

The CSS source of Borderlayout from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-border-layout`
Supported	V
CSS naming:	`z-border-layout-tool`	`-over`
Supported	V	V

CSS Specification:

Class Name	Description	Default Values
`.z-border-layout`	Background and color	width:100%; height:100%; overflow:hidden; background-color:#CDE6F5; border:0 none; position: relative; visibility: hidden;
.z-border-layout-tool	Background of tool icons	overflow: hidden; width: 15px; height: 15px; float: right; cursor: pointer; background: transparent url(${c:encodeURL('~./zul/img/panel/tool-btn.gif')}) no-repeat; margin-left: 2px;

North:

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-north,` `-split`
Supported	V
CSS naming:	`-expand,` `-collapsed,` `-collapse`	`-over`
Supported	V	V

CSS Specification:

Class Name	Description	Default Values
`.z-north`	Border and background	border:1px solid #B1CBD5; position:absolute; overflow:hidden; background-color:white;
.z-north-header	Background of header	overflow: hidden; zoom: 1; color: #15428b; font: normal 11px tahoma, arial, verdana, sans-serif; padding: 5px 3px 4px 5px; border-bottom: 1px solid #B1CBD5; line-height: 15px; background:transparent url(${c:encodeURL('~./zul/img/panel/panel-tb.png')}) repeat-x 0 -1px; white-space: nowrap;font-weight:bold;
.z-north-noborder	No border	border:0 none;
.z-north-split	Background of splitter	position: absolute; height: 6px; width: 6px; line-height: 1px; font-size: 1px; z-index: 12; background-color: #C4DCFB; background-image:url("${c:encodeURL('~./zul/img/splt/splt-v.png')}"); background-position: top; cursor: s-resize; cursor: row-resize;
.z-north-collapsed	Background of collapsed north	position: absolute; background-color: #E1F1FB; width: 20px; height: 20px; border: 1px solid #98C0F4; z-index:20; overflow: hidden;

South:

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-south,` `-split`
Supported	V
CSS naming:	`-expand,` `-collapsed,` `-collapse`	`-over`
Supported	V	V

CSS Specification:

Class Name	Description	Default Values
`.z-` `sou` `th`	Border and background	border:1px solid #B1CBD5; position:absolute; overflow:hidden; background-color:white;
.z-south-header	Background of header	overflow: hidden; zoom: 1; color: #15428b; font: normal 11px tahoma, arial, verdana, sans-serif; padding: 5px 3px 4px 5px; border-bottom: 1px solid #B1CBD5; line-height: 15px; background:transparent url(${c:encodeURL('~./zul/img/panel/panel-tb.png')}) repeat-x 0 -1px; white-space: nowrap;font-weight:bold;
.z-south-noborder	No border	border:0 none;
.z-south-split	Background of splitter	position: absolute; height: 6px; width: 6px; line-height: 1px; font-size: 1px; z-index: 12; background-color: #C4DCFB; background-image:url("${c:encodeURL('~./zul/img/splt/splt-v.png')}"); background-position: top; cursor: s-resize; cursor: row-resize;
.z-south-collapsed	Background of collapsed south	position: absolute; background-color: #E1F1FB; width: 20px; height: 20px; border: 1px solid #98C0F4; z-index:20; overflow: hidden;

West:

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-west,` `-split`
Supported	V
CSS naming:	`-expand,` `-collapsed,` `-collapse`	`-over`
Supported	V	V

CSS Specification:

Class Name	Description	Default Values
`.z-` `west`	Border and background	border:1px solid #B1CBD5; position:absolute; overflow:hidden; background-color:white;
.z-west-header	Background of header	overflow: hidden; zoom: 1; color: #15428b; font: normal 11px tahoma, arial, verdana, sans-serif; padding: 5px 3px 4px 5px; border-bottom: 1px solid #B1CBD5; line-height: 15px; background:transparent url(${c:encodeURL('~./zul/img/panel/panel-tb.png')}) repeat-x 0 -1px; white-space: nowrap;font-weight:bold;
.z-west-noborder	No border	border:0 none;
.z-west-split	Background of splitter	position: absolute; height: 6px; width: 6px; line-height: 1px; font-size: 1px; z-index: 12; background-color: #C4DCFB; background-image:url("${c:encodeURL('~./zul/img/splt/splt-h.png')}"); background-position: left; cursor: e-resize; cursor: col-resize;
.z-west-collapsed	Background of collapsed west	position: absolute; background-color: #E1F1FB; width: 20px; height: 20px; border: 1px solid #98C0F4; z-index:20; overflow: hidden;

East:

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-east,` `-split`
Supported	V
CSS naming:	`-expand,` `-collapsed,` `-collapse`	`-over`
Supported	V	V

CSS Specification:

Class Name	Description	Default Values
`.z-` `east`	Border and background	border:1px solid #B1CBD5; position:absolute; overflow:hidden; background-color:white;
.z-east-header	Background of header	overflow: hidden; zoom: 1; color: #15428b; font: normal 11px tahoma, arial, verdana, sans-serif; padding: 5px 3px 4px 5px; border-bottom: 1px solid #B1CBD5; line-height: 15px; background:transparent url(${c:encodeURL('~./zul/img/panel/panel-tb.png')}) repeat-x 0 -1px; white-space: nowrap;font-weight:bold;
.z-east-noborder	No border	border:0 none;
.z-east-split	Background of splitter	position: absolute; height: 6px; width: 6px; line-height: 1px; font-size: 1px; z-index: 12; background-color: #C4DCFB; background-image:url("${c:encodeURL('~./zul/img/splt/splt-h.png')}"); background-position: left; cursor: e-resize; cursor: col-resize;
.z-east-collapsed	Background of collapsed east	position: absolute; background-color: #E1F1FB; width: 20px; height: 20px; border: 1px solid #98C0F4; z-index:20; overflow: hidden;

Center:

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-center`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`.z-` `center`	Border and background	border:1px solid #B1CBD5; position:absolute; overflow:hidden; background-color:white;
.z-center-header	Background of header	overflow: hidden; zoom: 1; color: #15428b; font: normal 11px tahoma, arial, verdana, sans-serif; padding: 5px 3px 4px 5px; border-bottom: 1px solid #B1CBD5; line-height: 15px; background:transparent url(${c:encodeURL('~./zul/img/panel/panel-tb.png')}) repeat-x 0 -1px; white-space: nowrap;font-weight:bold;
.z-center-noborder	No border	border:0 none;

Box

Box is composed of HTML Table, it also called Vbox, it is used to separate each child to show them in a vertical layout.

Source:

The CSS source of Box from SVN

Mold: Default (Vbox)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-vbox`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`tr.z-vbox-sep`	Height of separator	height: 0.3em; padding: 0; margin: 0;

Button

Button is made by 3*3 grid style, the background and text can be customized by users.

Note:

The CSS source of Button from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-button`	`-over`	`-clk`	`-focus`		-disd
Supported	V	V	V	V		!

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
`.z-button`	Font size and color	`font-family:` `${fontFamilyT}` `;` font-size: ${fontSizeM}; color: black;
.z-button .z-button-tl, .z-button .z-button-tr, .z-button .z-button-bl, .z-button .z-button-br	Corner graph	background-image:url(${c:encodeURL('~./zul/img/button/z-btn-trendy-corner.gif')});
.z-button .z-button-tm, .z-button .z-button-bm	Top and bottom edge	background-image:url(${c:encodeURL('~./zul/img/button/z-btn-trendy-x.gif')});
.z-button .z-button-cl, .z-button .z-button-cr	Right and left edge	background-image:url(${c:encodeURL('~./zul/img/button/z-btn-trendy-y.gif')});
.z-button .z-button-cm	Center image	background-image:url(${c:encodeURL('~./zul/img/button/z-btn-trendy-ctr.gif')});

Example:

<style>
.z-button .z-button-tl, .z-button .z-button-tr, .z-button .z-button-bl, .z-button .z-button-br,
.z-button .z-button-tm, .z-button .z-button-bm, .z-button .z-button-cl, .z-button .z-button-cr {
    background-image:none; background-color:#008bb6;     
}
.z-button .z-button-cm {
    background-image:none; background-color:#c1c2c3;    
}
</style>

<style>
.z-button .z-button-tl, .z-button .z-button-tr, .z-button .z-button-bl, .z-button .z-button-br,
.z-button .z-button-tm, .z-button .z-button-bm, .z-button .z-button-cl, .z-button .z-button-cr, .z-button .z-button-cm {
    background-image:none;    
}
</style>
<button tooltiptext="Here is a button" image="http://www.freebuttons.com/freebuttons/Alien/AlienDd5.gif"/>

Mold: os

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-button-os`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`.z-button` `-os`	Font size and color	`font-family:` `${fontFamilyC}` `;` font-size: ${fontSizeM}; font-weight: normal;

Calendar

Calendar is stuck by Javascript.

Source:

The CSS source of Calendar from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-calendar`	`-over`	`-seld`		`-over-seld`	-disd
Supported	V	!	!		!	!

Note: An exclamation mark(!) means the action effect uses CSS background to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
.z-calendar	Background and font size	background: white; border: 1px solid #7F9DB9; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
`.z-` `calendar` `-calyear`	Background of year	background: #e9f1f3; border: 1px solid; border-color: #f8fbff #aca899 #aca899 #f8fbff;
.z-`calendar`-calyear td	Font size of year	font-size: ${fontSizeM}; font-weight: bold; text-align: center; white-space: nowrap;
.z-`calendar`-calmon td	Font size of month	font-size: ${fontSizeS}; color: #35254F; text-align: center; cursor: pointer; text-decoration: none;
.z-`calendar`-calday	Border of day	border: 1px solid #ddd;
.z-`calendar`-calday td, .z-`calendar`-calday td a, .z-`calendar`-calday td a:visited	Font size of day	font-size: ${fontSizeS}; color: #35254F; text-align: center; cursor: pointer; text-decoration: none;
.z-`calendar`-calday td	Padding size of day	padding: 1px 3px;
z-`calendar`-caldow	Font size of DOW (Day Of Week)	font-size: ${fontSizeS}; color: #333; font-weight: bold; padding: 1px 2px; background: #e8e8f0; text-align: center;

Caption

Caption is used for Groupbox and Window as their title.

Note:

The CSS source of Caption from SVN

The CSS source of Caption with Groupbox from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-caption`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`.z-caption input, .z-` `caption td`	Font size	font-size: ${fontSizeS};
.z-caption .z-caption-l	Font size of the left	font-size: ${fontSizeM};
.z-caption .z-caption-r	Font size of the right	font-size: ${fontSizeM};
.z-caption button, .z-caption .z-button .z-button-btn	Font size of button	font-size: ${fontSizeXS}; font-weight: normal; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0;
.z-caption a, .z-caption a:visited	Font size of A tag	font-size: ${fontSizeS}; font-weight: normal; color: black; background: none; text-decoration: none;

Mold: Default (legend)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:
Supported

CSS Specification:

Class Name	Description	Default Values
`.z-fieldset legend`	Font size	font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;

Checkbox

Checkbox is composed of HTML Input element.

Source:

The CSS source of Checkbox from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-checkbox`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`.z-` `checkbox` `-cnt`	Font size	font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;

Column

Columns and Column are used for Grid .

Note:

The CSS source of Column from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-columns`
Supported	V
CSS naming:	`z-column`	`-over`
Supported	V	!

Note: An exclamation mark(!) means the action effect uses CSS background to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
tr.z-columns	Background image	background-image: url(${c:encodeURL('~./zul/img/grid/s_hd.gif')}); background-color: #C7E5F1;background-repeat: repeat-x;
`div.z-grid-header th.z-column`	Border and font size	overflow: hidden; border: 1px solid; border-color: #DAE7F6 #9EB6CE #9EB6CE #DAE7F6; white-space: nowrap; padding: 2px; font-size: ${fontSizeM}; font-weight: normal;
`div.z-grid-header .z-column-sort div.z-column-cnt`	Background of the content of the sort	cursor: pointer; padding-right: 9px; background:transparent url(${c:encodeURL('~./zul/img/sort/v_hint.gif')}); background-position: 99% center; background-repeat: no-repeat;
div.z-grid-header .z-column-sort-asc div.z-column-cnt	Background of the content of the ascendant sort	cursor: pointer; padding-right: 9px; background:transparent url(${c:encodeURL('~./zul/img/sort/v_asc.gif')}); background-position: 99% center; background-repeat: no-repeat;
div.z-grid-header .z-column-sort-dsc div.z-column-cnt	Background of the content of the descendant sort	cursor: pointer; padding-right: 9px; background:transparent url(${c:encodeURL('~./zul/img/sort/v_dsc.gif')}); background-position: 99% center; background-repeat: no-repeat;
div.z-grid-header .z-column-sort-asc, div.z-grid-header .z-column-sort-dsc	Background of the sort	background: #DDEEFB url(${c:encodeURL('~./zul/img/grid/column-over.gif')}) repeat-x 0 0;
div.z-column-cnt	Font size of the content	font-size: ${fontSizeM}; font-weight: normal; font-family: ${fontFamilyC};
div.z-column-cnt	Overflow	overflow: hidden
z-column-btn	Background of button	background: #DDEEFB url(${c:encodeURL('~./zul/img/grid/hd-btn.gif')}) no-repeat left center; display: none; position: absolute; width: 14px; right: 0; top: 0; z-index: 2; cursor: pointer;
.z-column-over	Hovered event	background: #B9EBFF url(${c:encodeURL('~./zul/img/grid/column-over.gif')}) repeat-x 0 0;

Columnlayout

Columnlayout and Columnchildren.

Source:

The CSS source of Columnlayout from SVN

Mold: Default

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-column-layout,

z-column-children

Supported

CSS Specification:

Class Name	Description	Default Values
.z-column-layout	Overflow	visibility: hidden; overflow: hidden; zoom: 1;
z-column-layout-inner	Overflow	overflow: hidden;
.z-column-children	Padding and margin	float: left; padding: 0; margin: 0; overflow: hidden; zoom: 1;
.z-column-children-body	Overflow	overflow: hidden; zoom: 1;
.z-column-children-cnt	Overflow	overflow: hidden;

Combobox

Combobox is composed of two parts, an input box and a button.

Source:

The CSS source of Combobox from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-combobox`	`-over`	`-btn-clk`	`-focus`	`-btn-over`	-disd
Supported	V	V	V	V	V	!

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
`.z-combobox`	Font size	border: 0; padding: 0; margin: 0; white-space: nowrap; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
.z-combobox-inp	Background of input element	font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal; background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border: 1px solid #7F9DB9;
.z-combobox-text-invalid	Background of invalidated	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870;
.z-combobox-readonly, .z-combobox-text-disd	Background of disabled and read only	background: #ECEAE4;
.z-combobox .z-combobox-img	Background of the button image	background: transparent url(${c:encodeURL('~./zul/img/button/combobtn.gif')}) no-repeat 0 0; vertical-align: top; cursor: pointer; width: 17px; height: 19px; border: 0; border-bottom: 1px solid #7F9DB9;
.z-combobox-pp	Font size and background of combobox's popup	display: block; position: absolute; z-index: 88000; background: white; border: 1px solid #7F9DB9; padding: 2px; font-size: ${fontSizeS}; overflow: auto; font-family: ${fontFamilyC}; font-weight: normal;

Comboitem

Comboitem belongs to Combobox as a row item, which distributes into four parts: image, label, content, and description.

Source:

The CSS source of Comboitem from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-combo-item`	`-over`	`-seld`		`-over-seld`	-disd
Supported	V	!	!			!

Note: An exclamation mark(!) means the action effect uses CSS background to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
`.z-combo` `-item.z-combobox-pp .z-combo-item, .z-combobox-pp .z-combo-item a, .z-combobox-pp .z-combo-item a:visited`	Font size	font-size: ${fontSizeM}; font-weight: normal; color: black; text-decoration: none;
.z-combobox-pp .z-combo-item-text, .z-combobox-pp .z-combo-item-img	Font size	white-space: nowrap; font-size: ${fontSizeS}; cursor: pointer;
.z-combobox-pp .z-combo-item-inner, .z-combobox-pp .z-combo-item-cnt	Color and font size of `Comboitem`'s description and content	color: #888; font-size: ${fontSizeXS}; padding-left: 6px;

Datebox

Datebox is composed of two parts, an input box and a button.

Source:

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-datebox`	`-over`	`-btn-clk`	`-focus`	`-btn-over`	-disd
Supported	V	V	V	V	V	!

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
`.z-datebox`	Font size	border: 0; padding: 0; margin: 0; white-space: nowrap; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
.z-datebox-inp	Background of input element	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border: 1px solid #7F9DB9;
.z-datebox-text-invalid	Background of invalidated	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870;
.z-datebox-readonly, .z-datebox-text-disd	Background of disabled and read only	background: #ECEAE4;
.z-datebox .z-datebox-img	Background of the button image	background: transparent url(${c:encodeURL('~./zul/img/button/datebtn.gif')}) no-repeat 0 0; vertical-align: top; cursor: pointer; width: 17px; height: 19px; border: 0; border-bottom: 1px solid #86A4BE;
.z-datebox-pp	Font size and background of datebox's popup	display: block; position: absolute; z-index: 88000; background: white; border: 1px solid #888888; padding: 2px; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;

Mold: Default - Calendar

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-datebox`	`-over`	`-seld`		`-over-seld`	-disd
Supported	V	!	!		!	!

Note: An exclamation mark(!) means the action effect uses CSS background to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
`.z-datebox-calyear`	Background of year	background: #e9f1f3; border: 1px solid; border-color: #f8fbff #aca899 #aca899 #f8fbff;
.z-datebox-calyear td	Font size of year	font-size: ${fontSizeM}; font-weight: bold; text-align: center; white-space: nowrap;
.z-datebox-calmon td	Font size of month	font-size: ${fontSizeS}; color: #35254F; text-align: center; cursor: pointer; text-decoration: none;
.z-datebox-calday	Border of day	border: 1px solid #ddd;
.z-datebox-calday td, .z-datebox-calday td a, .z-datebox-calday td a:visited	Font size of day	font-size: ${fontSizeS}; color: #35254F; text-align: center; cursor: pointer; text-decoration: none;
.z-datebox-calday td	Padding size of day	padding: 1px 3px;
z-datebox-caldow	Font size of DOW (Day Of Week)	font-size: ${fontSizeS}; color: #333; font-weight: bold; padding: 1px 2px; background: #e8e8f0; text-align: center;

Intbox

Intbox is composed of HTML Input element.

Source:

The CSS source of Decimalbox from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-decimalbox`			`-focus`		-disd
Supported	V			!		!

Note: An exclamation mark(!) means the action effect uses CSS background to do it, not CSS background-position with image .

CSS Specification:

Class Name	Description	Default Values
`.z-` `decimalbox`	Font size and background	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border: 1px solid #7F9DB9; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
.z-`decimalbox`-text-invalid	Invalid event	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870;
.z-`decimalbox`-readonly, .z-`decimalbox`-text-disd	Disabled and read-only	background: #ECEAE4;

Detail

Detail is used for Grid .

Note:

The CSS source of Detail from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-detail`
Supported	V

CSS Specification:

Class Name	Description	Default Values
tr.z-row td.z-detail-outer	Background	background: #bae2f0 url(${c:encodeURL('~./zul/img/grid/detail-bg.gif')}) repeat-y left; vertical-align: top; border-top: none; border-left: 1px solid white; border-right: 1px solid #CCC; border-bottom: 1px solid #DDD;
`.z-detail-img`	Background of image icon	background-image: url(${c:encodeURL('~./zul/img/grid/row-expand.gif')}); width: 100%; height: 18px; background-position: 4px 2px; background-repeat: no-repeat; background-color: transparent;

Doublebox

Doublebox is composed of HTML Input element.

Source:

The CSS source of Doublebox from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-doublebox`			`-focus`		-disd
Supported	V			!		!

Note: An exclamation mark(!) means the action effect uses CSS background to do it, not CSS background-position with image .

CSS Specification:

Class Name	Description	Default Values
`.z-` `doublebox`	Font size and background	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border: 1px solid #7F9DB9; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
.z-`doublebox`-text-invalid	Invalid event	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870;
.z-`doublebox`-readonly, .z-`doublebox`-text-disd	Disabled and read-only	background: #ECEAE4;

Fisheyebar

Fisheyebar and Fisheye.

Source:

The CSS source of Fisheyebar from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-fisheyebar,` `z-fisheye`
Supported	V

CSS Specification:

Class Name	Description	Default Values
.z-fisheyebar	Visibility	visibility: hidden;
.z-fisheyebar-inner	Position of fisheyebar	position: relative;
.z-fisheye	Position of fisheye	position: absolute; z-index: 2;
.z-fisheye-img	Image size	border: 0px; position: absolute; width: 100%; height: 100%;
.z-fisheye-text	Font size	font-size: ${fontSizeM}; font-weight: normal; font-family: Arial, Helvetica, sans-serif; background-color: #eee; border: 2px solid #666; padding: 2px; text-align: center; position: absolute; display: none;

Footer

Foot and Footer are used for Grid .

Note:

The CSS source of Footer from SVN

Mold: Default

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-foot,

z-footer

Supported

CSS Specification:

Class Name	Description	Default Values
div.z-footer-cnt	Font size	border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
`div.z-footer-cnt`	Overflow	overflow: hidden;

Grid

Grid combine with a set of its children, including Rows , Row , Columns , Column , Foot , Footer , Group , Groupfoot , Detail , and Paging .

Note:

The CSS source of Grid from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-grid`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`div.z-grid`	Background color	background: #DAE7F6; border: 1px solid #7F9DB9; overflow: hidden; zoom: 1;
div.z-grid-header, div.z-grid-header tr, div.z-grid-footer	Border	border: 0; overflow: hidden; width: 100%;
div.z-grid-body	Background color of the body	background: white; border: 0; overflow: auto; width: 100%;
div.z-grid-footer	Background color of the footer	background: #DAE7F6; border-top: 1px solid #9EB6CE;

Mold: paging

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-grid`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`div.z-grid-pgi-b`	Border of bottom paging	border-top: 1px solid #AAB; overflow: hidden;
div.z-grid-pgi-t	Border of top paging	border-bottom: 1px solid #AAB; overflow: hidden;

Group

Group is used for Grid .

Note:

The CSS source of Group from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-group`
Supported	V

CSS Specification:

Class Name	Description	Default Values
tr.z-group	Background image	background: #E9F2FB url(${c:encodeURL('~./zul/img/grid/group_bg.gif')}) repeat-x 0 0;
`div.z-group-cnt`	Font size	border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
.z-group-inner .z-group-cnt span, .z-group-inner .z-group-cnt	Color and font size	color:#3764a0; font: normal ${fontSizeM} ${fontFamilyT}; padding: 4px 2px; width: auto;font-weight:bold;
td.z-group-inner	Padding and border	padding: 2px; overflow: hidden; border-top: 2px solid #81BAF5; border-bottom: 1px solid #bcd2ef; color: #3764a0; font: normal ${fontSizeM} ${fontFamilyT};font-weight:bold;
.z-group-img	Image icon	width: 18px; min-height: 18px; height: 100%; background-image: url(${c:encodeURL('~./zul/img/toggle.gif')}); background-repeat: no-repeat; vertical-align: top; cursor: pointer; border: 0;

Groupbox

Groupbox has two mold: Default and 3d. Groupbox combines Caption as its title.

Note:

The CSS source of Groupbox from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-fieldset`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`.z-fieldset-cnt`	Overflow of content	overflow: hidden;

Mold: 3d

Groupbox's 3d mold is made by 3*3 grid style.

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-groupbox`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`.z-groupbox-header`	Overflow of header	overflow: hidden; zoom: 1;
.z-groupbox-tl .z-groupbox-header	Font size	Color: #373737; font-family: ${fontFamilyT};font-size: ${fontSizeM}; font-weight: normal; padding: 5px 0 4px 0; border: 0 none; background: transparent;
.z-groupbox-tm	Background of top middle	background: transparent url(${c:encodeURL('~./zul/img/groupbox/groupbox-tb.png')}) repeat-x 0 0; overflow: hidden;
.z-groupbox-tl	Background of top left	background: transparent url(${c:encodeURL('~./zul/img/groupbox/groupbox-corners.png')}) no-repeat 0 0; padding-left: 6px; zoom: 1; border-bottom: 1px solid #B2CCD9;
.z-groupbox-tr	Background of top right	background: transparent url(${c:encodeURL('~./zul/img/groupbox/groupbox-corners.png')}) no-repeat right 0; zoom: 1; padding-right: 6px;
.z-groupbox-cnt	Border of content	border: 1px solid #B2CCD9; padding: 5px;
.z-groupbox-bm	Background of bottom middle	background:transparent url(${c:encodeURL('~./img/shdmd.gif')}) repeat-x 0 0; height: 6px; font-size: 0; line-height: 0; zoom: 1;
.z-groupbox-bl	Background of bottom left	background:transparent url(${c:encodeURL('~./img/shdlf.gif')}) no-repeat 0 bottom; padding-left: 6px; zoom: 1;
.z-groupbox-br	Background of bottom right	background:transparent url(${c:encodeURL('~./img/shdrg.gif')}) no-repeat right bottom; padding-right: 6px; zoom: 1;

Groupfoot

Groupfoot is used for Grid .

Note:

The CSS source of Groupfoot from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-group-foot`
Supported	V

CSS Specification:

Class Name	Description	Default Values
.z-group-foot	Background image	background: #E9F2FB url(${c:encodeURL('~./zul/img/grid/groupfoot_bg.gif')}) repeat-x 0 0;
`div.z-group-foot-cnt`	Border	border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
td.z-group-foot-inner	Padding	padding: 2px; overflow: hidden;
.z-group-foot-inner .z-group-foot-cnt span, .z-group-foot-inner .z-group-foot-cnt	Font size and color	color: #2C559C; font: normal ${fontSizeM} ${fontFamilyT};font-weight:bold;

Hbox

Hbox is composed of HTML Table, it is a kind of box , and shows each child in a horizontal layout.

Source:

The CSS source of Hbox from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-hbox`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`td.z-hbox-sep`	Width of separator	width: 0.3em; padding: 0; margin: 0;

Intbox

Intbox is composed of HTML Input element.

Source:

The CSS source of Intbox from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-intbox`			`-focus`		-disd
Supported	V			!		!

Note: An exclamation mark(!) means the action effect uses CSS background to do it, not CSS background-position with image .

CSS Specification:

Class Name	Description	Default Values
`.z-` `int` `box`	Font size and background	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border: 1px solid #7F9DB9; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
.z-`int` `box`-text-invalid	Invalid event	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870;
.z-`int` `box`-readonly, .z-`int` `box`-text-disd	Disabled and read-only	background: #ECEAE4;

Label

Label is composed of HTML Span.

Source:

The CSS source of Label from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-label`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`.z-label`	Font size	font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;

Listbox

Listbox combine with a set of its children, including Listhead , Listheader , Listitem , Listcell , Listgroup , Listgroupfoot , Listfoot , Listfooter , and Paging .

Note:

The CSS source of Listbox from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-listbox`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`div.z-listbox`	Background color	background: #DAE7F6; border: 1px solid #7F9DB9; overflow: hidden; zoom: 1;
div.z-listbox-header, div.z-listbox-header tr, div.z-listbox-footer	Border	border: 0; overflow: hidden; width: 100%;
div.z-listbox-body	Background color of the body	background: white; border: 0; overflow: auto; width: 100%; position: relative;
div.z-listbox-footer	Background color of the footer	background: #DAE7F6; border-top: 1px solid #9EB6CE;

Mold: paging

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-listbox`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`div.z-` `listbox` `-pgi-b`	Border of bottom paging	border-top: 1px solid #AAB; overflow: hidden;
div.z-listbox-pgi-t	Border of top paging	border-bottom: 1px solid #AAB; overflow: hidden;

Mold: select

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-listbox`
Supported	V

CSS Specification:

Class Name

Description

Default Values

Listfooter

Listfoot and Listfooter are used for Listbox .

Note:

The CSS source of Listfooter from SVN

Mold: Default

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-list-foot,

z-list-footer

Supported

CSS Specification:

Class Name	Description	Default Values
.z-list-footer	Font size	cursor: pointer; padding: 0 2px; font-size: ${fontSizeM}; font-weight: normal; overflow: hidden;
div.z-list-footer-cnt	Font size of the content	border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
`div.z-list-footer-cnt`	Overflow	overflow: hidden;

Listgroup

Listgroup is used for Listbox .

Note:

The CSS source of Listgroup from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-list-group`
Supported	V

CSS Specification:

Class Name	Description	Default Values
tr.z-list-group	Background image	background: #E9F2FB url(${c:encodeURL('~./zul/img/grid/group_bg.gif')}) repeat-x 0 0;
td.z-list-group-inner div.z-list-cell-cnt	Color and font size	color:#3764a0; font: normal ${fontSizeM} ${fontFamilyT}; padding: 4px 2px; width: auto;font-weight:bold;
`td.z-list-group-inner`	Padding and border	padding-top: 2px; border-top: 2px solid #81BAF5;border-bottom: 1px solid #bcd2ef;
.z-list-group-img	Image icon	width: 18px; min-height: 18px; height: 100%; background-image: url(${c:encodeURL('~./zul/img/toggle.gif')}); background-repeat: no-repeat; background-position: 0px 0px; vertical-align: top; cursor: pointer; border: 0;

Listgroupfoot

Listgroupfoot is used for Listbox .

Note:

The CSS source of Listgroupfoot from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-list-group-foot`
Supported	V

CSS Specification:

Class Name	Description	Default Values
.z-list-group-foot	Background image	background: #E9F2FB url(${c:encodeURL('~./zul/img/grid/groupfoot_bg.gif')}) repeat-x 0 0;
`td.z-list-group-foot-inner div.z-list-cell-cnt`	Color and font size	color: #2C559C; font: normal ${fontSizeM} ${fontFamilyT};font-weight:bold;

Listheader

Listhead and Listheader are used for Listbox .

Note:

The CSS source of Listheader from SVN

Mold: Default

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-list-head,

z-list-header

Supported

CSS Specification:

Class Name	Description	Default Values
div.z-listbox-header tr.z-list-head	Background image	background-image: url(${c:encodeURL('~./zul/img/grid/s_hd.gif')}); background-color: #C7E5F1;background-repeat: repeat-x;
`div.z-listbox-header th.z-list-header`	Border and font size	overflow: hidden; border: 1px solid; border-color: #DAE7F6 #9EB6CE #9EB6CE #DAE7F6; white-space: nowrap; padding: 2px; font-size: ${fontSizeM}; font-weight: normal;
`div.z-listbox-header th.z-list-header-sort div.z-list-header-cnt`	Background of the content of the sort	cursor: pointer; padding-right: 9px; background:transparent url(${c:encodeURL('~./zul/img/sort/v_hint.gif')}); background-position: 99% center; background-repeat: no-repeat;
div.z-listbox-header th.z-list-header-sort-asc div.z-list-header-cnt	Background of the content of the ascendant sort	cursor: pointer; padding-right: 9px; background:transparent url(${c:encodeURL('~./zul/img/sort/v_asc.gif')}); background-position: 99% center; background-repeat: no-repeat;
div.z-listbox-header th.z-list-header-sort-dsc div.z-list-header-cnt	Background of the content of the descendant sort	cursor: pointer; padding-right: 9px; background:transparent url(${c:encodeURL('~./zul/img/sort/v_dsc.gif')}); background-position: 99% center; background-repeat: no-repeat;
div.z-list-header-cnt	Font size of the content	border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
div.z-list-header-cnt	Overflow	overflow: hidden

Listitem

Listitem and Listcell are used for Listbox .

Note:

The CSS source of Listitem from SVN

Mold: Default

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-list-item,

z-list-cell

-over

-seld

-focus

-over-seld

-disd

Supported

Note: An exclamation mark(!) means the action effect uses CSS background to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
tr.z-list-item, tr.z-list-item a, tr.z-list-item a:visited	Font size of listitem	font-size: ${fontSizeM}; font-weight: normal; color: black; text-decoration: none;
`tr.z-list-item td.z-list-item-focus`	Background of focused event	background-image: url(${c:encodeURL('~./zul/img/focusd.png')}); background-repeat: no-repeat;
`tr.z-list-item-seld`	Background of selected event	background: #b3c8e8; border: 1px solid #6f97d2;
tr.z-list-item-over	Background of hovered event	background: #dae7f6;
tr.z-list-item-over-seld	Background of hovered and selected event	background: #6eadff;
div.z-list-cell-cnt	Font size of listcell	border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;

Longbox

Longbox is composed of HTML Input element.

Source:

The CSS source of Longbox from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-longbox`			`-focus`		-disd
Supported	V			!		!

Note: An exclamation mark(!) means the action effect uses CSS background to do it, not CSS background-position with image .

CSS Specification:

Class Name	Description	Default Values
`.z-` `longbox`	Font size and background	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border: 1px solid #7F9DB9; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
.z-`longbox`-text-invalid	Invalid event	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870;
.z-`longbox`-readonly, .z-`longbox`-text-disd	Disabled and read-only	background: #ECEAE4;

Menubar

Menubar combine with two children: Menu , and Menuitem .

Note:

The CSS source of Menubar from SVN

Mold: Default (Horizontal)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-menubar-hor`
Supported	V

CSS Specification:

Class Name

Description

Default Values

.z-menubar-hor

Background image

border-color: #a9bfd3; border-style: solid; border-width: 0 0 1px 0; display: block; padding: 2px; background: #CEE7F5 url(${c:encodeURL('~./zul/img/button/tb-bg.png')}) repeat-x top left;

position: relative; zoom: 1;

Mold: Default (Vertical)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-menubar-ver`
Supported	V

CSS Specification:

Class Name	Description	Default Values
.z-menubar-ver	Background image	border-color: #a9bfd3; border-style: solid; border-width: 0 0 1px 0; display: block; padding: 2px; background: #CEE7F5 url(${c:encodeURL('~./zul/img/button/tb-bg.png')}) repeat-x top left; position: relative; zoom: 1;

Menu in Menubar

Menu is made by HTML Table with 3 parts. It can separate three status: Text with Icon, Icon only, and Text only.

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-menu`	`-btn-over`	`-btn-seld`			-disd
Supported	V	V	V			!

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
.z-menubar-hor .z-menu	Vertical align	vertical-align: middle;
.z-menubar-hor .z-menu	Font size	white-space: nowrap; font: normal ${fontSizeMS} ${fontFamilyT};
.z-menu-btn button	Font size of button text	border: 0 none; background: transparent; font-family: ${fontFamilyT}; font-size: ${fontSizeMS}; padding-left: 3px; padding-right: 3px; cursor: pointer; margin: 0; overflow: visible; width: auto; -moz-outline: 0 none; outline: 0 none; min-height: 13px;
.z-menu-btn-img .z-menu-btn-m .z-menu-btn-text	Size of menu-button-text	background-position: center; background-repeat: no-repeat; height: 16px; width: 16px; cursor: pointer; white-space: nowrap; padding: 0;
.z-menu-btn-img .z-menu-btn-m	Padding of button middle	padding: 1px;
.z-menu-btn-text-img .z-menu-btn-m .z-menu-btn-text	Padding of button-text-image	background-position: 0 2px; background-repeat: no-repeat; padding-left: 18px; padding-top: 3px; padding-bottom: 2px; padding-right:0;
.z-menu-btn-l	Size of button left	font-size: 1px; line-height: 1px; width: 3px; height: 21px;
.z-menu-btn-r	Size of button right	font-size: 1px; line-height: 1px; width: 3px; height: 21px;
.z-menu-btn .z-menu-btn-m em	Arrow background of button middle	display: block; background-color : transparent; background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-arrow.png')}); background-repeat : no-repeat; background-position : right 0; padding-right: 10px; min-height: 16px;
.z-menu-btn-text-img .z-menu-btn-m em	Arrow background of button middle with button-text-image	display: block; background-color : transparent; background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-arrow.png')}); background-repeat : no-repeat; background-position : right 3px; padding-right: 10px;
.z-menubar-hor .z-menu-btn-over .z-menu-btn-l	Background of the button left with hovered event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : no-repeat; background-position : 0 0;
.z-menubar-hor .z-menu-btn-over .z-menu-btn-r	Background of the button right with hovered event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : no-repeat; background-position : 0 -21px;
.z-menubar-hor .z-menu-btn-over .z-menu-btn-m	Background of the button middle with hovered event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : repeat-x; background-position : 0 -42px;
.z-menubar-hor .z-menu-btn-seld .z-menu-btn-l	Background of the button left with selected event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : no-repeat; background-position :0 -63px;
.z-menubar-hor .z-menu-btn-seld .z-menu-btn-r	Background of the button right with selected event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : no-repeat; background-position : 0 -84px;
.z-menubar-hor .z-menu-btn-seld .z-menu-btn-m	Background of the button middle with selected event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : repeat-x; background-position : 0 -105px;
.z-menubar-hor .z-menu-btn .z-menu-btn-m em	Padding of the button middle	padding-right: 8px;

Menuitem in Menubar

Menuitem is made by HTML Table with 3 parts. It can separate three status: Text with Icon, Icon only, and Text only.

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-menu-item`	`-btn-over`	`-btn-seld`			-disd
Supported	V	V	V			!

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
.z-menubar-hor .z-menu-item	Vertical align	vertical-align: middle;
.z-menubar-hor .z-menu-item	Font size	white-space: nowrap; font: normal ${fontSizeMS} ${fontFamilyT};
.z-menu-item-btn button	Font size of button text	border: 0 none; background: transparent; font-family: ${fontFamilyT}; font-size: ${fontSizeMS}; padding-left: 3px; padding-right: 3px; cursor: pointer; margin: 0; overflow: visible; width: auto; -moz-outline: 0 none; outline: 0 none; min-height: 13px;
.z-menu-item-btn-img .z-menu-item-btn-m .z-menu-item-btn-text	Size of menu-button-text	background-position: center; background-repeat: no-repeat; height: 16px; width: 16px; cursor: pointer; white-space: nowrap; padding: 0;
.z-menu-item-btn-img .z-menu-item-btn-m	Padding of button middle	padding: 1px;
.z-menu-item-btn-text-img .z-menu-item-btn-m .z-menu-item-btn-text	Padding of button-text-image	background-position: 0 2px; background-repeat: no-repeat; padding-left: 18px; padding-top: 3px; padding-bottom: 2px; padding-right:0;
.z-menu-item-btn-l	Size of button left	font-size: 1px; line-height: 1px; width: 3px; height: 21px;
.z-menu-item-btn-r	Size of button right	font-size: 1px; line-height: 1px; width: 3px; height: 21px;
.z-menu-item-cnt	Font size of the content	text-decoration: none; white-space: nowrap; font-style: normal; font-family: ${fontFamilyT}; font-size: ${fontSizeMS};
.z-menubar-hor .z-menu-item-btn-over .z-menu-item-btn-l	Background of the button left with hovered event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : no-repeat; background-position : 0 0;
.z-menubar-hor .z-menu-item-btn-over .z-menu-item-btn-r	Background of the button right with hovered event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : no-repeat; background-position : 0 -21px;
.z-menubar-hor .z-menu-item-btn-over .z-menu-item-btn-m	Background of the button middle with hovered event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : repeat-x; background-position : 0 -42px;
.z-menubar-hor .z-menu-item-btn-seld .z-menu-item-btn-l	Background of the button left with selected event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : no-repeat; background-position :0 -63px;
.z-menubar-hor .z-menu-item-btn-seld .z-menu-item-btn-r	Background of the button right with selected event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : no-repeat; background-position : 0 -84px;
.z-menubar-hor .z-menu-item-btn-seld .z-menu-item-btn-m	Background of the button middle with selected event	background-image : url(${c:encodeURL('~./zul/img/button/tb-btn-side.png')}); background-repeat : repeat-x; background-position : 0 -105px;
.z-menubar-hor .z-menu-item-btn .z-menu-item-btn-m em	Padding of the button middle	padding-right: 0px;

Menupopup

Menupopup combine with three children: Menu, Menuitem, and Menuseparator.

Note:

The CSS source of Menupopup from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-menu-popup`
Supported	V

CSS Specification:

Class Name	Description	Default Values
.z-menu-popup	Background image	border:1px solid #7F9DB9;z-index: 88000; zoom: 1; padding: 2px; background: #E7F3FA url(${c:encodeURL('~./zul/img/menu2/pp-bg.gif')}) repeat-y;
.z-menu-popup-cnt li	Font size	text-decoration: none; font: normal ${fontSizeMS} ${fontFamilyT}; white-space: nowrap; display: block; padding: 1px;
.z-menu-popup .z-menu-popup-cnt	Padding	Padding: 0;
.z-menu-popup-cnt	Border of the content	background: transparent; border: 0 none;

Menu in Menupopup

Menu is made by HTML Li.

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-menu`	`-over`				-disd
Supported	V	!				!

Note: An exclamation mark(!) means the action effect uses CSS background to do it, not CSS background-position .

CSS Specification:

Class Namez-menu-cnt	Description	Default Values
.z-menu-cnt	Font size	text-decoration: none; white-space: nowrap; font-style: normal; font-family: ${fontFamilyT}; font-size: ${fontSizeMS};
.z-menu-popup a.z-menu-cnt	Padding and color of menu content	display: block; line-height: 16px; padding: 3px 21px 3px 3px; white-space: nowrap; text-decoration: none; color: #222; -moz-outline: 0 none; outline: 0 none; cursor: pointer;
.z-menu-cnt-img	Arrow background	background: transparent url(${c:encodeURL('~./zul/img/menu2/arrow.png')}) no-repeat right;
.z-menu-img	Border and margin	border: 0 none; height: 16px; padding: 0; vertical-align: top; width: 16px; margin: 0 8px 0 0; background-position: center;
.z-menu-popup .z-menu-over .z-menu-cnt	Color of hovered event	color:#233d6d;

Menuitem in Menupopup

Menuitem is made by HTML Li. It can separate three status: Default, checked, and unchecked.

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-menu-item`	`-over`				-disd
Supported	V	!				!

Note: An exclamation mark(!) means the action effect uses CSS background to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
.z-menu-item-cnt	Font size	text-decoration: none; white-space: nowrap; font-style: normal; font-family: ${fontFamilyT}; font-size: ${fontSizeMS};
.z-menu-popup a.z-menu-item-cnt	Padding and color of menu content	display: block; line-height: 16px; padding: 3px 21px 3px 3px; white-space: nowrap; text-decoration: none; color: #222; -moz-outline: 0 none; outline: 0 none; cursor: pointer;
z-menu-item-img	Border and margin	border: 0 none; height: 16px; padding: 0; vertical-align: top; width: 16px; margin: 0 8px 0 0; background-position: center;
.z-menu-popup .z-menu-item-over .z-menu-item-cnt	Color of hovered event	color:#233d6d;
.z-menu-item-cnt-ck .z-menu-item-img	Checked background	background: transparent url(${c:encodeURL('~./zul/img/menu2/checked.gif')}) no-repeat center;
.z-menu-item-cnt-unck .z-menu-item-img	Unchecked background	background: transparent url(${c:encodeURL('~./zul/img/menu2/unchecked.png')}) no-repeat center;

Menuseparator

Menuseparator is used for Menupopup.

Note:

The CSS source of Menuseparator from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-menu-separator`
Supported	V

CSS Specification:

Class Name	Description	Default Values
.z-menu-popup .z-menu-separator	Size	font-size: 1px; line-height: 1px;
.z-menu-separator-inner	Background	display: block; font-size: 1px; line-height: 1px; margin: 2px 3px; background-color: #e0e0e0; border-bottom: 1px solid #fff; overflow: hidden; width: auto;

Paging

Paging is used for Grid , Listbox , and Tree .

Note:

The CSS source of Paging from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-paging`	`-btn-over`	`-btn-clk`			-disd
Supported	V	V	V			!

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
.z-paging	Background image	border-color: #a9bfd3; border-style: solid; border-width: 0 0 1px 0; display: block; padding: 2px; background: #D0DEF0 url(${c:encodeURL('~./zul/img/button/tb-bg.png')}) repeat-x top left; position: relative; zoom: 1;
`.z-paging .z-paging-text`	Padding of the text	padding:2px;
.z-paging .z-paging-sep	Background of separator	background-image:url(${c:encodeURL('~./zul/img/paging/pg-split.gif')}); background-position:center; background-repeat:no-repeat; display:block;font-size:1px;height:16px;width:4px;overflow:hidden; cursor:default;margin:0 2px 0;border:0;
.z-paging-inp	Size of input element	width: 24px; height: 14px; border: 1px solid #7F9DB9;
.z-paging-btn-m .z-paging-first, .z-paging-btn-m .z-paging-last, .z-paging-btn-m .z-paging-next, .z-paging-btn-m .z-paging-prev	Size of button	background-position: center; background-repeat: no-repeat; height: 16px; width: 16px; cursor: pointer; white-space: nowrap; padding: 0;
.z-paging td, .z-paging span, .z-paging input, .z-paging div, .z-paging select, .z-paging label	Font size	white-space: nowrap; font: normal ${fontSizeM} ${fontFamilyT};
.z-paging-first	Background of the first button	background-image: url(${c:encodeURL('~./zul/img/paging/pg-first.gif')})!important; background-position:0px 0px!important;
.z-paging-last	Background of the last button	background-image: url(${c:encodeURL('~./zul/img/paging/pg-last.gif')})!important; background-position:0px 0px!important;
.z-paging-next	Background of the next button	background-image: url(${c:encodeURL('~./zul/img/paging/pg-next.gif')})!important; background-position:0px 0px!important;
.z-paging-prev	Background of the previous button	background-image: url(${c:encodeURL('~./zul/img/paging/pg-prev.gif')})!important; background-position:0px 0px!important;
.z-paging-info	Position of the information	position:absolute;top:5px;right:8px;color:#444;
.z-paging-btn	Font size of button	font-weight: normal; font-family: ${fontFamilyT}; cursor: pointer; white-space: nowrap; font-size: ${fontSizeM}; width: auto;

Mold: os

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-paging-os`	`:Hover`	`-seld`
Supported	V	V	V

CSS Specification:

Class Name	Description	Default Values
.z-paging-os	Background image	background: white; padding: 5px; zoom:1;
`.z-paging-os .z-paging-os-cnt`	Background of content	padding: 2px 3px; background-color:#C7E5F1; background-image:url(${c:encodeURL('~./zul/img/grid/s_hd.gif')}); background-repeat:repeat-x; border: 1px solid #DAE7F6; font-size: ${fontSizeS}; color: #1725A0; font-weight: normal; text-decoration: none;
.z-paging .z-paging-sep	Background of separator	background-image:url(${c:encodeURL('~./zul/img/paging/pg-split.gif')}); background-position:center; background-repeat:no-repeat; display:block;font-size:1px;height:16px;width:4px;overflow:hidden; cursor:default;margin:0 2px 0;border:0;
.z-paging-os .z-paging-os-cnt:hover	Color of hover	color: red;
.z-paging-os .z-paging-os-seld	Background and font size of selected event	font-size: ${fontSizeS}; color: white; font-weight: bold; background-image:url(${c:encodeURL('~./zul/img/grid/paging-os-seld.gif')});
.z-paging-os .z-paging-os-seld:hover	Color of selected hover	color: #403E39;
.z-paging-os span	Font size	font-size: ${fontSizeS}; color: #555; font-weight: normal;

Panel

Panel is made by 3*3 grid style, it can separate two styling: Has frame and Without frame.

Note:

The CSS source of Panel from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-panel`
Supported	V
CSS naming:	`-close` `-maximize` `-maximized` `-minimize` `-toggle`	`-over`
Supported	V	V

CSS Specification:

Class Name	Description	Default Values
.z-panel	Border	border-style: solid; border-color: #B1CBD5; border-width: 0; overflow: hidden;
`.z-panel-header`	Background of header	overflow: hidden; zoom: 1; color: #15428b; font: normal ${fontSizeM} ${fontFamilyT}; padding: 5px 3px 4px 5px; border: 1px solid #B1CBD5; line-height: 15px; background:transparent url(${c:encodeURL('~./zul/img/panel/panel-tb.png')}) repeat-x 0 -1px; font-weight:bold;
.z-panel-children	Border of panel children	border: 1px solid #B1CBD5; border-top: 0 none; overflow: hidden; background: white; position: relative;
.z-panel-bbar .z-toolbar	Border of bottom toolbar	border: 1px solid #B1CBD5; border-top: 0 none; overflow: hidden; padding: 2px;
.z-panel-tbar .z-toolbar	Border of top toolbar	border: 1px solid #B1CBD5;overflow: hidden; padding: 2px; border-top: 1px solid #B1CBD5; border-bottom: 0 none;
.z-panel-children-noheader	Border without header of panel children	Border-top: 1px solid #B1CBD5;
.z-panel-cm .z-panel-children	Top border	border-top: 1px solid #B1CBD5;
.z-panel-tl .z-panel-header	Font size of header	color: #15428b; font: normal ${fontSizeM} ${fontFamilyT}; padding: 5px 0 4px 0; border: 0 none; background: transparent;font-weight:bold;
.z-panel-tm	Background of top middle	background: transparent url(${c:encodeURL('~./zul/img/panel/panel-tb.png')}) repeat-x 0 0; overflow: hidden;
.z-panel-tl	Background of top left	background: transparent url(${c:encodeURL('~./zul/img/panel/panel-corners.png')}) no-repeat 0 0; padding-left: 6px; zoom: 1; border-bottom: 1px solid #B1CBD5;
.z-panel-tr	Background of top right	background: transparent url(${c:encodeURL('~./zul/img/panel/panel-corners.png')}) no-repeat right 0; zoom: 1; padding-right: 6px;
.z-panel-cm	Background of center middle	border: 0 none; padding: 0; margin: 0; font: normal ${fontSizeM} ${fontFamilyT}; padding-top: 6px; background: #D8ECF7;
.z-panel-cl	Background of center left	background: #fff url(${c:encodeURL('~./zul/img/panel/panel-lr.gif')}) repeat-y 0 0; padding-left: 6px; zoom: 1;
.z-panel-cr	Background of center right	background: transparent url(${c:encodeURL('~./zul/img/panel/panel-lr.gif')}) repeat-y right 0; padding-right: 6px; zoom: 1;
.z-panel-bm	Background of bottom middle	background: transparent url(${c:encodeURL('~./zul/img/panel/panel-tb.png')}) repeat-x 0 bottom; zoom: 1;
.z-panel-bl	Background of bottom left	background: transparent url(${c:encodeURL('~./zul/img/panel/panel-corners.png')}) no-repeat 0 bottom; padding-left: 6px; zoom: 1;
.z-panel-br	Background of bottom right	background: transparent url(${c:encodeURL('~./zul/img/panel/panel-corners.png')}) no-repeat right bottom; padding-right: 6px; zoom: 1;
.z-panel-noheader	Border without header	border-bottom: 0px;
.z-panel-noheader .z-panel-tm	Height without header	height: 6px; font-size: 0; line-height: 0;
.z-panel-cm .z-panel-children	Border of panel children	border:1px solid #B1CBD5; background: transparent;
.z-panel-bm .z-panel-fbar	Padding of footer toolbar	padding-bottom: 6px;
.z-panel-nofbar .z-panel-bm	Height without footer toolbar	height: 6px; font-size: 0; line-height: 0;
.z-panel-noborder .z-panel-children-noborder	No border of panel children	Border-width: 0;
.z-panel-noborder .z-panel-header-noborder	No border of header	border-width: 0; border-bottom: 1px solid #B1CBD5;
.z-panel-noborder .z-panel-tbar-noborder .z-toolbar	No border of top toolbar	border-width: 0; border-bottom: 1px solid #B1CBD5;
.z-panel-noborder .z-panel-bbar-noborder .z-toolbar	No border of bottom toolbar	border-width: 0; border-top: 1px solid #B1CBD5;
.z-panel-tool	Background of tool icons	overflow: hidden; width: 15px; height: 15px; float: right; cursor: pointer; background: transparent url(${c:encodeURL('~./zul/img/panel/tool-btn.gif')}) no-repeat; margin-left: 2px;

Popup

Popup is made by 3*3 grid style.

Note:

The CSS source of Popup from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-popup`
Supported	V

CSS Specification:

Class Name	Description	Default Values
.z-popup	Font size	position: absolute; top: 0; left: 0; visibility: hidden; z-index: 88000; border: 0 none; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
`.z-popup .z-popup-tm`	Background of top middle	background: transparent url(${c:encodeURL('~./zul/img/popup/pp-tb.png')}) repeat-x 0 0; overflow: hidden; zoom: 1; font-size: 0; line-height: 0; height: 8px;
.z-popup .z-popup-tl	Background of top left	background: transparent url(${c:encodeURL('~./zul/img/popup/pp-corners.png')}) no-repeat 0 0; padding-left: 8px; overflow: hidden; zoom: 1;
.z-popup .z-popup-tr	Background of top right	background:transparent url(${c:encodeURL('~./zul/img/popup/pp-corners.png')}) no-repeat right -8px; overflow: hidden; zoom: 1; padding-right: 8px;
.z-popup .z-popup-cm	Background of center middle	background: #E5F3FB url(${c:encodeURL('~./zul/img/popup/pp-tb.png')}) repeat-x 0 -16px; padding:4px 10px; overflow: hidden; zoom: 1;
.z-popup .z-popup-cl	Background of center left	background: transparent url(${c:encodeURL('~./zul/img/popup/pp-l.png')}) repeat-y 0; padding-left: 4px; overflow: hidden; zoom: 1;
.z-popup .z-popup-cr	Background of center right	background: transparent url(${c:encodeURL('~./zul/img/popup/pp-r.png')}) repeat-y right; padding-right: 4px; overflow: hidden; zoom: 1;
.z-popup .z-popup-bm	Background of bottom middle	background: transparent url(${c:encodeURL('~./zul/img/popup/pp-tb.png')}) repeat-x 0 -8px; height: 8px; overflow: hidden; zoom: 1;
.z-popup .z-popup-bl	Background of bottom left	background: transparent url(${c:encodeURL('~./zul/img/popup/pp-corners.png')}) no-repeat 0 -16px; zoom: 1; padding-left: 8px;
.z-popup .z-popup-br	Background of bottom right	background: transparent url(${c:encodeURL('~./zul/img/popup/pp-corners.png')}) no-repeat right -24px; zoom:1; padding-right: 8px;
.z-popup .z-popup-cnt	Color	margin: 0 !important; line-height: 14px; color: #444; padding: 0;

Portallayout

Portallayout and Portalchildren.

Source:

The CSS source of Portallayout from SVN

Mold: Default

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-portal-layout,

z-portal-children

Supported

CSS Specification:

Class Name	Description	Default Values
.z-portal-layout	Overflow	visibility: hidden; overflow: hidden; zoom: 1;
z-portal-layout-inner	Overflow	overflow: hidden;
.z-portal-children	Padding and margin	float: left; padding: 0; margin: 0; overflow: hidden; zoom: 1;
.z-portal-children-body	Overflow	overflow: hidden; zoom: 1;
.z-portal-children-cnt	Overflow	overflow: hidden;

Progressmeter

Source:

The CSS source of Progressmeter from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-progressmeter`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`div.z-progressmeter`	Background image	background:#E0E8F3 url(${c:encodeURL('~./zk/img/prgmeter_bg.gif')}) repeat-x scroll 0 0 ; border:1px solid #7FA9E4; text-align: left; height: 17px;
span.z-progressmeter-img	Background image of front	display:-moz-inline-box; display:inline-block; background:#9CBFEE url(${c:encodeURL('~./zk/img/prgmeter.gif')}) repeat-x scroll left center; height: 17px; font-size:0;

Radio

Radio is composed of HTML Input element.

Source:

The CSS source of Radio from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-radio`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`.z-` `radio` `-cnt`	Font size	font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;

Row

Rows and Row are used for Grid .

Note:

The CSS source of Row from SVN

Mold: Default

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-rows,

z-row

Supported

CSS Specification:

Class Name	Description	Default Values
div.z-row-cnt	Font size	border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
`div.z-row-cnt`	Color	color: black;
`td.z-row-inner`	Padding	padding: 2px; overflow: hidden;
tr.z-row td.z-row-inner	Background color and border	background: white; border-top: none; border-left: 1px solid white; border-right: 1px solid #CCC; border-bottom: 1px solid #DDD;
tr.z-grid-odd td.z-row-inner, tr.z-grid-odd	Background color of the odd row	background: #F0FAFF;

Separator

Separator is separated two orientation: Vertical and Horizontal

Source:

The CSS source of Separator from SVN

Mold: Default (Horizontal)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-separator-hor`
Supported	V

CSS Specification:

Class Name	Description	Default Values
.z-separator-hor, .z-separator-hor-bar	Height	height: 7px; overflow: hidden; line-height: 0pt; font-size: 0pt;
.z-separator-hor-bar	Background image	background-image: url(${c:encodeURL('~./img/dot.gif')}); background-position: center left; background-repeat: repeat-x;

Mold: Default (Vertical)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-separator-ver`
Supported	V

CSS Specification:

Class Name	Description	Default Values
.z-separator-ver, .z-separator-ver-bar	Width	display:-moz-inline-box; display: inline-block; width: 10px; overflow: hidden;
.z-separator-ver-bar	Background image	background-image: url(${c:encodeURL('~./img/dot.gif')}); background-position: top center; background-repeat: repeat-y;

Slider

Slider has three mold: default, sphere, and scale.

Source:

The CSS source of Slider from SVN

Mold: Default (Horizontal)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-slider-hor`
Supported	V
CSS naming:	`-btn`	`-over`	`-drag`
Supported	V	V	V

CSS Specification:

Class Name	Description	Default Values
.z-slider-hor	Background of beginning	padding-left: 7px; zoom:1; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-bg.png')}) no-repeat 0 -22px;
.z-slider-hor-center	Background of center	position: relative; left: 0; top: 0; overflow: visible; zoom: 1; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-bg.png')}) repeat-x 0 0; height: 22px;
.z-slider-hor-end	Background of end	padding-right: 7px; zoom: 1; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-bg.png')}) no-repeat right -44px;
.z-slider-hor-btn	Background of button	width: 14px; height: 15px; position: absolute; left: 0; top: 3px; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-thumb.png')}) no-repeat 0 0;

Mold: Default (Vertical)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-slider-ver`
Supported	V
CSS naming:	`-btn`	`-over`	`-drag`
Supported	V	V	V

CSS Specification:

Class Name	Description	Default Values
.z-slider-ver	Background of beginning	padding-top: 7px; zoom:1; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-v-bg.png')}) no-repeat -44px 0; width: 22px;
.z-slider-ver-center	Background of center	position: relative; left: 0; top: 0; overflow: visible; zoom: 1; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-v-bg.png')}) repeat-y 0 0;
.z-slider-ver-end	Background of end	padding-bottom: 7px; zoom: 1; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-v-bg.png')}) no-repeat -22px bottom;
.z-slider-ver-btn	Background of button	width: 15px; height: 14px; position: absolute; left: 3px; bottom: 0; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-v-thumb.png')}) no-repeat 0 0;

Mold: sphere (Horizontal)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-slider-sphere-hor`
Supported	V
CSS naming:	`-btn`	`-over`	`-drag`
Supported	V	V	V

CSS Specification:

Class Name	Description	Default Values
.z-slider-sphere-hor	Background of beginning	padding-left: 7px; zoom:1; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-bg.png')}) no-repeat 0 -22px;
.z-slider-sphere-hor-center	Background of center	position: relative; left: 0; top: 0; overflow: visible; zoom: 1; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-bg.png')}) repeat-x 0 0; height: 22px;
.z-slider-sphere-hor-end	Background of end	padding-right: 7px; zoom: 1; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-bg.png')}) no-repeat right -44px;
.z-slider-sphere-hor-btn	Background of button	width: 14px; height: 15px; position: absolute; left: 0; top: 3px; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-thumb_circle.png')}) no-repeat 0 0;

Mold: sphere (Vertical)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-slider-sphere-ver`
Supported	V
CSS naming:	`-btn`	`-over`	`-drag`
Supported	V	V	V

CSS Specification:

Class Name	Description	Default Values
.z-slider-sphere-ver	Background of beginning	padding-top: 7px; zoom:1; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-v-bg.png')}) no-repeat -44px 0; width: 22px;
.z-slider-sphere-ver-center	Background of center	position: relative; left: 0; top: 0; overflow: visible; zoom: 1; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-v-bg.png')}) repeat-y 0 0;
.z-slider-sphere-ver-end	Background of end	padding-bottom: 7px; zoom: 1; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-v-bg.png')}) no-repeat -22px bottom;
.z-slider-sphere-ver-btn	Background of button	width: 15px; height: 15px; position: absolute; left: 3px; bottom: 0; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-v-thumb_circle.png')}) no-repeat 0px 0px;

Mold: scale

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-slider-scale`
Supported	V
CSS naming:	`-btn`	`-over`	`-drag`
Supported	V	V	V

CSS Specification:

Class Name	Description	Default Values
.z-slider-scale-tick	Background of scale tick	background-image:url(${c: encodeURL('~./zul/img/slider2/ticks.gif')}); padding-top:6px; width:214px;
.z-slider-scale	Background of beginning	padding-left: 7px; zoom:1; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-bg.png')}) no-repeat 0 -22px;
.z-slider-scale-center	Background of center	position: relative; left: 0; top: 0; overflow: visible; zoom: 1; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-bg.png')}) repeat-x 0 0; height: 22px;
.z-slider-scale-end	Background of end	padding-right: 7px; zoom: 1; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-bg.png')}) no-repeat right -44px;
.z-slider-scale-btn	Background of button	width: 14px; height: 15px; position: absolute; left: 0; top: 3px; background: transparent url(${c: encodeURL('~./zul/img/slider2/slider-scale-thumb.gif')}) no-repeat 0 0;

Spinner

Spinner is composed of two parts, an input box and a button.

Source:

The CSS source of Spinner from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-spinner`	`-over`	`-btn-clk`	`-focus`	`-btn-over`	-disd
Supported	V	V	V	V	V	!

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
.z-spinner-inp	Background of input element	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border: 1px solid #7F9DB9; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
.z-spinner-text-invalid	Background of invalidated	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870;
.z-spinner-readonly, .z-spinner-text-disd	Background of disabled and read only	background: #ECEAE4;
.z-spinner .z-spinner-img	Background of the button image	background: transparent url(${c:encodeURL('~./zul/img/button/timebtn.gif')}) no-repeat 0 0; vertical-align: top; cursor: pointer; width: 17px; height: 19px; border: 0; border-bottom: 1px solid #86A4BE;

Splitter

Splitter has three status: splittable, collapsible, and collapsible with splittable.

Source:

The CSS source of Splitter from SVN

Mold: Default (Vertical)

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-splitter-ver

-btn-t:hover,

-btn-b:hover,

- btn-visi (IE only)

Supported

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
.z-splitter-ver	Background image of splittable	background-image:url(${c:encodeURL('~./zul/img/splt/splt-v.png')}); background-position: top center; font-size:0; max-height: 8px; height: 8px;
`.z-splitter-ver-outer .z-splitter-ver-outer-td`	Background image of non-splittable	background-image:url(${c:encodeURL('~./zul/img/splt/splt-v-ns.png')}); background-repeat: repeat-x; max-height: 8px; height: 8px; background-position: bottom left;
.z-splitter-ver-ns	Background position of non-splittable	background-image: none; background-position: none;
.z-splitter-ver-btn-t	Button icon of top side	width: 50px; min-height: 6px; height: 6px; background-image: url(${c:encodeURL('~./zul/img/splt/colps-t.png')});
.z-splitter-ver-btn-b	Button icon of bottom side	width: 50px; min-height: 6px; height: 6px; background-image: url(${c:encodeURL('~./zul/img/splt/colps-b.png')});

Mold: Default (Horizontal)

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-splitter-hor

-btn-l:hover,

-btn-r:hover,

- btn-visi (IE only)

Supported

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
.z-splitter-hor	Background image of splittable	background-image:url(${c:encodeURL('~./zul/img/splt/splt-h.png')}); background-position: center left; font-size:0; max-width: 8px; width: 8px;
`.z-splitter-hor-outer`	Background image of non-splittable	background-image:url(${c:encodeURL('~./zul/img/splt/splt-h-ns.png')}); background-repeat: repeat-y; max-width: 8px; width: 8px; background-position: top right;
.z-splitter-hor-ns	Background position of non-splittable	background-image: none; background-position: none;
.z-splitter-hor-btn-l	Button icon of left side	width: 6px; min-height: 50px; height: 50px; background-image: url(${c:encodeURL('~./zul/img/splt/colps-l.png')});
.z-splitter-hor-btn-r	Button icon of right side	width: 6px; min-height: 50px; height: 50px; background-image: url(${c:encodeURL('~./zul/img/splt/colps-r.png')});

Mold: Default (OS-Vertical)

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-splitter-os-ver

-btn-t:hover,

-btn-b:hover,

- btn-visi (IE only)

Supported

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
.z-splitter-os-ver	Height	font-size:0; max-height: 8px; height: 8px;
`.z-splitter-os-ver-outer .z-splitter-os-ver-outer-td`	Background image of splittable	background-image:url(${c:encodeURL('~./zul/img/splt/splt-v.gif')}); background-repeat: repeat-x; max-height: 8px; height: 8px; background-position: bottom left;
.z-splitter-os-ver-ns	Styling of non-splittable	font-size:0; max-height: 8px; height: 8px;
.z-splitter-os-ver-btn-t	Button icon of top side	width: 50px; min-height: 8px; height: 8px; background-image: url(${c:encodeURL('~./zul/img/splt/colps-t-os.gif')});
.z-splitter-os-ver-btn-b	Button icon of bottom side	width: 50px; min-height: 8px; height: 8px; background-image: url(${c:encodeURL('~./zul/img/splt/colps-b-os.gif')});

Mold: Default (OS-Horizontal)

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-splitter-os-hor

-btn-l:hover,

-btn-r:hover,

- btn-visi (IE only)

Supported

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
.z-splitter-os-hor	Height	font-size:0; max-width: 8px; width: 8px;
`.z-splitter-os-hor-outer`	Background image of splittable	background-image:url(${c:encodeURL('~./zul/img/splt/splt-h.gif')}); background-repeat: repeat-y; max-width: 8px; width: 8px; background-position: top right;
.z-splitter-os-hor-ns	Styling of non-splittable	font-size:0; max-width: 8px; width: 8px;
.z-splitter-os-hor-btn-l	Button icon of left side	width: 8px; min-height: 50px; height: 50px; background-image: url(${c:encodeURL('~./zul/img/splt/colps-l-os.gif')});
.z-splitter-os-hor-btn-r	Button icon of right side	width: 8px; min-height: 50px; height: 50px; background-image: url(${c:encodeURL('~./zul/img/splt/colps-r-os.gif')});

Tabbox

Tabbox combine with a set of its children, including Tabs, Tab, Tabpanels, and Tabpanel.

Note:

The CSS source of Tabbox from SVN

Mold: Default (Horizontal)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-tabbox`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`.z-tabbox`	Overflow	overflow: hidden; visibility: hidden;

Tabs

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-tabs`
Supported	V
CSS naming:	`-right-scroll,` `-left-scroll`	`:hover`
Supported	V	V

CSS Specification:

Class Name	Description	Default Values
`.z-tabs .z-tabs-cnt`	Background	background: transparent none repeat scroll 0 0; padding-left: 0px; list-style-image: none; list-style-position: outside; list-style-type: none; display: block; margin: 0; border-bottom: 1px solid #8DB2E3;width: 100%; zoom: 1;
.z-tabs	Border, padding, and margin	overflow: hidden; background: transparent none repeat scroll 0 0; border: 0; padding: 0; margin: 0; position: relative;
.z-tabs-scroll	Border of scroll	border: 1px solid #8DB2E3; background: #DEECFD none repeat scroll 0 0; padding-bottom: 2px; zoom:1;
.z-tabs-header	Margin of header	margin: 0px; width: 100%; overflow: hidden; position: relative; zoom: 1;
.z-tabs-scroll .z-tabs-cnt	Background of scrollable content	background-color: #C7E3F3; background-image: url(${c:encodeURL('~./zul/img/tab2/tab-strip-bg.png')}); background-repeat: repeat-x; background-attachment: scroll; background-position: center top; padding-left: 0px; padding-top: 1px; list-style-image: none; list-style-position: outside; list-style-type: none; display: block; margin: 0; zoom: 1; border-bottom: 1px solid #8DB2E3; -moz-user-select: none; -khtml-user-select: none;
.z-tabs-header-scroll	Margin of header scroll	margin-left: 18px; margin-right: 18px;
.z-tabs-right-scroll	Background of the right scroll icon	background-color: transparent; background-image: url(${c:encodeURL('~./zul/img/tab2/scroll-right.png')}); background-repeat: no-repeat; background-attachment: scroll; background-position: 0 0; border-bottom:1px solid #8DB2E3; cursor:pointer; position:absolute; right:0; top:0; width:18px; z-index:10; height:25px;
.z-tabs-left-scroll	Background of the left scroll icon	background-color: transparent; background-image: url(${c:encodeURL('~./zul/img/tab2/scroll-left.png')}); background-repeat: no-repeat; background-attachment: scroll; background-position: -18px 0; border-bottom:1px solid #8DB2E3; cursor:pointer; left:0; position:absolute; top:0; width:18px; z-index:10; height:25px;

Tab

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-tab`	`:hover`	`-seld`		`-disd-seld`	-disd
Supported	V	V	V		!	!

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
`.z-tab-close`	Background of close icon	background-image: url(${c:encodeURL('~./zul/img/tab2/tab-close.png')}); background-repeat: no-repeat; cursor: pointer; display: block; height: 11px; opacity: 0.6; filter: alpha(opacity=60); position: absolute; right: 3px; top: 3px; width: 11px; z-index: 2; zoom: 1;
.z-tab-body	Background of the body	position: relative; padding-left: 10px; background-image: url(${c:encodeURL('~./zul/img/tab2/tabs-sprite.png')}); background-repeat: no-repeat; -moz-outline: none; outline: none; cursor: pointer;
.z-tab em	Background of the em tag	background-color: transparent; background-image: url(${c:encodeURL('~./zul/img/tab2/tabs-sprite.png')}); background-repeat: no-repeat; background-attachment: scroll; background-position: right -351px; padding-right: 10px; display: block;
.z-tab-inner	Background of the inner	padding-left: 2px; padding-right: 1px; overflow: hidden; cursor: pointer; background-color: transparent; background-image: url(${c:encodeURL('~./zul/img/tab2/tabs-sprite.png')}); background-repeat: repeat-x; background-attachment: scroll; background-position: 0 -201px;
.z-tab .z-tab-text	Font size	color:#416AA3; cursor:pointer; font-style:normal; font-family: ${fontFamilyT}; font-size: ${fontSizeM}; font-size-adjust:none; padding:4px 0 4px; white-space:nowrap;

Tabpanels and Tabpanel

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-tabpanels,

z-tabpanel

Supported

CSS Specification:

Class Name	Description	Default Values
`.z-tabpanel`	Border	border-left: 1px solid #8DB2E3; border-right: 1px solid #8DB2E3; border-bottom: 1px solid #8DB2E3; padding: 5px; zoom: 1;

Mold: Default (Vertical)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-tabbox-ver`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`.z-tabbox-ver`	Overflow	overflow: hidden; visibility: hidden;

Tabs

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-tabs-ver`
Supported	V
CSS naming:	`-right-` `scroll,` `-left-scroll`	`:hover`
Supported	V	V

CSS Specification:

Class Name	Description	Default Values
`.z-tabs-ver .z-tabs-ver-cnt`	Background	padding-top:0px; padding-left:1px; list-style-image:none; list-style-position:outside; list-style-type:none; display:block; margin:0; zoom: 1; height:3456px; border-right:1px solid #8DB2E3; -moz-user-select:none; -khtml-user-select:none;
.z-tabs-ver	Border, padding, and margin	overflow: hidden; float:left; background: transparent none repeat scroll 0 0; border: 0; padding: 0; margin: 0; position: relative;
.z-tabs-ver-scroll	Border of scroll	background:#DEECFD none repeat scroll 0 0; border-top:1px solid #8DB2E3; border-bottom:1px solid #8DB2E3; border-left:1px solid #8DB2E3;
.z-tabs-ver .z-tabs-ver-space	Background of the space	background:#DEECFD none repeat scroll 0 0; border:1px solid #8DB2E3; border-top:0 none; font-size:1px; width:2px; line-height:1px;
.z-tabs-ver .z-tabs-ver-header	Margin of header	background: none; zoom: 1; overflow: hidden; position: relative;
.z-tabs-ver-scroll .z-tabs-ver-header	Background of header	background-color: #CEDFF5; background-image: url(${c:encodeURL('~./zul/img/tab2/tab-vstrip-bg.gif')}); background-repeat: repeat-y; background-attachment: scroll; background-position: center bottom; zoom:1; overflow:hidden; position:relative;
.z-tabs-ver .z-tabs-ver-cnt li	Font size of the li tag	position:relative; font-family: ${fontFamilyT}; font-size: ${fontSizeM}; cursor:default; display:block; padding: 2px 0 0 0 ; margin:0 0 0 0; -moz-user-select:none; -khtml-user-select:none;
.z-tabs-ver-space	Background of the space	float:left; background:#DEECFD none repeat scroll 0 0; border:1px solid #8DB2E3; border-left:0 none; font-size:1px; width:2px; position:relative;
.z-tabbox-ver .z-tabs-ver-header-scroll	Margin of header scroll	margin-left: 18px; margin-right: 18px;
.z-tabs-ver-up-scroll	Background of the up scroll icon	background-color: transparent; background-image: url(${c:encodeURL('~./zul/img/tab2/scroll-up.png')}); background-repeat: no-repeat; background-attachment: scroll; background-position: 1px -18px; border-right:1px solid #8DB2E3; cursor:pointer; height:18px; position:absolute; right:0; top:0; z-index:10;width:100%; display:block;
.z-tabs-ver-down-scroll	Background of the down scroll icon	background-color: transparent; background-image: url(${c:encodeURL('~./zul/img/tab2/scroll-down.png')}); background-repeat: no-repeat; background-attachment: scroll; background-position: 1px 0; border-right:1px solid #8DB2E3; cursor:pointer; height:18px; position:absolute; right:0; bottom:0; z-index:10;width:100%; display:block;

Tab

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-tab-ver`	`:hover`	`-seld`		`-disd-seld`	-disd
Supported	V	V	V		!	!

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
`.z-tab-ver-close`	Background of close icon	position:absolute; background-image: url(${c:encodeURL('~./zul/img/tab2/tab-close.png')}); background-repeat:no-repeat; opacity:0.6; filter:alpha(opacity=60); cursor:pointer; display:block; height:11px; width:11px; right:1px; top:15px; z-index:2; zoom: 1;
.z-tab-ver-body	Background of the body	position:relative;padding-top:8px;-moz-outline: none; outline: none; zoom:1; background-color: transparent; background-image: url(${c:encodeURL('~./zul/img/tab2/tabs-vsprite.png')}); background-repeat: no-repeat; background-attachment: scroll; background-position: -1051px 0; cursor:pointer;
.z-tab-ver-body em	Background of the em tag	padding-bottom:10px; background-color: transparent; background-image: url(${c:encodeURL('~./zul/img/tab2/tabs-vsprite.png')}); background-repeat: no-repeat; background-attachment: scroll; background-position: -151px bottom;
.z-tab-ver-inner	Background of the inner	overflow:hidden; cursor:pointer; padding: 2px 14px 0 4px; background-color: transparent; background-image: url(${c:encodeURL('~./zul/img/tab2/tabs-vsprite.png')}); background-repeat: repeat-y; background-attachment: scroll; background-position: -601px 0;
.z-tab .z-tab-text	Font size	font-style:normal; font-family: ${fontFamilyT}; font-size: ${fontSizeM}; text-align:center; font-style:normal; white-space:nowrap; color:#416AA3; cursor:pointer; font-size-adjust:none;

Tabpanels and Tabpanel

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-tabpanels-ver,

z-tabpanel-ver

Supported

CSS Specification:

Class Name	Description	Default Values
`.z-tabbox-ver .z-tabpanels-ver`	Border	overflow:hidden; border-top: 1px solid #8DB2E3; border-right: 1px solid #8DB2E3; border-bottom: 1px solid #8DB2E3;
.z-tabbox-ver .z-tabpanel-ver	Padding	padding: 5px;

Mold: accordion

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-tabbox-accordion,

z-tabpanels-accordion,

z-tabpanel-accordion-outer

Supported

CSS Specification:

Class Name	Description	Default Values
`.z-tabbox-accordion`	Overflow	overflow: hidden; visibility: hidden;
.z-tabpanel-accordion-outer	Position	position: relative;

Tab

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-tab-accordion`		`-seld`		`-disd-seld`	`-disd`
Supported	V		!		!	!
CSS naming:	`-close`	`:hover`
Supported	V	V

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
`.z-tab-accordion-header`	Position	cursor:pointer; position:relative;zoom:1;
.z-tab-accordion-text	Font size	cursor:pointer; color:#373737; font-family: ${fontFamilyT}; font-style:normal; font-variant:normal; font-weight:bold; font-size: ${fontSizeM}; line-height:normal; text-decoration:none; padding-right:30px;
.z-tab-accordion-tl	Background of top left	text-decoration:none; padding-left:6px; line-height:0; display:block; zoom:1; text-decoration:none; background:transparent url(${c:encodeURL('~./zul/img/tab2/accd-border.png')}) no-repeat scroll 0 0;
.z-tab-accordion-tr	Background of top right	padding-right:6px; display:block; background:transparent url(${c:encodeURL('~./zul/img/tab2/accd-border.png')}) no-repeat scroll right 0;
.z-tab-accordion-tm	Background of top middle	display:block; padding:7px 0 6px 0; overflow:hidden; background:transparent url(${c:encodeURL('~./zul/img/tab2/accd-inner.png')}) repeat-x scroll 0 0;
.z-tab-accordion-close	Background of close icon	background-image: url(${c:encodeURL('~./zul/img/tab2/tab-close-off.png')}); background-repeat:no-repeat; cursor:pointer; width:17px; height:16px; position:absolute; right:10px; top:5px; z-index:2;

Mold: accordion-lite

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-tabbox-accordion-lite,

z-tabpanels-accordion-lite,

z-tabpanel-accordion-lite-outer

Supported

CSS Specification:

Class Name	Description	Default Values
`.z-tabbox-accordion-lite`	Overflow	overflow: hidden; visibility: hidden;
.z-tabpanels-accordion-lite	Border	border-top: 1px solid #99BBE8; border-right: 1px solid #99BBE8; border-left: 1px solid #99BBE8; position: relative;
.z-tabpanel-accordion-lite-outer	Position	position: relative;
.z-tabbox-accordion-lite .z-tabpanel-accordion-lite	Border	border-bottom:1px solid #99BBE8; padding:5px; zoom: 1;

Tab

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-tab-` `accordion-lite`		`-seld`		`-disd-` `seld`	`-disd`
Supported	V		!		!	!
CSS naming:	`-close`	`:hover`
Supported	V	V

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
`.z-tab-accordion-lite-header`	Position	overflow:hidden; zoom:1; cursor:pointer; position:relative; border: 1px solid #99BBE8; border-top-width:0; border-right-width:0; border-left-width:0;
.z-tab-accordion-lite-text	Font size	cursor:pointer; color:#373737; font-family: ${fontFamilyT}; font-size: ${fontSizeM}; font-style:normal; font-variant:normal; line-height:15px; text-decoration:none; padding-right:30px;
.z-tab-accordion-lite-tl	Background of top left	Zoom:1; padding-left:6px; line-height:0; display:block; text-decoration:none; text-decoration:none; background:transparent url(${c:encodeURL('~./zul/img/tab2/accdlite-all.png')}) repeat-x scroll 0 -9px;
.z-tab-accordion-lite-tr	Background of top right	padding-right:6px; display:block; background:transparent url(${c:encodeURL('~./zul/img/tab2/accdlite-all.png')}) repeat-x scroll 0 -9px;
.z-tab-accordion-lite-tm	Background of top middle	display:block; padding:4px 0 3px 0; overflow:hidden; background:transparent url(${c:encodeURL('~./zul/img/tab2/accdlite-all.png')}) repeat-x scroll 0 -9px;
.z-tab-accordion-lite-close	Background of close icon	background-image: url(${c:encodeURL('~./zul/img/tab2/tab-close-off.png')}); background-repeat:no-repeat; cursor:pointer; height:16px; position:absolute; right:10px; top:3px; width:17px; z-index:5;

Tablelayout

Tablelayout and Tablechildren are composed of HTML Table.

Source:

The CSS source of Tablelayout from SVN

Mold: Default

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-table-layout,

z-table-children

Supported

CSS Specification:

Class Name	Description	Default Values
td.z-table-children	Align	vertical-align: top;

Textbox

Textbox is composed of HTML Input element.

Source:

The CSS source of Textbox from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-textbox`			`-focus`		-disd
Supported	V			!		!

Note: An exclamation mark(!) means the action effect uses CSS background to do it, not CSS background-position with image .

CSS Specification:

Class Name	Description	Default Values
`.z-textbox`	Font size and background	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border: 1px solid #7F9DB9; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
.z-textbox-text-invalid	Invalid event	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870;
.z-textbox-readonly, .z-textbox-text-disd	Disabled and read-only	background: #ECEAE4;

Timebox

Timebox is composed of two parts, an input box and a button.

Source:

The CSS source of Timebox from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-timebox`	`-over`	`-btn-clk`	`-focus`	`-btn-over`	-disd
Supported	V	V	V	V	V	!

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
.z-timebox-inp	Background of input element	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border: 1px solid #7F9DB9; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
.z-timebox-text-invalid	Background of invalidated	background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870;
.z-timebox-readonly, .z-timebox-text-disd	Background of disabled and read only	background: #ECEAE4;
.z- timebox .z-timebox-img	Background of the button image	background: transparent url(${c:encodeURL('~./zul/img/button/timebtn.gif')}) no-repeat 0 0; vertical-align: top; cursor: pointer; width: 17px; height: 19px; border: 0; border-bottom: 1px solid #86A4BE;

Toolbar

Toolbar is a kind of special container, and it is used to combine with Toolbarbutton .

Source:

The CSS source of Toolbar from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-toolbar`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`.` `z-toolbar`	Background image	border-color: #a9bfd3; border-style: solid; border-width: 0 0 1px 0; display: block; padding: 2px; background: #D0DEF0 url(${c:encodeURL('~./zul/img/button/tb-bg.png')}) repeat-x top left; position: relative; zoom: 1;
.z-toolbar-body, .z-toolbar-body span	Font size	font-size: ${fontSizeS};
.z-toolbar a, .z-toolbar a:visited, .z-toolbar a:hover	Font size of A tag	font-family: ${fontFamilyT}; font-size: ${fontSizeS}; font-weight: normal; color: black; background: #D0DEF0; border: 1px solid #D0DEF0; text-decoration: none;
.z-toolbar-start	Align to start	float: left; clear: none;
.z-toolbar-center	Align to center	margin: 0 auto;
.z-toolbar-end	Align to end	float: right; clear: none;

Mold: Panel

Panel mold is used for Panel as its footer toolbar, it is composed of HTML Table.

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-toolbar`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`.` `z-toolbar`	Background image	border-color: #a9bfd3; border-style: solid; border-width: 0 0 1px 0; display: block; padding: 2px; background: #D0DEF0 url(${c:encodeURL('~./zul/img/button/tb-bg.png')}) repeat-x top left; position: relative; zoom: 1;
.z-toolbar-body, .z-toolbar-body span	Font size	font-size: ${fontSizeS};
.z-toolbar a, .z-toolbar a:visited, .z-toolbar a:hover	Font size of A tag	font-family: ${fontFamilyT}; font-size: ${fontSizeS}; font-weight: normal; color: black; background: #D0DEF0; border: 1px solid #D0DEF0; text-decoration: none;
.z-toolbar-start	Align to start	float: left; clear: none;
.z-toolbar-center	Align to center	margin: 0 auto;
.z-toolbar-end	Align to end	float: right; clear: none;

Toolbarbutton

Toolbarbutton is composed of HTML A tag.

Source:

The CSS source of Toolbarbutton from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-toolbar-button`					-disd
Supported	V					!

Note: An exclamation mark(!) means the action effect uses CSS opacity to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
.z-toolbar-button	Font size	font-family: ${fontFamilyT}; font-size: ${fontSizeM}; font-weight: normal;

Tree

Tree combine with a set of its children, including Treechildren , Treecols , Treecol , Treerow , Treeitem , Treecell , Treefoot , Treefooter , and Paging . Tree also support four ways to show its icon: z-tree, z-dottree, z-filetree, and z-vfiletree.

Note:

The CSS source of Tree from SVN

Mold: Default

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-tree`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`div.z-tree`	Background color	background: #DAE7F6; border: 1px solid #7F9DB9; overflow: hidden; zoom: 1;
div.z-tree-header, div.z-tree-header tr, div.z-tree-footer	Border	border: 0; overflow: hidden; width: 100%;
div.z-tree-body	Background color of the body	background: white; border: 0; overflow: auto; width: 100%; position: relative;
div.z-tree-footer	Background color of the footer	background: #DAE7F6; border-top: 1px solid #9EB6CE;

Mold: paging

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-tree`
Supported	V

CSS Specification:

Class Name	Description	Default Values
`div.z-` `tree` `-pgi-b`	Border of bottom paging	border-top: 1px solid #AAB; overflow: hidden;
div.z-tree-pgi-t	Border of top paging	border-bottom: 1px solid #AAB; overflow: hidden;

Treechildren

Treechildren is used for Tree .

Note:

The CSS source of Treechildren from SVN

Mold: Default

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-tree- children

Supported

CSS Specification:

Class Name

Description

Default Values

Treecol

Treecols and Treecol are used for Tree .

Note:

The CSS source of Treecol from SVN

Mold: Default

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-tree-cols,

z-tree-col

Supported

CSS Specification:

Class Name	Description	Default Values
div.z-tree-header tr.z-tree-cols	Background image	background-image: url(${c:encodeURL('~./zul/img/grid/s_hd.gif')});
`div.z-tree-header th.z-tree-col`	Border and font size	overflow: hidden; border: 1px solid; border-color: #DAE7F6 #9EB6CE #9EB6CE #DAE7F6; white-space: nowrap; padding: 2px; font-size: ${fontSizeM}; font-weight: normal;
`div.z-tree-col-cnt`	Font size of the content	font-size: ${fontSizeM}; font-weight: normal; font-family: ${fontFamilyT};

Treefooter

Treefoot and Treefooter are used for Tree . Treefooter is made by HTML TD, not DIV, maybe someone will confuse with Tree's footer region, they are the same CSS name in the case.

Note:

The CSS source of Treefooter from SVN

Mold: Default

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-tree-foot,

z-tree-footer

Supported

CSS Specification:

Class Name	Description	Default Values
div.z-tree-footer td.z-tree-footer	Font size	cursor: pointer; padding: 0 2px; font-size: ${fontSizeM}; font-weight: normal; overflow: hidden;
`div.z-tree-footer-cnt`	Font size of the content	border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;

Treerow

Treerow, Treeitem, and Treecell are used for Tree . Treeitem is not a concrete in client side.

Note:

The CSS source of Treerow from SVN

Mold: Default

Structure:

Overview

Events:

Action:

Normal (Open)

Hover

Click, Select, and Drag.

Focus

Focus and Hover

Disable

CSS naming:

z-tree-row,

z-tree-cell

-over

-seld

-focus

-over-seld

-disd

Supported

Note: An exclamation mark(!) means the action effect uses CSS background to do it, not CSS background-position .

CSS Specification:

Class Name	Description	Default Values
tr.z-tree-row, tr.z-tree-row a, tr.z-tree-row a:visited	Font size of treerow	font-size: ${fontSizeM}; font-weight: normal; color: black; text-decoration: none;
`tr.z-tree-row td.z-tree-row-focus`	Background of focused event	background-image: url(${c:encodeURL('~./zul/img/focusd.png')}); background-repeat: no-repeat;
`tr.z-tree-row-seld`	Background of selected event	background: #bcd2ef; border: 1px solid #6f97d2;
tr.z-tree-row-over	Background of hovered event	background: #dae7f6;
tr.z-tree-row-over-seld	Background of hovered and selected event	background: #6eadff;
div.z-tree-body td.z-tree-cell	Font size of treecell	cursor: pointer; padding: 0 2px; font-size: ${fontSizeM}; font-weight: normal; overflow: hidden;
div.z-tree-cell-cnt	Font size of the content of treecell	border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
span.z-tree-ico, span.z-tree-line, span.checkmark-spacer	Size of tree icon	width: 18px; min-height: 18px; height: 100%; display:-moz-inline-box; vertical-align:top; display:inline-block;
span.z-tree-root-open, span.z-tree-tee-open, span.z-tree-last-open, span.z-tree-root-close, span.z-tree-tee-close, span.z-tree-last-close	Background image of tree open and close	background-image: url(${c:encodeURL('~./zul/img/tree/tree_btn.gif')});

Window

Window is made by 3*3 grid style, the background and text can be customized by users. Window can also combine with Caption as its title.

Note:

The CSS source of Window from SVN

Mold: Default (embedded)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-window-embedded`
Supported	V
CSS naming:	`-close` `-maximize` `-maximized` `-minimize`	`-over`
Supported	V	V

CSS Specification:

Class Name	Description	Default Values
.z-window-embedded-tl	Top Left	background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-l.png')}) no-repeat 0 0; border-bottom: 1px solid #538BA2;
.z-window-embedded-tm	Top Middle	background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m.png')}) repeat-x 0 0;
.z-window-embedded-tr	Top Right	background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-r.png')}) no-repeat right 0;
.z-window-embedded-header	The color and font size of the header	color: #222222; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
.z-window-embedded-header a, .z-window-embedded-header a:visited, .z-window-embedded-header a:hover	A tag action	color: #222222
.z-window-embedded-cnt	The content of the window	margin: 0; padding: 3px; border: 1px solid #538BA2;
.z-window-embedded-cnt-noborder	The content of the window without border	Border: 0;
.z-window-embedded-tool	The background image of the tool	overflow: hidden; width: 15px; height: 15px; float: right; cursor: pointer; background: transparent url(${c:encodeURL('~./zul/img/panel/tool-btn.gif')}) no-repeat; margin-left: 2px;

Example:

<style>
.z-window-embedded-tl {
    background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-l-ol.png')}) no-repeat 0 0;    
    border-bottom: 1px solid #0B5CA0;    
}
.z-window-embedded-tm {
    background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m-ol.png')}) repeat-x 0 0;    
}
.z-window-embedded-tr {
    background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-r-ol.png')}) no-repeat right 0;    
}
.z-window-embedded-cnt {
    border:1px solid #2c70a9;    
}
</style>

Mold: Default (popup)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`z-window-popup`
Supported	V
CSS naming:	`-close` `-maximize` `-maximized` `-minimize`	`-over`
Supported	V	V

CSS Specification:

Class Name	Description	Default Values
.z-window-popup-tl	Top Left	background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-l-ol.png')}) no-repeat 0 0; border-bottom: 1px solid #0B5CA0;
.z-window-popup-tm	Top Middle	background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m-ol.png')}) repeat-x 0 0;
.z-window-popup-tr	Top Right	background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-r-ol.png')}) no-repeat right 0;
.z-window-popup-header	The color and font size of the header	color: #FFFFFF; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
.z-window-popup-tm-noheader	No header	background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m-ol.png')}) repeat-x 0 0; overflow: hidden; zoom: 1; font-size: 0pt; height: 5px; line-height: 0pt;
.z-window-popup-header a, .z-window-popup-header a:visited, .z-window-popup-header a:hover, .z-window-popup-header .z-caption a, .z-window-popup-header .z-caption a:visited, .z-window-popup-header .z-caption a:hover	A tag action	color: #FFFFFF
.z-window-popup-cnt	The content of the window	margin: 0; padding: 4px; overflow: hidden; zoom: 1; background: white;
.z-window-popup-cnt-noborder	The content of the window without border	Border: 0;
.z-window-popup-tool	The background image of the tool	overflow: hidden; width: 15px; height: 15px; float: right; cursor: pointer; background: transparent url(${c:encodeURL('~./zul/img/panel/tool-btn-ol.gif')}) no-repeat; margin-left: 2px;

Example:

<style>
.z-window-popup-tl {
    background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-l.png')}) no-repeat 0 0;    
    border-bottom: 1px solid #538BA2;    
}
.z-window-popup-tm {
    background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m.png')}) repeat-x 0 0;    
}
.z-window-popup-tr {
    background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-r.png')}) no-repeat right 0;    
}
.z-window-popup-cnt {
    border:1px solid #538BA2;    
}
</style>

Mold: Default (overlapped, highlighted, and modal)

Structure:

Overview

Events:

Action:	Normal (Open)	Hover	Click, Select, and Drag.	Focus	Focus and Hover	Disable
CSS naming:	`Z-window-overlapped,` `z-window-modal,` `z-window-highlight`
Supported	V
CSS naming:	`-close` `-maximize` `-maximized` `-minimize`	`-over`
Supported	V	V

CSS Specification:

Class Name	Description	Default Values
.z-window-modal-tl, .z-window-highlighted-tl, .z-window-overlapped-tl	Top Left	background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-l-ol.png')}) no-repeat 0 0; border-bottom: 1px solid #0B5CA0;
.z-window-modal-tm, .z-window-highlighted-tm, .z-window-overlapped-tm	Top Middle	background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m-ol.png')}) repeat-x 0 0;
.z-window-modal-tr, .z-window-highlighted-tr, .z-window-overlapped-tr	Top Right	background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-r-ol.png')}) no-repeat right 0;
.z-window-modal-cl, .z-window-highlighted-cl, .z-window-overlapped-cl	Center Left	background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-lr-ol.png')}) repeat-y 0 0;
.z-window-modal-cm, .z-window-highlighted-cm, .z-window-overlapped-cm	Center Middle	border:1px solid #0B5CA0; padding: 0; margin:0 ; background: #5EABDB;
z-window-modal-cr, .z-window-highlighted-cr, .z-window-overlapped-cr	Center Right	background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-lr-ol.png')}) repeat-y right 0;
.z-window-modal-bl, .z-window-highlighted-bl, .z-window-overlapped-bl	Bottom Left	background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-l-ol.png')}) no-repeat 0 bottom;
.z-window-modal-bm, .z-window-highlighted-bm, .z-window-overlapped-bm	Bottom Middle	background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m-ol.png')}) repeat-x 0 bottom;
.z-window-modal-br, .z-window-highlighted-br, .z-window-overlapped-br	Bottom Right	background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-r-ol.png')}) no-repeat right bottom;
.z-window-modal-header, .z-window-overlapped-header, .z-window-highlighted-header	The color and font size of the header	color: #FFFFFF; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
.z-window-modal-tm-noheader, .z-window-highlighted-tm-noheader,.z-window-overlapped-tm-noheader	No header	background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m-ol.png')}) repeat-x 0 0; overflow: hidden; zoom: 1; font-size: 0pt; height: 5px; line-height: 0pt;
.z-window-modal-header a, .z-window-modal-header a:visited, .z-window-modal-header a:hover, .z-window-modal-header .z-caption a, .z-window-modal-header .z-caption a:visited, .z-window-modal-header .z-caption a:hover, .z-window-highlighted-header a, .z-window-highlighted-header a:visited, .z-window-highlighted-header a:hover, .z-window-highlighted-header .z-caption a, .z-window-highlighted-header .z-caption a:visited, .z-window-highlighted-header .z-caption a:hover, .z-window-overlapped-header a, .z-window-overlapped-header a:visited, .z-window-overlapped-header a:hover, .z-window-overlapped-header .z-caption a, .z-window-overlapped-header .z-caption a:visited, .z-window-overlapped-header .z-caption a:hover	A tag action	color: #FFFFFF
.z-window-modal-cnt, .z-window-highlighted-cnt	The content of the window	margin: 0; padding: 2px; background: white; overflow: hidden; zoom: 1;
.z-window-overlapped-cnt	The content of the window	margin: 0; padding: 4px; overflow: hidden; zoom: 1; background: white;
.z-window-modal-cnt-noborder, .z-window-highlighted-cnt-noborder, .z-window-overlapped-cnt-noborder	The content of the window without border	border: 0;
.z-window-modal-cm-noborder, .z-window-highlighted-cm-noborder,.z-window-overlapped-cm-noborder	The center middle of the window without border	border: 0; padding: 0; margin:0 ; background: #5EABDB;
.z-window-modal-tool, .z-window-overlapped-tool, .z-window-highlighted-tool	The background image of the tool	overflow: hidden; width: 15px; height: 15px; float: right; cursor: pointer; background: transparent url(${c:encodeURL('~./zul/img/panel/tool-btn-ol.gif')}) no-repeat; margin-left: 2px;

Example:

<style>
.z-window-overlapped-tl {
    background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-l.png')}) no-repeat 0 0;    
}
.z-window-overlapped-tm {
    background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m.png')}) repeat-x 0 0;    
}
.z-window-overlapped-tr {
    background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-r.png')}) no-repeat right 0;    
}
.z-window-overlapped-cnt {
    border:1px solid #538BA2;    
}
.z-window-overlapped-cl {
    background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-lr.png')}) repeat-y 0 0;    
}
.z-window-overlapped-cm {
    border: 0;    
    border-top: 1px solid #538BA2;    
}
.z-window-overlapped-cr {
    background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-lr.png')}) repeat-y right 0;    
}
.z-window-overlapped-bl {
    background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-l.png')}) no-repeat 0 bottom;    
}
.z-window-overlapped-bm {
    background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-m.png')}) repeat-x 0 bottom;    
}
.z-window-overlapped-br {
    background: transparent url(${c:encodeURL('~./zul/img/wnd2/wtp-r.png')}) no-repeat right bottom;    
}
</style>

ZK Style Guide

Version 3.5.2

1. Introduction

ZK Class Concept

Sclass

Zclass

Overwriting

DOM Naming Structure

Layout Elements:

Other Elements:

Tool Icons:

DOM Naming Position

Regions:

Parts: (3 x 3 grid)

Compass:

DOM Event Effect

Action Image Indexing

2. XUL Components

Auxhead

Mold: Default

Bandbox

Mold: Default

Bandpopup

Mold: Default

Borderlayout

Mold: Default

North:

South:

West:

East:

Center:

Box

Mold: Default (Vbox)

Button

Mold: Default

Mold: os

Mold: Default

Caption

Mold: Default

Mold: Default (legend)

Checkbox

Mold: Default

Column

Mold: Default

Columnlayout

Mold: Default

Combobox

Mold: Default

Comboitem

Mold: Default

Datebox

Mold: Default

Mold: Default - Calendar

Intbox

Mold: Default

Detail

Mold: Default

Doublebox

Mold: Default

Fisheyebar

Mold: Default

Footer

Mold: Default

Grid

Mold: Default

Mold: paging

Group

Mold: Default

Groupbox

Mold: Default

Mold: 3d

Groupfoot

Mold: Default

Hbox

Mold: Default

Intbox

Mold: Default

Label

Mold: Default

Listbox

`Tool Icons:`

`Regions:`

`Parts:` `(3 x 3 grid)`

`Compass:`

`DOM Event Effect`