ZK 6.0.0 Style Guide

ZK Style Guide
For ZK 6.0.0
PDF generated using the open source mwlib toolkit. See http://code.pediapress.com/ for more information. PDF generated at: Mon, 13 Feb 2012 11:35:36 CST
Contents
Articles
ZK Style Guide Introduction ZK Class Concept Sclass Zclass Overwriting ZK Class Naming Rule By DOM Structure Layout Elements Other Elements Tool Icons By DOM Position Regions Parts (3 x 3 grid) Parts: (10 block, 13 block is used for Panel only) Compass By Event Effect Basic Concepts Priority Order Action Image Index Example XUL Component Specification A Default Auxhead Default Bandbox Default Bandpopup Default Borderlayout Default Default (North) Default (South) 1 1 1 3 4 5 6 6 6 7 7 8 8 8 9 9 9 10 10 11 11 12 12 12 13 13 15 15 17 17 18 19 21 23
Default (West) Default (East) Default (Center) Box Default (Vbox) Button Default (os) trendy Calendar Default Caption Default Default (legend) Cell Default (Row) Checkbox Default Colorbox Default Column Default Columnlayout Default Combobox Default Combobutton Default Comboitem Default Datebox Default Decimalbox Default Detail Default Doublebox Default Doublespinner
25 27 29 31 31 32 33 34 36 36 38 38 40 41 41 43 43 44 44 47 47 49 49 50 51 52 53 54 54 55 56 58 58 59 59 61 61 62
Default Fisheyebar Default Footer Default Frozen Default Grid Default paging Group Default Groupbox Default 3d Groupfoot Default Hbox Default Hlayout Default Intbox Default Label Default Listbox Default paging select Listfooter Default Listgroup Default Listgroupfoot Default Listheader Default Listitem
62 64 64 65 66 67 67 68 69 71 72 73 74 75 76 79 79 80 81 82 82 83 83 84 85 86 86 87 89 90 90 91 91 92 93 94 94 96
Default Longbox Default Menubar Default (Horizontal) Default (Vertical) Menu in Menubar Menuitem in Menubar Menupopup Default Menu in Menupopup Menuitem in Menupopup Menuseparator Default Paging Default os Panel Default Popup Default Portallayout Default Progressmeter Default Radio Default Row Default Separator Default (Horizontal) Default (Vertical) Slider Default (Horizontal) Default (Vertical) sphere (Horizontal) sphere (Vertical) scale
96 98 98 99 99 100 101 103 105 105 107 108 109 110 111 111 113 114 114 117 118 120 120 122 122 123 123 124 125 126 127 128 129 129 131 133 134 136
Spinner Default Splitter Default (Vertical) Default (Horizontal) Default (OS-Vertical) Default (OS-Horizontal) Tabbox Default (Horizontal) Default (Vertical) accordion accordion-lite Tablelayout Default Textbox Default Timebox Default Toolbar Default Panel Toolbarbutton Default Tree Default paging Treechildren Default Treecol Default Treefooter Default Treerow Default Vlayout Default Window Default (embedded)
137 138 139 139 141 143 145 146 147 152 159 162 164 165 166 166 167 167 168 169 171 173 173 174 175 176 178 178 179 180 181 181 183 183 185 186 187 187
Default (popup) Default (overlapped, highlighted, and modal) Loading
191 193 196
References
Article Sources and Contributors Image Sources, Licenses and Contributors 199 203
ZK Style Guide
ZK Style Guide
Documentation:Books/ZK_Style_Guide If you have any feedback regarding this book, please leave it here. <comment>http://books.zkoss.org/wiki/ZK_Component_Development_Essentials</comment>
Introduction
Welcome to ZK, the easiest way to build modern Java web application. ZK Style Guide describes the styling concepts and design of ZK components. For installation, please refer to ZK Installation Guide. For concepts, please refer to ZK Essentials. For a full description of component properties and methods go to ZK Developer's Reference. ZK Themes [1] is an open source project that has a collection of various themes, including breeze, silvertail and sapphire. You could derive your theme from any of them. It is also a good source to know how a custom theme works.
References
[1] http:/ / code. google. com/ p/ zkthemes/
ZK Class Concept
zclass ZK Class (aka., zclass) is a naming pattern. The name assigned to zclass [1] (HtmlBaseComponent.setZclass(java.lang.String) ) will be used to name all CSS classes associated with the DOM structure of a component. In addition, each kind of components is assigned with a unique zclass, and shipped with all the required CSS rules. For example, the default names of button and textbox are z-button and z-textbox, respectively. The DOM structure of a component is sometimes complex. Some of the child DOM elements have to be styled with a proper CSS class (and corresponding CSS rules). These classes are all named by using ZK Class as the prefix. For example, the DOM element at left-top corner of a button is associated with a CSS class named z-button-tl. ZK Class is also used to name the CSS class representing different user activities, such as click, focus, mouse-over, mouse-out, and so on. For example, when a user moves his mouse over a component, an additional CSS class will be added automatically to the root DOM element of the component. The additional class is named by appending -over to ZK Class of the component. For example, since ZK Class of a button is z-button (default), the additional CSS class will be z-button-over, when a user moves the mouse over it. More precisely, the CSS class associated with the root DOM element of the button will become z-button z-button-over. Similarly, if the button gains the focus, the CSS class will become z-button z-button-focus. Thus, it is easier to customize the look of a component for particular scenario, such as changing the look when a button gains the focus. Since ZK Class is used to name all required CSS classes, all the default CSS rules won't be applied if zclass is assigned with a different name. Thus, ZK Class is generally used to distinguish different molds of components, and to provide totally different look for the same component in the same mold.
ZK Class Concept sclass Styling Class (aka., sclass) is another way to add CSS styling to a component. By default, nothing is assigned to sclass (i.e., empty). Once it is assigned with a non-empty value (HtmlBasedComponent.setSclass(java.lang.String) [2] ), it will be added to the root element as additional CSS class. For example, the following statement will assign the CSS class of the root DOM element with zk-button foo-pretty: <button sclass="foo-pretty"/> Sclass won't change the naming of the default CSS classes, so all the default CSS rules will be applied (aka., inherited). It is useful to fine-tune a particular component. Customization In summary, there are three different ways to change the style of ZK components: 1. Change sclass (HtmlBasedComponent.setSclass(java.lang.String) [2]) Since zclass is not changed, the original look (i.e., CSS rules) will be applied too. It is useful to fine-tune a particular component 2. Change zclass (HtmlBaseComponent.setZclass(java.lang.String) [1]) Since zclass is changed, all child DOM elements will be associated with a different class. Thus, it won't inherit any of the original look, but it is useful if you'd like to design a complete different look 3. Overwrite CSS rules (for the predefined CSS name) You don't need to change sclass or zclass, if you'd like to change the look for every instance of the component. Rather, you just override the corresponding CSS rules (for the predefined CSS name, such as z-button-tl). The relationship of sclass and zclass is shown below. The sclass, the red box below, will be added to the CSS class of the root DOM element of the component, while the zclass, the green box below, will be used as a prefix for the naming the CSS class of the child DOM elements.
References
[1] http:/ / www. zkoss. org/ javadoc/ latest/ zk/ org/ zkoss/ zk/ ui/ HtmlBaseComponent. html#setZclass(java. lang. String) [2] http:/ / www. zkoss. org/ javadoc/ latest/ zk/ org/ zkoss/ zk/ ui/ HtmlBasedComponent. html#setSclass(java. lang. String)
Sclass
Sclass
As described in the previous section, Styling Class (aka., sclass) is a way to add CSS styling to a particular component. By default, nothing is assigned to sclass (i.e., empty). Once it is assigned with a non-empty value (HtmlBasedComponent.setSclass(java.lang.String) [2]), it will be added to the root element as additional CSS class. For example, <zk> <style dynamic="true"> .mydb { border: 1px solid blue; } </style> <textbox sclass="mydb" value="having Sclass"/> <textbox value="Without Sclass"/> </zk> As shown above, the first textbox is assigned with a sclass called mydb, while the second textbox is not. If you examine the above example with a DOM inspector (such as Firebug [1]), you will find ZK assigns two CSS classes to the first textbox: z-textbox and mydb. That is, the textbox will inherit all CSS styles from the default rules (for z-textbox), while the custom CSS class (mydb in this example) is used to provide additional customization.
References
[1] http:/ / getfirebug. com/
Zclass
Zclass
As described in the previous section, ZK Class (aka., zclass) is a naming pattern. The name assigned to zclass (HtmlBaseComponent.setZclass(java.lang.String) [1]) will be used to name the CSS classes associated with the DOM structure of a component, including the root and the children. In addition, each kind of components is assigned with a unique zclass and shipped with all the required CSS rules. Since zclass is used to name the CSS classes associated DOM elements, all the default CSS rules won't be applied if zclass is assigned with a different value. Thus, it is used to custom a component with a totally different look. If you'd like to inherit the default CSS rules and override only a part of it, you could override an original CSS rule or assign sclass as described in the other sections. Here is an example: at the first column, we assign textboxes with a different zclass, while, at the second column, we use the default zclass (z-textbox). The following is the result:
The following is the source code: <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;
Zclass
} </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=" <row><textbox zclass="mydb" disabled="true" value="Disabled"/><textbox disabled=" <row><textbox zclass="mydb" focus="true" value="Focus"/><textbox value="Focus"/>< </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>
Overwriting Demo
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.
ZK Class Naming Rule
ZK Class Naming Rule

This section investigates ZK's class naming rule.
By DOM 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 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
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 -close: describes an icon which is closed, like tree, group, an so on. -colps: describes a collapsible icon, like panel. -colpsd: describes a collapsible icon which is collapsed, like panel. -exp: describes an expandable icon, like panel. -expd: describes an expandable icon which is expanded, like panel. Resize -max: describes a maximizable icon. -maxd: describes a maximizable icon which is maximized. -min: describes a minimizable icon. -mind: describes a minimizable icon which is minimized. -ns: describes a non-splittable icon. Split -splt: describes a splittable icon. Postfix
Note: all the bold characters have been renamed since ZK 3.6.0
By DOM Position
By DOM 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 -cl: Center Left -bl: Bottom Left -tm: Top Middle -cm: Center Middle -tr: Top Right -cr: Center Right -br: Bottom Right
-bm: Bottom Middle
Parts: (10 block, 13 block is used for Panel only)
Parts: (10 block, 13 block is used for Panel only)

This part is usually used in some components which have round corners.
-tl: Top Left -hl: Header Left -cl: Center Left -fl: Footer Left -bl: Bottom Left -hm: Header Middle -cm: Center Middle -fm: Footer Middle -tr: Top Right -hr: Header Right -cr: Center Right -fr: Footer Right -br: Bottom Right
Note: the (10 block, 13 block is used for Panel only) section was introduced since ZK 3.6.0
Compass
-north -west -center -east -south
By Event Effect
These postfix string are appended to component's class name by ZK client engine. example: a component=> .z-mycmp mouse over => .z-mycmp-over disabled and mouse over => .z-mycmp-over-disd
Basic Concepts
10
Basic Concepts
These postfix string are appended to component's class name by ZK client engine. example: a component=> .z-mycmp mouse over => .z-mycmp-over disabled and mouse over => .z-mycmp-over-disd
Priority Order
The appending order MUST follow the priority as follow
Priority 1 -clk: clicked event. -focus: focused event. -over: mouse over event. -drag: dragged event. -drop: dropped event. Priority 2 -seld: selected event. -ck: checked event. -unck: unchecked event. Priority 3 -disd: disabled event. -visi: visited event. -hide: hidden event. -invalid invalid event. -readonly readonly event.
Action Image Index
11
Action Image Index

The CSS background of the action event of the DOM element is to use an arranged image composed of the following descriptions.
Normal (Open) Close Hover Same as above Same as above Click, Select, and Drag. Same as above Focus Same as above Same as above Focus and Hover Same as above Disable Same as above Same as above
Other status
Same as above
Same as above
Example
This icon is a Timebox image.
This icon is a Tree toggle image.
XUL Component Specification
12
XUL Component Specification

The section outlines each component and their relative molds.
A
Component Reference: A A is a Anchor tag.
Version History
Version Date Content
Default
This is the Default mold for A.
Source
A [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-a V -disd !
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS background-position
Default
13
CSS Specification
Class Name .z-a Description Font size Default Values font-family: ${fontFamilyC}; font-size: ${fontSizeM};
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ wgt/ css/ a. css. dsp?view=markup
Auxhead
Component Reference: Auxhead Auxhead and Auxheader.
Version History
Default
This is the Default mold for Auxhead
Source
Auxhead with Grid [1] Auxhead with Listbox [2] Auxhead with Tree [3]
Structure
Default
14
Events
CSS\Action Naming: Normal (Open) z-auxhead, z-auxheader V Hover Click, Select, and Drag. Focus Focus and Hover Disable
Supported:
CSS Specification
Class Name div.z-grid-header tr.z-auxhead div.z-grid-header th.z-auxheader .z-auxheader-cnt Description Background image Font size Default Values background-image: url(${c:encodeURL('~./zul/img/grid/s_hd.gif')}); background-color: #C7E5F1; background-repeat: repeat-x; overflow: hidden; border: 1px solid; border-color: #DAE7F6 #9EB6CE #9EB6CE #DAE7F6; white-space: nowrap; padding: 2px; font-size: ${fontSizeM}; font-weight: normal; font-size: ${fontSizeM}; font-weight: normal; font-family: ${fontFamilyT}; border: 0; margin: 0; padding: 0; overflow: hidden;
Font size of the content
Example
<style> div.z-grid-header tr.aux1.z-auxhead { background-color: #F0FDFF; background-position: 0 8px; } div.z-grid-header tr.aux2.z-auxhead { background-position: 0 -10px; } </style> ... <auxhead sclass="aux1"> <auxheader label="H1'07" colspan="6"/> <auxheader label="H2'07" colspan="6"/> </auxhead> <auxhead sclass="aux2"> <auxheader label="Q1" colspan="3"/> <auxheader label="Q2" colspan="3"/>
Default <auxheader label="Q3" colspan="3"/> <auxheader label="Q4" colspan="3"/> </auxhead> ...
15
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ grid/ css/ grid. css. dsp?view=markup [2] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ sel/ css/ listbox. css. dsp?view=markup [3] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ sel/ css/ tree. css. dsp?view=markup
Bandbox
Component Reference: Bandbox Bandbox is composed of two parts, an input box and a button.
Version History
Default
This is the Default mold for Bandbox.
Source
Bandbox [1]
Structure
Default
16
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-bandbox V -over V -btn-clk V -focus V -btn-over V -disd !
CSS Specification
Class Name .z-bandbox Description Font size Default Values border: 0; padding: 0; margin: 0; white-space: nowrap; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal; repeat-x; background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border: 1px solid #7F9DB9; background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870; background: #ECEAE4;
.z-bandbox-inp
Background of input element Background of invalidated Background of disabled and read only Background of the button image
.z-bandbox-text-invalid
.z-bandbox-readonly, .z-bandbox-text-disd
.z-bandbox .z-bandbox-btn
background: transparent url(${c:encodeURL('~./zul/img/button/bandbtn.gif')}) no-repeat 0 0;
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ inp/ css/ combo. css. dsp?view=markup
Bandpopup
17
Bandpopup
Component Reference: Bandpopup Bandpopup is a container of Bandbox .
Version History
Default
This is the Default mold for Bandpopup.
Source
Bandpopup [1]
Structure
Default
18
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-band-popup V
CSS Specification
Class Name Description Default Values margin: 0; white-space: nowrap; font-family: ${fontFamilyC}; font-weight: normal; repeat-x;display: block; position: absolute; z-index: 88000; background: white; border: 1px solid #7F9DB9; padding: 2px; font-size: ${fontSizeS}; .z-bandbox-pp Font size
Borderlayout
Component Reference: Borderlayout Borderlayout is composed of five children: North, South, East, West, and Center
Version History
Default
19
Default
This is the Default mold for Borderlayout.
Source
Borderlayout [1]
Structure
Default
20
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-borderlayout V
CSS\Action Naming: Supported:
Normal (Open) .z-borderlayout-icon V
Hover Click, Select, and Drag. Focus Focus and Hover Disable
CSS Specification
Class Name .z-borderlayout Description Background and color Default Values width:100%; height:100%; overflow:hidden; background-color:#CDE6F5; border:0 none; position: relative;
.z-borderlayout-icon Background of tool icons
overflow: hidden; width: 16px; height: 16px; float: right; margin-left: 2px; cursor: pointer; background: transparent no-repeat 0 0; background-image : url(${c:encodeURL('~./zul/img/layout/borderlayout-btn.png')});
Example
Default <style> .z-borderlayout { background-color: #D0F0FF; } .z-west-header, .z-center-header, .z-east-header, .z-north-header, .z-south-header { background-color:#E4F8FF; background-position: 0 13px; } .z-east-colpsd, .z-west-colpsd, .z-south-colpsd, .z-north-colpsd { background-color:#E4F8FF; } .z-borderlayout-icon, .z-north-splt, .z-south-splt, .z-east-splt, .z-west-splt { opacity: .6; filter: alpha(opacity=60); } </style>
21
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ layout/ css/ borderlayout. css. dsp?view=markup
Default (North)
This is the Default (North) mold for Borderlayout.
Source
North [1]
Structure
Default (North)
22
Events
CSS\Action Naming: Supported: Normal (Open) .z-north, .z-north-splt V Hover Click, Select, and Drag. Focus Focus and Hover Disable
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: .z-north-colps, .z-north-colpsd, .z-north-exp, Supported: V V -over
CSS Specification
Default (North)
23
Class Name .z-north
Description Border and background Background of header
Default Values border: 1px solid #9ECAD8; position: absolute; overflow: hidden; background-color: white;
.z-north-header
color: #0F3B82; font: normal 11px tahoma, arial, verdana, sans-serif; font-weight:bold; padding: 5px 3px 4px 5px; border-bottom: 1px solid #9ecad8; background:transparent repeat-x 0 0; background-image: url(${c:encodeURL('~./zul/img/layout/borderlayout-hm.png')}); white-space: nowrap; overflow: hidden; line-height: 15px; zoom: 1;
.z-north-noborder No border .z-north-splt Background of splitter
border:0; position: absolute; height: 6px; width: 6px; z-index: 15; background: #C4DCFB top; background-image:url("${c:encodeURL('~./zul/img/splt/splt-v.png')}"); cursor: s-resize; cursor: row-resize; line-height: 1px; font-size: 1px;
Default (South)
This is the Default (South) mold for Borderlayout.
Source
South [1]
Structure
Default (South)
24
Events
CSS\Action Naming: Supported: Normal (Open) .z-south, .z-south-splt V Hover Click, Select, and Drag. Focus Focus and Hover Disable
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: .z-south-colps, .z-south-colpsd, .z-south-exp, Supported: V V -over
CSS Specification
Default (South)
25
Class Name .z-south
.z-south-header
.z-south-noborder No border .z-south-splt Background of splitter
Default (West)
This is the Default (West) mold for Borderlayout.
Source
West [1]
Structure
Default (West)
26
Events
CSS\Action Naming: Normal (Open) .z-west, .z-west-splt V Hover Click, Select, and Drag. Focus Focus and Hover Disable
Supported:
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: .z-west-colps, .z-west-colpsd, .z-west-exp, Supported: V V -over
CSS Specification
Default (West)
27
Class Name .z-west
.z-west-header
.z-west-noborder No border .z-west-splt Background of splitter
Default (East)
This is the Default (East) mold for Borderlayout.
Source
East [1]
Structure
Default (East)
28
Events
CSS\Action Naming: Supported: Normal (Open) .z-east, .z-east-splt V Hover Click, Select, and Drag. Focus Focus and Hover Disable
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: .z-east-colps, .z-east-colpsd, .z-east-exp, Supported: V V -over
CSS Specification
Default (East)
29
Class Name .z-east
.z-east-header
.z-east-noborder No border .z-east-splt Background of splitter
border:0; position: absolute; height: 6px; width: 6px; z-index: 9; background: #C4DCFB left; background-image:url("${c:encodeURL('~./zul/img/splt/splt-h.png')}"); cursor: e-resize; cursor: col-resize; line-height: 1px; font-size: 1px;
Default (Center)
This is the Default (Center) mold for Borderlayout.
Source
Center [1]
Structure
Default (Center)
30
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-center V
CSS Specification
Class Name .z-center Description Border and background Background of header Default Values border: 1px solid #9ECAD8; position: absolute; overflow: hidden; background-color: white;
.z-center-header
.z-center-noborder No border
border:0;
Box
31
Box
Component Reference: Box Box is composed of HTML Table which can also be called as Vbox. It is used to separate each child to show them in a vertical layout..
Version History
Default (Vbox)
This is the Default (Vbox) mold for Box.
Source
Vbox [1]
Structure
Default (Vbox)
32
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-vbox V
CSS Specification
Class Name tr.z-vbox-sep Description Height of separator Default Values height: 0.3em; padding: 0; margin: 0;
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ box/ css/ box. css. dsp?view=markup
Button
Component Reference: Button Button is made by 3*3 grid style, the background and text can be customized by users.
Version History
Default (os)
33
Default (os)
This is the os mold for Button.
Source
Button [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-button-os V
CSS Specification
Class Name .z-button-os Description Font size and color Default Values font-family: ${fontFamilyC} ; font-size: ${fontSizeM}; font-weight: normal;
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ wgt/ css/ button. css. dsp?view=markup
trendy
34
trendy
This is the Default mold for Button.
Source
Button [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-button V -over V -clk V -focus V V -disd !
CSS Specification
trendy
35
Class Name .z-button
Description Font size and color
Default Values 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-btncorner.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-x.gif')}); .z-button .z-button-cl, .z-button .z-button-cr .z-button .z-button-cm Center image background-image:url(${c:encodeURL('~./zul/img/button/z-btn-ctr.gif')}); Right and left edge background-image:url(${c:encodeURL('~./zul/img/button/z-btn-y.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/Alie
Calendar
36
Calendar
Component Reference: Calendar The calendar is stuck by Javascript.
Version History
Default
This is the Default mold for Calendar.
Source
Calendar [1]
Structure
Default
37
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-calendar V -over ! -seld ! -over-seld ! -disd !
CSS Specification
Class Name .z-calendar Description Background and font size Default Values background: white; border: 1px solid #C5C5C5; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal; width: 215px; padding: 2px;
.z-calendar-seld Selected background background: #CCE0FB;
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ db/ css/ calendar. css. dsp?view=markup
Caption
38
Caption
Component Reference: Caption The caption is used for as a title appended to a Groupbox or Window.
Version History
Default
This is the Default mold for Caption.
Source
Caption [1]
Structure
Events
Default
39
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-caption V
CSS Specification
Class Name .z-caption input, .z- caption td .z-caption .z-caption-l Description Font size Font size of the left Font size of the right Default Values font-size: ${fontSizeS}; font-size: ${fontSizeM};
.z-caption .z-caption-r
font-size: ${fontSizeM};
.z-caption button, .z-caption .z-button .z-button-btn .z-caption a, .z-caption a:visited
Font size of button font-size: ${fontSizeXS}; font-weight: normal; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; Font size of A tag font-size: ${fontSizeS}; font-weight: normal; color: black; background: none; text-decoration: none;
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ wgt/ css/ caption. css?view=markup
Default (legend)
40
Default (legend)
This is the Default (legend) mold for Caption.
Source
Caption [1]
Structure
Events
None.
CSS Specification
Class Name .z-fieldset legend Description Font size Default Values font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ wgt/ css/ groupbox. css. dsp?view=markup
Cell
41
Cell
Component Reference: Cell Cell is composed of HTML td tag to be enclosed by Box(Hbox, Vbox) or Row.
Version History
Default (Row)
This is the Default mold for Cell.
Source
Cell [1]
Structure
Default (Row)
42
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-cell V
CSS Specification
Class Name .z-cell tr.z-row .z-cell Description Padding Background color and border Background color of the odd row Default Values padding: 2px; overflow: hidden; background: white; border-top: none; border-left: 1px solid white; border-right: 1px solid #CCC; border-bottom: 1px solid #DDD; background: #F0FAFF;
tr.z-grid-odd .z-cell
Checkbox
43
Checkbox
Component Reference: Checkbox Checkbox is composed of HTML Input element.
Version History
Default
This is the Default mold for Checkbox.
Source
Checkbox [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-checkbox V
Default
44
CSS Specification
Class Name .z-checkbox-cnt Description Font size Default Values font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ zul/ css/ norm. css. dsp?view=markup
Colorbox
Component Reference: Colorbox Colorbox is composed of two parts: an icon and a popup colorpicker.
Version History
Default
This is the Default mold for Colorbox.
Structure
Default
45
Default
46
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-colorbox V
CSS Specification
Class Name .z-colorbox Description Default Values Background -moz-border-radius: 3px; -webkit-border-radius: 3px; margin:0 2px; overflow: hidden; display: inline-block; vertical-align: middle; border: 1px solid #86A4BE; padding: 3px; background-color:#FFFFFF; position: relative;
.z-colorpalette-btn Background left: 200px; width: 20px; height: 20px; cursor: pointer; background: url(${c:encodeURL('~./zkex/img/colorbox/colorpicker-btn.gif')});
Column
47
Column
Component Reference: Column Columns and Column are used for Grid .
Version History
Default
This is the Default mold for Column.
Source
Column [1]
Structure
Default
48
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-columns V
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-column V -over !
CSS Specification
Class Name tr.z-columns Description Background image Default Values background-image: url(${c:encodeURL('~./zul/img/grid/s_hd.gif')}); background-color: #C7E5F1;background-repeat: repeat-x; overflow: hidden; border: 1px solid; border-color: #DAE7F6 #9EB6CE #9EB6CE #DAE7F6; white-space: nowrap; padding: 2px; font-size: ${fontSizeM}; font-weight: normal; cursor: pointer; padding-right: 9px; background:transparent url(${c:encodeURL('~./zul/img/sort/v_hint.gif')}); background-position: 99% center; background-repeat: no-repeat; cursor: pointer; padding-right: 9px; background:transparent url(${c:encodeURL('~./zul/img/sort/v_asc.gif')}); background-position: 99% center; background-repeat: no-repeat; cursor: pointer; padding-right: 9px; background:transparent url(${c:encodeURL('~./zul/img/sort/v_dsc.gif')}); background-position: 99% center; background-repeat: no-repeat; background: #DDEEFB url(${c:encodeURL('~./zul/img/grid/column-over.gif')}) repeat-x 0 0;
div.z-grid-header th.z-column
Border and font size
div.z-grid-header .z-column-sort div.z-column-cnt
Background of the content of the sort
div.z-grid-header .z-column-sort-asc div.z-column-cnt div.z-grid-header .z-column-sort-dsc div.z-column-cnt div.z-grid-header .z-column-sort-asc, div.z-grid-header .z-column-sort-dsc div.z-column-cnt
Background of the content of the ascendant sort Background of the content of the descendant sort Background of the sort
Font size of the content Overflow Background of button
font-size: ${fontSizeM}; font-weight: normal; font-family: ${fontFamilyC};
div.z-column-cnt .z-column-btn
overflow: hidden 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; background: #B9EBFF url(${c:encodeURL('~./zul/img/grid/column-over.gif')}) repeat-x 0 0;
.z-column-over
Hovered event
Columnlayout
49
Columnlayout
Component Reference: Columnlayout Columnlayout and Columnchildren.
Version History
Default
This is the Default mold for Columnlayout.
Structure
Events
Default
50
CSS\Action Naming:
Normal (Open) .z-columnlayout, z-columnchildren V
Supported:
CSS Specification
Class Name .z-columnlayout .z-columnlayout-inner .z-columnchildren .z-columnchildren-body .z-columnchildren-cnt Description Overflow Overflow Padding and margin Overflow Overflow Default Values visibility: hidden; overflow: hidden; zoom: 1; overflow: hidden; float: left; padding: 0; margin: 0; overflow: hidden; zoom: 1; overflow: hidden; zoom: 1; overflow: hidden;
Combobox
Component Reference: Combobox Combobox is composed of two parts: an input box and a button.
Version History
Default
51
Default
This is the Default mold for Combobox.
Source
Combobox [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-combobox V -over V -btn-clk V -focus V -btn-over V -disd !
CSS Specification
Default
52
Class Name .z-combobox
Description Font size
Default Values border: 0; padding: 0; margin: 0; white-space: nowrap; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal; background: #FFF url(${c:encodeURL('~./zul/img/misc/text-bg.gif')}) repeat-x 0 0; border: 1px solid #86A4BE; background: #FFF url(${c:encodeURL('~./zul/img/misc/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870; background: #ECEAE4;
.z-combobox-inp
Background of input element
.z-combobox-text-invalid
Background of invalidated Background of disabled and read only Background of the button image
.z-combobox-readonly, .z-combobox-text-disd
.z-combobox .z-combobox-img
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;
Combobutton
Component Reference: Combobutton Combobutton is made by 3*3 grid style, the background and text can be customized by users.
Version History
Default
53
Default
This is the default mold for Combobutton.
Source
Combobutton [1]
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-combobutton -over V V -clk Click -focus V
CSS Specification
Class Name .z-combobutton Description Font size and color Default Values font-family: ${fontFamilyC} ; font-size: ${fontSizeM}; font-weight: normal;
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ wgt/ css/ combobutton. css. dsp?view=markup
Comboitem
54
Comboitem
Component Reference: Comboitem Comboitem belongs to Combobox as a row item, which distributes into four parts: image, label, content, and description.
Version History
Default
This is the Default mold for Comboitem.
Source
Combobox [1]
Structure
Default
55
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-comboitem V -over ! -seld ! -over-seld ! -disd !
CSS Specification
Class Name .z-comboitem.z-combobox-pp .z-comboitem, .z-combobox-pp .z-comboitem a, .z-combobox-pp .z-comboitem a:visited .z-combobox-pp .z-comboitem-text, .z-combobox-pp .z-comboitem-img .z-combobox-pp .z-comboitem-inner, .z-combobox-pp .z-comboitem-cnt Font size Description Font size Default Values font-size: ${fontSizeM}; font-weight: normal; color: black; text-decoration: none; white-space: nowrap; font-size: ${fontSizeS}; cursor: pointer; color: #888; font-size: ${fontSizeXS}; padding-left: 6px;
Color and font size of Comboitem's description and content
Datebox
Component Reference: Datebox Datebox is composed of two parts: an input box and a button.
Version History
Default
56
Default
This is the Default mold for Datebox.
Source
Datebox [1]
Structure
Default
57
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-datebox V -over V -btn-clk V -focus V -btn-over V -disd !
CSS Specification
Class Name .z-datebox Description Font size Default Values border: 0; padding: 0; margin: 0; white-space: nowrap; 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; background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870; background: #ECEAE4;
.z-datebox-inp
Background of input element Background of invalidated Background of disabled and read only Background of the button image
.z-datebox-text-invalid
.z-datebox-readonly, .z-datebox-text-disd .z-datebox .z-datebox-btn
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; display: block; position: absolute; z-index: 88000; background: white; border: 1px solid #888888; padding: 2px; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
.z-datebox-pp
Font size and background of datebox's popup
Decimalbox
58
Decimalbox
Component Reference: Decimalbox Decimalbox is composed of a HTML Input element.
Version History
Default
This is the Default mold for Decimalbox.
Source
Decimalbox [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-decimalbox V -focus ! -disd !
CSS Specification
Default
59
Class Name .z- decimalbox
Description Font size and background Invalid event
Default Values background: #FFF url(${c:encodeURL('~./zul/img/misc/text-bg.gif')}) repeat-x 0 0; border: 1px solid #7F9DB9; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal; background: #FFF url(${c:encodeURL('~./zul/img/misc/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870; background: #ECEAE4;
.z-decimalbox-text-invalid
.z-decimalbox-readonly, .z-decimalbox-text-disd
Disabled and read-only
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ inp/ css/ input. css. dsp?view=markup
Detail
Component Reference: Detail Detail is used for Grid.
Version History
Default
This is the Default mold for Detail.
Structure
Default
60
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-detail V
CSS Specification
Class Name tr.z-row .z-detail-outer Description Background Default Values background: #C6E8FC repeat-y left; border-top: none; border-left: 1px solid white; border-right: 1px solid #C0C0C0; border-bottom: 1px solid #D0D0D0; vertical-align: top; background-image: url(${c:encodeURL('~./zul/img/grid/detail-bg.png')}); cursor:pointer; width: 100%; height: 18px; background: transparent no-repeat 4px 3px; background-image: url(${c:encodeURL('~./zul/img/grid/row-expand.png')});
.z-detail-img
Background of image icon
Doublebox
61
Doublebox
Component Reference: Doublebox Doublebox is composed of a HTML Input element.
Version History
Default
This is the Default] mold for Doublebox.
Source
Doublebox [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-doublebox V -focus ! -disd !
CSS Specification
Default
62
Class Name .z-doublebox
Default Values background: #FFF url(${c:encodeURL('~./zul/img/misc/text-bg.gif')}) repeat-x 0 0; border: 1px solid #7F9DB9; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal; background: #FFF url(${c:encodeURL('~./zul/img/misc/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870; background: #ECEAE4;
.z-doublebox-text-invalid
.z-doublebox-readonly, .z-doublebox-text-disd
Doublespinner
Component Reference: Doublespinner Doublespinner is composed of two parts, an input box and a button.
Version History
Default
This is the Default mold for Doublespinner.
Source
Spinner [1]
Structure
Default
63
Events
CSS\Action Naming: Supported: Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable -btn-clk V -focus V -btn-over V -disd ! .z-doublespinner -over V V
CSS Specification
Class Name .z-doublespinner-inp Description Background of input element Default Values 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; background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870;
.z-doublespinner-text-invalid
Background of invalidated
.z-doublespinner-readonly, .z-doublespinner-text-disd
Background of background: #ECEAE4; disabled and read only 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;
.z-doublespinner.z-doublespinner-btn
Fisheyebar
64
Fisheyebar
Component Reference: Fisheyebar Fisheyebar and Fisheye.
Version History
Default
This is the Default mold for Fisheyebar.
Structure
Default
65
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: .z-fisheyebar, .z-fisheye Supported: V
CSS Specification
Class Name .z-fisheyebar Description Visibility Default Values visibility: hidden; position: relative;
.z-fisheyebar-inner Position of fisheyebar .z-fisheye Position of fisheye Image size Font size
position: absolute; z-index: 2;
.z-fisheye-img .z-fisheye-text
border: 0px; position: absolute; width: 100%; height: 100%; 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
Component Reference: Footer Foot and Footer are used for Grid.
Version History
Default
66
Default
This is the Default mold for Footer.
Source
Footer [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: .z-foot, .z-footer V
Supported:
Default
67
CSS Specification
Class Name div.z-footer-cnt div.z-footer-cnt Description Font size Overflow Default Values border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal; overflow: hidden;
Frozen
Component Reference: Frozen Frozen is a fake scrollbar to scroll Grid and Listbox.
Version History
Default
This is the Default mold for Frozen.
Source
Frozen [1]
Structure
Default
68
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-frozen V
CSS Specification
Class Name .z-frozen Description Background Image Default Values background-image: url(${c:encodeURL('~./zul/img/common/bar-bg.png')});
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ mesh/ css/ frozen. css. dsp?view=markup
Grid
Component Reference: Grid Grid combines with a set of its children, including Rows , Row , Columns , Column , Foot , Footer , Group , Groupfoot , Detail , and Paging.
Version History
Default
69
Default
This is the Default mold for Grid.
Source
Grid [1]
Structure
Events
Default
70
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-grid V
CSS Specification
Class Name div.z-grid div.z-grid-header, div.z-grid-header tr, div.z-grid-footer div.z-grid-header tr.z-columns, div.z-grid-header tr.z-auxhead div.z-grid-body Description Background color Border Default Values background: #DAE7F6; border: 1px solid #7F9DB9; overflow: hidden; zoom: 1; border: 0; overflow: hidden; width: 100%;
Background image of the header
background-color: #C3E7FB; background-repeat: repeat-x; background-image: url(${c:encodeURL('~./zul/img/grid/column-bg.png')});
Background color of background: white; border: 0; overflow: auto; width: 100%; the body Background color of background: #DAE7F6; border-top: 1px solid #9EB6CE; the footer
div.z-grid-footer
paging
71
paging
This is the paging mold for Grid.
Source
Grid [1]
Structure
paging
72
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-grid V
CSS Specification
Class Name div.z-grid-pgi-b div.z-grid-pgi-t Description Border of bottom paging Border of top paging Default Values border-top: 1px solid #AAB; overflow: hidden; border-bottom: 1px solid #AAB; overflow: hidden;
Group
Component Reference: Group Group is used for Grid.
Version History
Default
73
Default
This is the Default mold for Group.
Source
Group [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-group V
CSS Specification
Default
74
Class Name tr.z-group
Description Background image Font size
Default Values background: #E9F2FB url(${c:encodeURL('~./zul/img/grid/group_bg.gif')}) repeat-x 0 0;
div.z-group-cnt
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 td.z-group-inner
Color and font color:#3764a0; font: normal ${fontSizeM} ${fontFamilyT}; padding: 4px 2px; width: size auto;font-weight:bold;
Padding and border Image icon
padding: 2px; overflow: hidden; border-top: 2px solid #81BAF5; border-bottom: 1px solid #bcd2ef; color: #3764a0; font: normal ${fontSizeM} ${fontFamilyT};font-weight:bold; 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;
.z-group-img
Groupbox
Component Reference: Groupbox Groupbox has two mold: Default and 3d. Groupbox combines Caption as its title.
Version History
Default
75
Default
This is the Default mold for Groupbox.
Source
Groupbox [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-fieldset V
CSS Specification
Class Name .z-fieldset-cnt Description Overflow of content Default Values overflow: hidden;
[since 6.0.0]
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-groupbox V
Default
76
CSS Specification
Class Name .z-groupbox-cnt Description Overflow of content Default Values overflow: hidden;
3d
This is the 3d mold for Decimalbox.
Source
Groupbox [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-groupbox V
3d
77
CSS Specification
Class Name .z-groupbox-header Description Overflow of header Font size Default Values overflow: hidden;zoom: 1;
.z-groupbox-hl .z-groupbox-header .z-groupbox-tl
color: #373737; font-family: ${fontFamilyT}; font-size: ${fontSizeM}; font-weight: normal; padding: 0 0 4px 0; border: 0 none; background: transparent; background:transparent no-repeat scroll 0 top; background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-corner.png')}); font-size:0;height:5px; line-height:0; margin-right:5px; zoom:1;
Background of top left
.z-groupbox-tr
Background of top right
background:transparent no-repeat scroll right -5px; background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-corner.png')}); font-size:0; height:5px; line-height:0; margin-right:-5px; position:relative; zoom:1;
.z-groupbox-hl
Background of header left
background:transparent repeat-y scroll 0 0; background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-hl.png')}); border-bottom:1px solid #B2CCD9; padding-left:6px; zoom: 1;
.z-groupbox-hr
Background of header right
background:transparent repeat-y scroll right 0; background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-hr.png')}); padding-right:6px; zoom: 1;
.z-groupbox-hm
Background of header middle
background:transparent repeat-x scroll 0 0; background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-hm.png')}); overflow:hidden; zoom: 1;
.z-groupbox-cnt
Border of content Background of bottom middle Background of bottom left Background of bottom right
border: 1px solid #B2CCD9; padding: 5px;
.z-groupbox-bm
background:transparent url(${c:encodeURL('~./img/shdmd.gif')}) repeat-x 0 0; height: 6px; font-size: 0; line-height: 0; zoom: 1; background:transparent url(${c:encodeURL('~./img/shdlf.gif')}) no-repeat 0 bottom; padding-left: 6px; zoom: 1; background:transparent url(${c:encodeURL('~./img/shdrg.gif')}) no-repeat right bottom; padding-right: 6px; zoom: 1;
.z-groupbox-bl
.z-groupbox-br
[since 6.0.0]
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-groupbox-3d V
3d
78
CSS Specification
Class Name .z-groupbox-3d-header Description Overflow of header Font size Default Values overflow: hidden;zoom: 1;
.z-groupbox-3d-hl .z-groupbox-3d-header .z-groupbox-3d-tl
color: #373737; font-family: ${fontFamilyT}; font-size: ${fontSizeM}; font-weight: normal; padding: 0 0 4px 0; border: 0 none; background: transparent; background:transparent no-repeat scroll 0 top; background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-corner.png')}); font-size:0;height:5px; line-height:0; margin-right:5px; zoom:1;
Background of top left
.z-groupbox-3d-tr
Background of top right
background:transparent no-repeat scroll right -5px; background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-corner.png')}); font-size:0; height:5px; line-height:0; margin-right:-5px; position:relative; zoom:1;
.z-groupbox-3d-hl
Background of header left
background:transparent repeat-y scroll 0 0; background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-hl.png')}); border-bottom:1px solid #B2CCD9; padding-left:6px; zoom: 1;
.z-groupbox-3d-hr
Background of header right
background:transparent repeat-y scroll right 0; background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-hr.png')}); padding-right:6px; zoom: 1;
.z-groupbox-3d-hm
Background of header middle
background:transparent repeat-x scroll 0 0; background-image:url(${c:encodeURL('~./zul/img/groupbox/groupbox-hm.png')}); overflow:hidden; zoom: 1;
.z-groupbox-3d-cnt
Border of content Background of bottom middle Background of bottom left Background of bottom right
border: 1px solid #B2CCD9; padding: 5px;
.z-groupbox-3d-bm
background:transparent url(${c:encodeURL('~./img/shdmd.gif')}) repeat-x 0 0; height: 6px; font-size: 0; line-height: 0; zoom: 1; background:transparent url(${c:encodeURL('~./img/shdlf.gif')}) no-repeat 0 bottom; padding-left: 6px; zoom: 1; background:transparent url(${c:encodeURL('~./img/shdrg.gif')}) no-repeat right bottom; padding-right: 6px; zoom: 1;
.z-groupbox-3d-bl
.z-groupbox-3d-br
Groupfoot
79
Groupfoot
Component Reference: Groupfoot Groupfoot is used for Grid.
Version History
Default
This is the Default mold for Groupfoot.
Source
Groupfoot [1]
Structure
Default
80
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-groupfoot V
CSS Specification
Class Name .z-groupfoot Description Background image Border Default Values background: #E9F2FB url(${c:encodeURL('~./zul/img/grid/groupfoot_bg.gif')}) repeat-x 0 0; border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal; padding: 2px; overflow: hidden; color: #2C559C; font: normal ${fontSizeM} ${fontFamilyT};font-weight:bold;
div.z-groupfoot-cnt
td.z-groupfoot-inner .z-groupfoot-inner .z-groupfoot-cnt span, .z-groupfoot-inner .z-groupfoot-cnt
Padding Font size and color
Hbox
Component Reference: Hbox Hbox is composed of a HTML Table. It is a kind of box which shows each child in a horizontal layout.
Version History
Default
81
Default
This is the Default mold for Hbox.
Source
Hbox [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-hbox V
CSS Specification
Class Name td.z-hbox-sep Description Width of separator Default Values width: 0.3em; padding: 0; margin: 0;
Hlayout
82
Hlayout
Component Reference: Hlayout Hlayout is composed of HTML Div tag.
Version History
Default
This is the Default mold for Hlayout.
Source
Hlayout [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: z-hlayout V
Default
83
CSS Specification
Class Name .z-hlayout .z-hlayout-inner Description Overflow Display Default Values hidden display:-moz-inline-box; display: inline-block; position: relative; vertical-align: middle;
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ layout/ css/ layout. css. dsp?view=markup
Intbox
Component Reference: Intbox Intbox is composed of HTML Input element.
Version History
Default
This is the Default mold for Intbox.
Source
Intbox [1]
Structure
Events
Default
84
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-intbox V -focus ! -disd !
CSS Specification
Class Name .z- intbox Description Font size and background Default Values 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; background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870; background: #ECEAE4;
.z-intbox-text-invalid Invalid event
.z-intbox-readonly, .z-intbox-text-disd
Label
Component Reference: Label Label is composed of HTML Span.
Version History
Default
85
Default
This is the Default mold for Label.
Source
Label [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-label V
CSS Specification
Class Name .z-label Description Font size Default Values font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
Listbox
86
Listbox
Component Reference: Listbox Listbox combine with a set of its children, including Listhead , Listheader , Listitem , Listcell , Listgroup , Listgroupfoot , Listfoot , Listfooter , and Paging ..
Version History
Default
This is the Default mold for Listbox.
Source
Listbox [2]
Structure
Default
87
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-listbox V
CSS Specification
Class Name div.z-listbox Description Background color Default Values background: #DAE7F6; border: 1px solid #7F9DB9; overflow: hidden; zoom: 1; border: 0; overflow: hidden; width: 100%;
div.z-listbox-header, div.z-listbox-header tr, div.z-listbox-footer div.z-listbox-body
Border
Background color of the body Background color of the footer
background: white; border: 0; overflow: auto; width: 100%; position: relative; background: #DAE7F6; border-top: 1px solid #9EB6CE;
div.z-listbox-footer
paging
This is the paging mold for Listbox.
Source
Listbox [2]
Structure
paging
88
Events
CSS Specification
Class Name div.z-listbox-pgi-b div.z-listbox-pgi-t Description Border of bottom paging Border of top paging Default Values border-top: 1px solid #AAB; overflow: hidden; border-bottom: 1px solid #AAB; overflow: hidden;
select
89
select
This is the select mold for Listbox.
Source
Listbox [2]
Structure
Events
CSS Specification
None.
Listfooter
90
Listfooter
Component Reference: Listfooter Listfoot and Listfooter are used for Listbox.
Version History
Default
This is the Default mold for Listfooter.
Source
Listfooter [2]
Structure
Events
CSS\Action Naming: Supported: Normal (Open) .z-listfoot, .z-listfooter V Hover Click, Select, and Drag. Focus Focus and Hover Disable
Default
91
CSS Specification
Class Name .z-listfooter Description Font size Default Values cursor: pointer; padding: 0 2px; font-size: ${fontSizeM}; font-weight: normal; overflow: hidden; border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal; overflow: hidden;
div.z-listfooter-cnt Font size of the content div.z-listfooter-cnt Overflow
Listgroup
Component Reference: Listgroup Listgroup is used for Listbox .
Version History
Default
This is the Default mold for Listgroup.
Source
Listgroup [2]
Structure
Default
92
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-listgroup V
CSS Specification
Class Name tr.z-listgroup Description Background image Color and font size Padding and border Image icon Default Values background: #E9F2FB url(${c:encodeURL('~./zul/img/grid/group_bg.gif')}) repeat-x 0 0;
td.z-listgroup-inner div.z-listcell-cnt td.z-listgroup-inner
color:#3764a0; font: normal ${fontSizeM} ${fontFamilyT}; padding: 4px 2px; width: auto;font-weight:bold; padding-top: 2px; border-top: 2px solid #81BAF5;border-bottom: 1px solid #bcd2ef;
.z-listgroup-img
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
Component Reference: Listgroupfoot Listgroupfoot is used for Listbox .
Version History
Default
93
Default
This is the Default mold for Listgroupfoot.
Source
Listgroupfoot [2]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-listgroupfoot V
CSS Specification
Class Name .z-listgroupfoot Description Background image Color and font size Default Values background: #E9F2FB url(${c:encodeURL('~./zul/img/grid/groupfoot_bg.gif')}) repeat-x 0 0; color: #2C559C; font: normal ${fontSizeM} ${fontFamilyT};font-weight:bold;
td.z-listgroupfoot-inner div.z-listcell-cnt
Listheader
94
Listheader
Component Reference: Listheader Listhead and Listheader are used for Listbox .
Version History
Default
This is the Default mold for Listheader.
Source
Listheader [2]
Structure
Events
Default
95
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: .z-listhead, .z-listheader Supported: V
CSS Specification
Class Name div.z-listbox-header tr.z-listhead Description Background image Default Values background-image: url(${c:encodeURL('~./zul/img/grid/s_hd.gif')}); background-color: #C7E5F1;background-repeat: repeat-x; overflow: hidden; border: 1px solid; border-color: #DAE7F6 #9EB6CE #9EB6CE #DAE7F6; white-space: nowrap; padding: 2px; font-size: ${fontSizeM}; font-weight: normal; cursor: pointer; padding-right: 9px; background:transparent url(${c:encodeURL('~./zul/img/sort/v_hint.gif')}); background-position: 99% center; background-repeat: no-repeat; cursor: pointer; padding-right: 9px; background:transparent url(${c:encodeURL('~./zul/img/sort/v_asc.gif')}); background-position: 99% center; background-repeat: no-repeat; cursor: pointer; padding-right: 9px; background:transparent url(${c:encodeURL('~./zul/img/sort/v_dsc.gif')}); background-position: 99% center; background-repeat: no-repeat; border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal; overflow: hidden
div.z-listbox-header th.z-listheader
Border and font size
div.z-listbox-header th.z-listheader-sort div.z-listheader-cnt div.z-listbox-header th.z-listheader-sort-asc div.z-listheader-cnt div.z-listbox-header th.z-listheader-sort-dsc div.z-listheader-cnt div.z-listheader-cnt
Background of the content of the sort
Background of the content of the ascendant sort Background of the content of the descendant sort Font size of the content Overflow
div.z-listheader-cnt
Listitem
96
Listitem
Component Reference: Listitem Listitem and Listcell are used for Listbox .
Version History
Default
This is the Default mold for Listitem.
Source
Listitem [2]
Structure
Events
Default
97
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: .z-listitem, .z-listcell Supported: V ! ! ! ! ! -over -seld -focus -over-seld -disd
CSS Specification
Class Name tr.z-listitem, tr.z-listitem a, tr.z-listitem a:visited tr.z-listitem td.z-listitem-focus tr.z-listitem-seld tr.z-listitem-over tr.z-listitem-over-seld Background of focused event background-image: url(${c:encodeURL('~./zul/img/focusd.png')}); background-repeat: no-repeat; background: #b3c8e8; border: 1px solid #6f97d2; background: #dae7f6; background: #6eadff; Description Font size of listitem Default Values font-size: ${fontSizeM}; font-weight: normal; color: black; text-decoration: none;
Background of selected event Background of hovered event Background of hovered and selected event Font size of listcell
div.z-listcell-cnt
border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
Longbox
98
Longbox
Component Reference: Longbox Longbox is composed of HTML Input element.
Version History
Default
This is the Default mold for Longbox.
Source
Longbox [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-longbox V -focus ! -disd !
CSS Specification
Default
99
Class Name .z-longbox
Description Font size and background
Default Values background: #FFF url(${c:encodeURL('~./zul/img/misc/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/misc/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870; background: #ECEAE4;
.z-longbox-readonly, .z-longbox-text-disd
Menubar
Component Reference: Menubar Menubar combines with two children: Menu , and Menuitem .
Version History
Default (Horizontal)
This is the Default (Horizontal) mold for Menubar.
Source
Menubar [1]
Structure
100
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-menubar-hor V
CSS Specification
Class Name Description Default Values position : relative; display: block; padding : 2px 0px; border-bottom : 1px solid #B1CBD5; background: #CEE7F5 repeat-x 0 center; background-image: url(${c:encodeURL('~./zul/img/common/bar-bg.png')}); .z-menubar-hor Background image
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ menu/ css/ menu. css. dsp?view=markup
Default (Vertical)
This is the Default (Vertical) mold for Menubar.
Source
Menubar [1]
Structure
Default (Vertical)
101
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-menubar-ver V
CSS Specification
Class Name Description Default Values position : relative; display: block; padding : 2px 0px; border-bottom : 1px solid #B1CBD5; background: #CEE7F5 repeat-x 0 center; background-image: url(${c:encodeURL('~./zul/img/common/bar-bg.png')}); .z-menubar-ver Background image
Menu in Menubar
This is the Menu in Menubar mold for Menubar.
Source
Menu [1]
Structure
Menu in Menubar
102
Events
CSS\Action Normal (Open) Naming: Supported: .z-menu V Hover -btn-over V Click, Select, and Drag. Focus Focus and Hover Disable -btn-seld V -disd !
CSS Specification
Class Name .z-menubar-hor .z-menu .z-menubar-hor .z-menu Description Vertical align Font size Default Values vertical-align: middle; -adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; white-space:nowrap; font-family: ${fontFamilyT}; font-size: ${fontSizeMS}; -adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; white-space:nowrap; font-family: ${fontFamilyT}; font-size: ${fontSizeMS}; padding-left:18px;
.z-menubar-hor .z-menu-btn
Font size
.z-menu-body-text-img .z-menu-inner-m .z-menu-btn
Padding of menu button with text and image
Menu in Menubar
103
Padding of menu button with image Size of button left padding-left:18px;
.z-menu-body-img .z-menu-inner-m .z-menu-btn .z-menubar-hor .z-menu-body .z-menu-inner-l .z-menubar-hor .z-menu-body .z-menu-inner-r .z-menu-body .z-menu-inner-m div
font-size:1px; height:21px; line-height:1px; width:3px;
Size of button right
Menu arrow
display:block; min-height:16px; padding-right: 3px; padding-left:0px; background: transparent no-repeat right -14px; background-image:url(${c:encodeURL('~./zul/img/menu/btn-arrow.gif')});
Menuitem in Menubar
This is the Menuitem in Menubar mold for Menubar.
Source
Menuitem [1]
Structure
Menuitem in Menubar
104
Events
CSS\Action Normal (Open) Naming: Supported: .z-menu-item V Hover -btn-over V Click, Select, and Drag. Focus Focus and Hover Disable -btn-seld V -disd !
CSS Specification
Class Name .z-menubar-hor .z-menu-item .z-menubar-hor .z-menu-item Description Vertical align Font size Default Values vertical-align: middle; -adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; white-space:nowrap; font-family: ${fontFamilyT}; font-size: ${fontSizeMS}; -adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; white-space:nowrap; font-family: ${fontFamilyT}; font-size: ${fontSizeMS}; padding-left:18px;
.z-menubar-hor .z-menu-item-btn
Font size
.z-menu-item-body-text-img .z-menu-item-inner-m .z-menu-item-btn
Padding of menuitem button with text and image Padding of menuitem button with image Size of button left
.z-menu-item-body-img .z-menu-item-inner-m .z-menu-item-btn .z-menubar-hor .z-menu-item-body .z-menu-item-inner-l .z-menubar-hor .z-menu-item-body .z-menu-item-inner-r
padding-left:12px; padding-right:0px;
Size of button right
Menupopup
105
Menupopup
Component Reference: Menupopup Menupopup combines with three children: Menu, Menuitem, and Menuseparator.
Version History
Default
This is the Default mold for Menupopup.
Source
Menupopup [1]
Structure
Default
106
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-menu-popup V
CSS Specification
Class Name z-menu-popup Description Background image Default Values background:#CCE6FB repeat-y scroll 0 0; border:1px solid #7F9DB9; padding:2px; z-index:88000; background-image : url(${c:encodeURL('~./zul/img/menu/pp-bg.png')}); -x-system-font:none; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; text-decoration:none; white-space:nowrap; font-family: ${fontFamilyT}; font-size: ${fontSizeMS}; background:transparent none repeat scroll 0 0; border:0 none; padding:0px; margin:0px !important;
.z-menu-popup
Font-size
.z-menu-popup .z-menu-popup-cnt
The padding and the border of the popup content
Menu in Menupopup
107
Menu in Menupopup
This is the Menu in Menupopup mold for Menupopup.
Source
Menupopup [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-menu V -over ! -disd !
CSS Specification
Menu in Menupopup
108
Class Name .z-menu-popup-cnt .z-menu
Description The outline of menu in menupopup The outline of menu content The outline of menu image
Default Values line-height:100%; list-style-image:none !important; list-style-position:outside !important; list-style-type:none !important; margin:0 !important; display:block; padding:1px; cursor:pointer;
.z-menu-popup-cnt .z-menu a.z-menu-cnt .z-menu-popup-cnt .z-menu .z-menu-img
color:#222222; display:block; line-height:16px; outline-color:-moz-use-text-color; outline-style:none; outline-width:0; padding:3px 21px 3px 3px; white-space:nowrap; background-position:center center; border:0px; height:16px; margin-right:9px; padding:0; vertical-align:top; width:16px; background:transparent no-repeat scroll right center; background-image:url(${c:encodeURL('~./zul/img/menu/arrow.gif')});
.z-menu-popup-cnt Menu arrow .z-menu .z-menu-cnt-img image
Menuitem in Menupopup
This is the Menuitem in Menupopup mold for Menupopup.
Source
Menupopup [1]
Structure
Menuitem in Menupopup
109
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-menu-item V -over ! -disd !
CSS Specification
Class Name .z-menu-popup-cnt .z-menu-item Description The outline of menuitem in menupopup The outline of menuitem content Default Values line-height:100%; list-style-image:none !important; list-style-position:outside !important; list-style-type:none !important; margin:0 !important; display:block; padding:1px; cursor:pointer; color:#222222; display:block; line-height:16px; outline-color:-moz-use-text-color; outline-style:none; outline-width:0; padding:3px 21px 3px 3px; white-space:nowrap;
.z-menu-popup-cnt .z-menu-item a.z-menu-item-cnt .z-menu-popup-cnt .z-menu-item .z-menu-item-img
The outline of menuitem image
background-position:center center; border:0px; height:16px; margin-right:9px; padding:0; vertical-align:top; width:16px;
Menuseparator
Component Reference: Menuseparator Menuseparator is used for Menupopup.
Version History
Default
110
Default
This is the Default mold for Menuseparator.
Source
Menuseparator [1]
Structure
Events
CSS\Action Naming: Supported: Normal (Open) .z-menu-separator V Hover Click, Select, and Drag. Focus Focus and Hover Disable
CSS Specification
Default
111
Class Name .z-menu-popup-cnt .z-menu-separator
Description The outline of menuseparator
Default Values line-height:100%; list-style-image:none !important; list-style-position:outside !important; list-style-type:none !important; margin:0 !important; display:block; padding:1px; cursor:pointer; background-color:#E0E0E0; border-bottom:1px solid #FFFFFF; display:block; font-size:1px; line-height:1px; margin:2px 3px; overflow:hidden; width:auto;
.z-menu-popup-cnt .z-menu-separator-inner
Background
Paging
Component Reference: Paging Paging is used for Grid , Listbox , and Tree.
Version History
Default
This is the Default mold for Paging.
Source
Paging [1]
Structure
Default
112
Events
CSS\Action Normal (Open) Naming: Supported: .z-paging V Hover -btn-over V Click, Select, and Drag. Focus Focus and Hover Disable -btn-clk V -disd !
CSS Specification
Class Name .z-paging Description Background image Default Values border-color:#B1CBD5; border-style:solid; border-width:0 0 1px; display:block; padding:2px; position:relative; background:#DAF3FF repeat-x scroll 0 center; background-image: url(${c:encodeURL('~./zul/img/common/bar-bg.png')}); -x-system-font:none; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; white-space:nowrap; font-family: ${fontFamilyT}; font-size: ${fontSizeMS}; cursor:pointer; font-weight:normal; white-space:nowrap; width:auto; font-family: ${fontFamilyT}; font-size: ${fontSizeMS}; background-repeat:no-repeat; cursor:pointer; height:21px; width:21px; padding:0; white-space:nowrap;
.z-paging td, .z-paging span, Font size .z-paging input, .z-paging div, .z-paging button .z-paging .z-paging-btn Font size of paging button Size of paging button
.z-paging-btn .z-paging-first, .z-paging-btn .z-paging-last, .z-paging-btn .z-paging-next, .z-paging-btn .z-paging-prev .z-paging .z-paging-sep
Background of separator
background:no-repeat center center; border:0 none; cursor:default; display:block; font-size:1px; height:16px; margin:0 2px; overflow:hidden; width:4px; background-image:url(${c:encodeURL('~./zul/img/paging/pg-split.gif')}); background-position:0 0; background-image:url(${c:encodeURL('~./zul/img/paging/pg-btn.png')}); background-position:0 -21px; background-image:url(${c:encodeURL('~./zul/img/paging/pg-btn.png')});
.z-paging-btn .z-paging-next
Background of the next button Background of the previous button Background of the last button Background of the first button Position of the information
.z-paging-btn .z-paging-prev
.z-paging-btn .z-paging-last
background-position:0 -42px; background-image:url(${c:encodeURL('~./zul/img/paging/pg-btn.png')}); background-position:0 -63px; background-image:url(${c:encodeURL('~./zul/img/paging/pg-btn.png')}); color:#444444; position:absolute; right:8px; top:5px;
.z-paging-btn .z-paging-first
.z-paging-info
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ mesh/ css/ paging. css. dsp?view=markup
os
113
os
This is the os mold for Paging.
Source
Paging [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-paging-os V :Hover V -seld V
CSS Specification
Class Name .z-paging-os Description Background image Background of content Default Values background: white; padding: 5px; zoom:1;
.z-paging-os .z-paging-os-cnt
padding: 2px 3px; background-color:#C7E5F1; background-image:url(${c:encodeURL('~./zul/img/grid/column-bg.png')}); background-repeat:repeat-x; border: 1px solid #DAE7F6; font-size: ${fontSizeS}; color: #1725A0; font-weight: normal; text-decoration: none; color:red
.z-paging-os .z-paging-os-cnt:hover .z-paging-os .z-paging-os-seld
Color of mouse over 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')});
os
114
.z-paging-os .z-paging-os-seld:hover Color of selected mouse over Font size color: #403E39;
.z-paging-os span
font-size: ${fontSizeS}; color: #555; font-weight: normal;
Panel
Component Reference: Panel Panel is made by 13 block. It can separate two styling: Has frame and Without frame.
Version History
Default
This is the Default mold for Panel.
Source
Panel [1]
Structure
Has Frame
Without Frame
Default
115
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-panel V
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: .z-panel-close .z-panel-max .z-panel-maxd .z-panel-min .z-panel-exp V -over
Supported:
CSS Specification
Default
116
Class Name .z-panel-header
Description Header's color, border, and background
Default Values overflow: hidden; color: #0F3B82; font: normal ${fontSizeM} ${fontFamilyT}; padding: 5px 3px 4px 5px; border: 1px solid #b1cbd5; line-height: 15px; background:transparent repeat-x 0 -1px; background-image: url(${c:encodeURL('~./zul/img/wnd/panel-hm.png')}); font-weight:bold; zoom: 1; background: white; border: 1px solid #b1cbd5; border-top: 0; overflow: hidden; position: relative; background: transparent no-repeat 0 top; background-image: url(${c:encodeURL('~./zul/img/wnd/panel-corner.png')}); margin-right: 5px; height: 5px; font-size: 0; line-height: 0; zoom: 1;
.z-panel-children
The border
.z-panel-tl
Top left
.z-panel-tr
Top right
background: transparent no-repeat right -10px; background-image: url(${c:encodeURL('~./zul/img/wnd/panel-corner.png')}); position: relative; height: 5px; margin-right: -5px; font-size: 0; line-height:0; zoom: 1;
.z-panel-hl
Header left
background: transparent no-repeat 0 0; background-image: url(${c:encodeURL('~./zul/img/wnd/panel-hl.png')}); padding-left: 6px; border-bottom: 1px solid #A7DCF9; zoom: 1;
.z-panel-hr
Header right
background: transparent no-repeat right 0; background-image: url(${c:encodeURL('~./zul/img/wnd/panel-hr.png')}); padding-right: 6px; zoom: 1;
.z-panel-hm
Header's middle
background: transparent repeat-x 0 0; background-image: url(${c:encodeURL('~./zul/img/wnd/panel-hm.png')}); overflow: hidden; zoom: 1;
.z-panel-cm .z-panel-cl, .z-panel-fl
Center middle Left of footer and center
border: 0; margin: 0; background: #CDF0FF; padding-top: 6px; background: transparent repeat-y 0 0; background-image: url(${c:encodeURL('~./zul/img/wnd/panel-clr.png')}); padding-left: 6px; zoom: 1;
.z-panel-cr, .z-panel-fr
Right of foorter and center
background: transparent repeat-y right 0; background-image: url(${c:encodeURL('~./zul/img/wnd/panel-clr.png')}); padding-right: 6px; zoom: 1;
.z-panel-fm .z-panel-bl
Middle of footer Bottom left
background: #CDF0FF; overflow: hidden; background: transparent no-repeat 0 -5px; background-image: url(${c:encodeURL('~./zul/img/wnd/panel-corner.png')}); height: 5px; margin-right: 5px; zoom: 1;
.z-panel-br
Bottom right
background: transparent no-repeat right bottom; background-image: url(${c:encodeURL('~./zul/img/wnd/panel-corner.png')}); position: relative; height: 5px; margin-right: -5px; font-size: 0; line-height:0; zoom: 1;
.z-panel-icon
The icon background
overflow: hidden; width: 16px; height: 16px; float: right; cursor: pointer; background-color : transparent; background-image : url(${c:encodeURL('~./zul/img/wnd/btn.gif')}); background-position : 0 0; background-repeat : no-repeat; margin-left: 2px; background-position: 0 -64px;
.z-panel-exp
The expand button The expand button when collapsed The close button
.z-panel-colpsd .z-panel-exp
background-position: 0 -96px;
.z-panel-close
Default
117
The minimize button The maximize button top toolbar border border background-position: 0 0;
.z-panel-min
.z-panel-max
.z-panel-cl .z-panel-top .z-toolbar .z-panel-body .z-panel-top .z-toolbar, .z-panel-body .z-panel-btm .z-toolbar
border-bottom:0 none; border-top:1px solid #B1CBD5;
border-color:-moz-use-text-color #B1CBD5 #B1CBD5; border-style:none solid solid; border-width:0 1px 1px; overflow:hidden; padding:2px; background:#DAF3FF url(/zkdemo/zkau/web/zul/img/common/bar-bg.png) repeat-x scroll 0 center; }
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ wnd/ css/ panel. css. dsp?view=markup
Popup
Component Reference: Popup Popupis made by 10 block.
Version History
Default
118
Default
This is the Default mold for Popup.
Source
Popup [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-popup V
CSS Specification
Default
119
Class Name .z-popup
Description Font and border Top left
Default Values position: absolute; top: 0; left: 0; visibility: hidden; z-index: 88000; border: 0 none; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal; margin:0; overflow:hidden; padding:0; background:transparent no-repeat scroll 0 top; background-image:url(${c:encodeURL('~./zul/img/popup/pp-corner.png')}); font-size:0; height:5px; line-height:0; margin-right:5px; zoom:1;
.z-popup .z-popup-tl
.z-popup .z-popup-tr
Top right
background:transparent no-repeat scroll right -10px; background-image:url(${c:encodeURL('~./zul/img/popup/pp-corner.png')}); font-size:0; height:5px; line-height:0; margin-right:-5px; position:relative; zoom:1;
.z-popup .z-popup-cm .z-popup .z-popup-cl .z-popup .z-popup-cr .z-popup .z-popup-bl
Center middle Center left
background: #EDF6FC repeat-x 0 0px; background-image: url(${c:encodeURL('~./zul/img/popup/pp-cm.png')}); padding:4px 10px; overflow: hidden; zoom: 1; background: transparent repeat-y 0 0; background-image: url(${c:encodeURL('~./zul/img/popup/pp-clr.png')}); padding-left: 6px; overflow: hidden; zoom: 1;
Center right
background: transparent repeat-y right; background-image: url(${c:encodeURL('~./zul/img/popup/pp-clr.png')}); padding-right: 6px; overflow: hidden; zoom: 1; background:transparent no-repeat scroll 0 -5px; background-image:url(${c:encodeURL('~./zul/img/popup/pp-corner.png')}); height:5px; margin-right:5px; zoom: 1;
Bottom left
.z-popup .z-popup-br
Bottom right background:transparent no-repeat scroll right -15px; background-image:url(${c:encodeURL('~./zul/img/popup/pp-corner.png')}); font-size:0; height:5px; line-height:0; margin-right:-5px; position:relative; zoom: 1;
.z-popup .z-popup-cnt
Color of text margin: 0 !important; line-height: 14px; color: #444; padding: 0; zoom: 1;
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ wgt/ css/ popup. css. dsp?view=markup
Portallayout
120
Portallayout
Component Reference: Portallayout Portallayout and Portalchildren..
Version History
Default
This is the Default mold for Portallayout.
Structure
Default
121
Events
CSS\Action Naming: Normal (Open) .z-portallayout, .z-portalchildren Supported: V Hover Click, Select, and Drag. Focus Focus and Hover Disable
CSS Specification
Class Name .z-portallayout .z-portallayout-inner .z-portalchildren .z-portalchildren-body .z-portalchildren-cnt Description Overflow Overflow Padding and margin Overflow Overflow Default Values visibility: hidden; overflow: hidden; zoom: 1; overflow: hidden; float: left; padding: 0; margin: 0; overflow: hidden; zoom: 1; overflow: hidden; zoom: 1; overflow: hidden;
Progressmeter
122
Progressmeter
Component Reference: Progressmeter Profressmeter is a component which shows status of a progress.
Version History
Default
This is the Default mold for Progressmeter.
Source
Progressmeter [1]
Structure
Events
CSS\Action Naming: Supported: Normal (Open) .z-progressmeter V Hover Click, Select, and Drag. Focus Focus and Hover Disable
CSS Specification
Default
123
Class Name div.z-progressmeter
Description Background image
Default Values 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 display:-moz-inline-box; display:inline-block; front background:#9CBFEE url(${c:encodeURL('~./zk/img/prgmeter.gif')}) repeat-x scroll left center; height: 17px; font-size:0;
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ wgt/ css/ progressmeter. css. dsp?view=markup
Radio
Component Reference: Radio Radio is composed of HTML Input element.
Version History
Default
This is the Default mold for Radio.
Source
Radio [1]
Structure
Default
124
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-radio V
CSS Specification
Class Name .z- radio -cnt Description Font size Default Values font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
Row
Component Reference: Row Rows and Row are used for Grid .
Version History
Default
125
Default
This is the Default mold for Row.
Source
Grid [1]
Structure
Events
Default
126
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: .z-rows, .z-row Supported: V
CSS Specification
Class Name div.z-row-cnt Description Font size Default Values border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal; color: black; padding: 2px; overflow: hidden; background: white; border-top: none; border-left: 1px solid white; border-right: 1px solid #CCC; border-bottom: 1px solid #DDD; background: #F0FAFF;
div.z-row-cnt td.z-row-inner tr.z-row td.z-row-inner
Color Padding Background color and border Background color of the odd row
tr.z-grid-odd td.z-row-inner, tr.z-grid-odd
Separator
Component Reference: Separator Separator separates two orientation: Vertical and Horizontal.
Version History
127
This is the Default (Horizontal) mold for Separator.
Source
Separator [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-separator-hor V
CSS Specification
128
Class Name .z-separator-hor, .z-separator-hor-bar
Description Height
Default Values 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;
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ wgt/ css/ separator. css. dsp?view=markup
Default (Vertical)
This is the Default (Vertical) mold for Separator.
Source
Separator [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-separator-hor V
CSS Specification
Default (Vertical)
129
Class Name .z-separator-ver, .z-separator-ver-bar
Description Width
Default Values 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
Component Reference: Slider Slider has three mold: default, sphere and scale.
Version History
This is the Default (Horizontal) mold for Slider.
Source
Slider [1]
Structure
130
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-slider-hor V
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-slider-hor-btn -over V V -drag V
CSS Specification
Class Name .z-slider-hor Description The scroll bar background Default Values background:transparent no-repeat scroll 0 top; background-image:url(${c:encodeURL('~./zul/img/slider/slider-bg.png')}); font-size:0; height:22px; line-height:0; margin-right:7px; zoom:1; background:transparent no-repeat scroll right -22px; background-image:url(${c:encodeURL('~./zul/img/slider/slider-bg.png')}); font-size:0; height:22px; line-height:0; margin-right:-7px; position:relative; zoom:1; .z-slider-hor-btn The scroll button width: 14px; height: 15px; position: absolute; left: 0; top: 3px; background background-color : transparent; background-image : url(${c: encodeURL('~./zul/img/slider/slider-square.png')}); background-repeat : no-repeat; background-position : 0 0;
.z-slider-hor-center The right scroll bar background
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ inp/ css/ slider. css. dsp?view=markup
Default (Vertical)
131
Default (Vertical)
This is the Default (Vertical) mold for Slider.
Source
Slider [1]
Structure
Events
Default (Vertical)
132
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-slider-ver V
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-slider-ver-btn -over V V -drag V
CSS Specification
Class Name .z-slider-ver Description The scroll bar background Default Values background:transparent no-repeat scroll left 0; background-image:url(${c:encodeURL('~./zul/img/slider/slider-bg-ver.png')}); font-size:0; width:22px; line-height:0; margin-bottom:7px; zoom:1; .z-slider-ver-center The background of bottom of scroll background:transparent no-repeat scroll -22px bottom; background-image:url(${c:encodeURL('~./zul/img/slider/slider-bg-ver.png')}); font-size:0; width:22px; line-height:0; margin-bottom:-7px; position:relative; zoom:1; .z-slider-ver-btn The scroll button width: 15px; height: 15px; position: absolute; left: 4px; bottom: 0; background-color : transparent; background-image : url(${c: encodeURL('~./zul/img/slider/slider-v-square.png')}); background-repeat : no-repeat; background-position : 0 0;
sphere (Horizontal)
133
sphere (Horizontal)
This is the sphere (Horizontal) mold for Slider.
Source
Slider [1]
Structure
Events
CSS\Action Naming: Supported: Normal (Open) .z-slider-sphere-hor V Hover Click, Select, and Drag. Focus Focus and Hover Disable
Normal (Open)
Hover Click, Select, and Drag. Focus Focus and Hover Disable -drag V
.z-slider-sphere-hor-btn -over V V
CSS Specification
sphere (Horizontal)
134
Class Name .z-slider-sphere-hor
Description The scroll bar
Default Values background:transparent no-repeat scroll 0 top; background-image:url(${c:encodeURL('~./zul/img/slider/slider-bg.png')}); font-size:0; height:22px; line-height:0; margin-right:7px; zoom:1;
.z-slider-sphere-hor-center The left of scroll bar
background:transparent no-repeat scroll right -22px; background-image:url(${c:encodeURL('~./zul/img/slider/slider-bg.png')}); font-size:0; height:22px; line-height:0; margin-right:-7px; position:relative; zoom:1;
.z-slider-sphere-hor-btn
The scroll button
width: 14px; height: 15px; position: absolute; left: 0; top: 3px; background-color : transparent; background-repeat : no-repeat; background-position : 0 0; background-image : url(${c: encodeURL('~./zul/img/slider/slider-circle.png')});
sphere (Vertical)
This is the sphere (Vertical) mold for Slider.
Source
Slider [1]
Structure
sphere (Vertical)
135
Events
CSS\Action Naming: Supported: Normal (Open) .z-slider-sphere-ver V Hover Click, Select, and Drag. Focus Focus and Hover Disable
Normal (Open)
.z-slider-sphere-ver-btn -over V V
CSS Specification
Class Name .z-slider-sphere-ver Description The scroll bar Default Values background:transparent no-repeat scroll left 0; background-image:url(${c:encodeURL('~./zul/img/slider/slider-bg-ver.png')}); font-size:0; width:22px; line-height:0; margin-bottom:7px; zoom:1; .z-slider-sphere-ver-center The bottom of scroll bar background:transparent no-repeat scroll -22px bottom; background-image:url(${c:encodeURL('~./zul/img/slider/slider-bg-ver.png')}); font-size:0; width:22px; line-height:0; margin-bottom:-7px; position:relative; zoom:1; .z-slider-sphere-ver-btn The scroll button width: 15px; height: 15px; position: absolute; left: 4px; bottom: 0; background-color : transparent; background-image : url(${c: encodeURL('~./zul/img/slider/slider-v-circle.png')}); background-repeat : no-repeat; background-position : 0 0;
scale
136
scale
This is the scale mold for Slider.
Source
Slider [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-slider-scale V
Normal (Open)
.z-slider-scale-btn -over V V
CSS Specification
scale
137
Class Name .z-slider-scale
Description
Default Values
The scroll bar background:transparent no-repeat scroll 0 top; background-image:url(${c:encodeURL('~./zul/img/slider/slider-bg.png')}); font-size:0; height:22px; line-height:0; margin-right:7px; zoom:1; background:transparent no-repeat scroll right -22px; background-image:url(${c:encodeURL('~./zul/img/slider/slider-bg.png')}); font-size:0; height:22px; line-height:0; margin-right:-7px; position:relative; zoom:1;
.z-slider-scale-center The left of scroll bar
.z-slider-scale-btn
The scroll button
width: 14px; height: 15px; position: absolute; left: 0; top: 3px; background-color : transparent; background-image : url(${c: encodeURL('~./zul/img/slider/slider-scale.gif')}); background-repeat : no-repeat; background-position : 0 0;
.z-slider-scale-tick
The tick of slider
background-image:url(${c: encodeURL('~./zul/img/slider/ticks.gif')}); padding-top:6px; width:214px;
Spinner
Component Reference: Spinner Spinner is composed of two parts, an input box and a button.
Version History
Default
138
Default
This is the Default mold for Spinner.
Source
Spinner [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-spinner V -over V -btn-clk V -focus V -btn-over V -disd !
CSS Specification
Class Name .z-spinner-inp Description Background of input element Background of invalidated Background of disabled and read only Background of the button image Default Values 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; background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870; background: #ECEAE4;
.z-spinner-text-invalid
.z-spinner-readonly, .z-spinner-text-disd
.z-spinner .z-spinner-btn
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
139
Splitter
Component Reference: Splitter Splitter has three status: splittable, collapsible, and collapsible with splittable.
Version History
Default (Vertical)
This is the Default (Vertical) mold for Splitter.
Source
Splitter [1]
Structure
Default (Vertical)
140
Events
CSS\Action Normal (Open) Naming: .z-splitter-ver Hover -btn-t:hover, -btn-b:hover, -btn-visi (IE Only) Supported: V ! Click, Select, and Drag. Focus Focus and Hover Disable
CSS Specification
Class Name .z-splitter-ver Description Background image of splittable Background image of non-splittable Background position of non-splittable Button icon of top side Default Values background-image:url(${c:encodeURL('~./zul/img/splt/splt-v.png')}); background-position: top center; font-size:0; max-height: 8px; height: 8px; 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; background-image: none; background-position: none;
.z-splitter-ver-outer .z-splitter-ver-outer-td .z-splitter-ver-ns
.z-splitter-ver-btn-t
width: 50px; min-height: 6px; height: 6px; background-image: url(${c:encodeURL('~./zul/img/splt/colps-t.png')});
Default (Vertical)
141
Button icon of bottom side width: 50px; min-height: 6px; height: 6px; background-image: url(${c:encodeURL('~./zul/img/splt/colps-b.png')});
.z-splitter-ver-btn-b
This is the Default (Horizontal) mold for Splitter.
Source
Splitter [1]
Structure
Events
142
CSS\Action Normal (Open) Naming: .z-splitter-hor
Hover -btn-l:hover, -btn-r:hover, -btn-visi (IE Only)
Click, Select, and Drag. Focus Focus and Hover Disable
Supported:
CSS Specification
Class Name .z-splitter-hor Description Default Values Background image of background-image:url(${c:encodeURL('~./zul/img/splt/splt-h.png')}); background-position: center left; splittable font-size:0; max-width: 8px; width: 8px;
.z-splitter-hor-outer Background image of background-image:url(${c:encodeURL('~./zul/img/splt/splt-h-ns.png')}); background-repeat: repeat-y; non-splittable 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 .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-l.png')}); width: 6px; min-height: 50px; height: 50px; background-image: url(${c:encodeURL('~./zul/img/splt/colps-r.png')});
Default (OS-Vertical)
143
This is the Default (OS-Vertical) mold for Splitter.
Source
Splitter [1]
Structure
144
Events
CSS\Action Naming: Normal (Open) .z-splitter-os-ver Hover -btn-t:hover, -btn-b:hover, -btn-visi (IE Only) Supported: V ! Click, Select, and Drag. Focus Focus and Hover Disable
CSS Specification
Class Name .z-splitter-os-ver .z-splitter-os-ver-outer .z-splitter-os-ver-outer-td Description Height Background image of splittable Styling of non-splittable Default Values font-size:0; max-height: 8px; height: 8px; 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
font-size:0; max-height: 8px; height: 8px;
.z-splitter-os-ver-btn-t
Button icon of top width: 50px; min-height: 8px; height: 8px; background-image: side url(${c:encodeURL('~./zul/img/splt/colps-t-os.gif')}); Button icon of bottom side width: 50px; min-height: 8px; height: 8px; background-image: url(${c:encodeURL('~./zul/img/splt/colps-b-os.gif')});
.z-splitter-os-ver-btn-b
Default (OS-Horizontal)
145
This is the efault (OS-Horizontal) mold for Splitter.
Source
Splitter [1]
Structure
Events
CSS\Action Naming: Normal (Open) .z-splitter-os-hor Hover -btn-l:hover, -btn-r:hover, -btn-visi (IE Only) Supported: V ! Click, Select, and Drag. Focus Focus and Hover Disable
146
CSS Specification
Class Name .z-splitter-os-hor Description Height Default Values font-size:0; max-width: 8px; width: 8px; background-image:url(${c:encodeURL('~./zul/img/splt/splt-h.gif')}); background-repeat: repeat-y; max-width: 8px; width: 8px; background-position: top right; font-size:0; max-width: 8px; width: 8px;
.z-splitter-os-hor-outer Background image of splittable .z-splitter-os-hor-ns Styling of non-splittable
.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 width: 8px; min-height: 50px; height: 50px; background-image: side url(${c:encodeURL('~./zul/img/splt/colps-r-os.gif')});
Tabbox
Component Reference: Tabbox Tabbox combines with a set of its children, including Tabs, Tab, Tabpanels, and Tabpanel.
Version History
147
This is the Default (Horizontal) mold for Tabbox.
Source
Tabbox [1]
Structure
Events
148
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-tabbox V
CSS Specification
Class Name .z-tabbox Description Overflow Default Values overflow: hidden; visibility: hidden;
Structure
149
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-tabs V
CSS\Action Naming:
Normal (Open)
.z-tabs-right-scroll, :hover .z-tabs-left-scroll
Supported:
CSS Specification
Class Name .z-tabs Description The tabs Default Values overflow: hidden; background: transparent none repeat scroll 0 0; border: 0; padding: 0; margin: 0; position: relative; background: #C7E3F3 repeat-x scroll 0 top; background-image: url(${c:encodeURL('~./zul/img/tab/tabs-bg.png')}); border-bottom: 1px solid #7EAAC6; padding-left: 5px; padding-top: 1px; list-style-image: none; list-style-position: outside; list-style-type: none; display: block; margin: 0; zoom: 1; margin-left: 18px; margin-right: 18px;
.z-tabs-cnt
The tabs' background
.z-tabs-header-scroll The space for scroll button .z-tabs-header .z-tabs-left-scroll
The whole tabs width: 100%; margin: 0px; position: relative; overflow: hidden; zoom: 1; Scroll left button left: 0; top: 0; width: 18px; height: 64px; background: transparent no-repeat scroll 0 -1px; background-image: url(${c:encodeURL('~./zul/img/tab/scroll-l.png')}); border-bottom: 1px solid #8DB2E3; cursor: pointer; position: absolute; z-index: 25; right: 0; top: 0; width: 18px; height: 64px; background: transparent no-repeat scroll -18px -1px; background-image: url(${c:encodeURL('~./zul/img/tab/scroll-r.png')}); border-bottom: 1px solid #8DB2E3; cursor: pointer; position: absolute; z-index: 25;
.z-tabs-right-scroll
Scroll right button
150
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-tab V :hover V -seld V -disd-seld ! -disd !
CSS Specification
151
Class Name .z-tab-hl
Description Left of tab
Default Values position: relative; padding-left: 10px; background: transparent no-repeat 0 -128px; background-image: url(${c:encodeURL('~./zul/img/tab/tab-corner.png')}); outline: none; cursor: pointer; background: transparent no-repeat scroll right -128px; background-image: url(${c:encodeURL('~./zul/img/tab/tab-corner.png')}); padding-right: 10px; display: block; padding-left: 2px; padding-right: 1px; overflow: hidden; cursor: pointer; background: transparent repeat-x scroll 0 -128px; background-image: url(${c:encodeURL('~./zul/img/tab/tab-hm.png')}); color: #416AA3; cursor: pointer; font-style: normal; font-family: ${fontFamilyT}; font-size: ${fontSizeM}; font-size-adjust: none; padding:4px 0 4px; white-space: nowrap; color: #0F3B82; cursor: default; font-weight: bold; font-style: normal; font-family: ${fontFamilyT}; font-size: ${fontSizeM}; white-space: nowrap; padding:4px 0 5px; padding-right: 10px;
.z-tab-hr
Right of tab
.z-tab-hm
Middle of tab
.z-tab .z-tab-text
Color and font of tab
.z-tab-seld .z-tab-text .z-tab-hm-close
Color and font of tab when it's choiced The space when tab is closable The close button background and size
z-tab-close
background-image: url(${c:encodeURL('~./zul/img/tab/tab-close.gif')}); background-repeat: no-repeat; cursor: pointer; display: block; width: 11px; height: 12px; position: absolute; right: 3px; top: 3px; z-index: 15; opacity: .8; filter: alpha(opacity=80); zoom: 1;
Structure
152
Events
CSS\Action Naming: Supported: Normal (Open) .z-tabpanels, .z-tabpanel V Hover Click, Select, and Drag. Focus Focus and Hover Disable
CSS Specification
Class Name .z-tabpanel .z-tabpanel-cnt Description The tabpanel The content of tabpanel Default Values padding: 5px; zoom: 1; height: 100%;
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ tab/ css/ tabbox. css. dsp?view=markup
Default (Vertical)
This is the Default (Vertical) mold for Tabbox.
Source
Tabbox [1]
Structure
Default (Vertical)
153
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-tabbox-ver V
Default (Vertical)
154
CSS Specification
Class Name .z-tabbox-ver Description Overflow Default Values overflow: hidden; visibility: hidden;
Structure
Default (Vertical)
155
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-tabs-ver V
CSS\Action Naming:
Normal (Open)
.z-tabs-ver-right-scroll, :hover .z-tabs-ver-left-scroll
Supported:
CSS Specification
Class Name .z-tabs-ver Description The vertical tabs background The border and background of tabs when scrolling is enabled The background of vertical tabs' header The background of vertical tabs' header when scrolling is enabled The visible part of tabs' content Default Values overflow: hidden; float:left; background: transparent none repeat scroll 0 0; border: 0; padding: 0; margin: 0; position: relative; background: #DEECFD none repeat scroll 0 0; border-top: 1px solid #7EAAC6; border-bottom: 1px solid #7EAAC6; border-left: 1px solid #7EAAC6;
.z-tabs-ver-scroll
.z-tabs-ver .z-tabs-ver-header .z-tabs-ver-scroll .z-tabs-ver-header
background: none; zoom: 1; overflow: hidden; position: relative;
background: #C7E3F3 repeat-y scroll 0 0; background-image: url(${c:encodeURL('~./zul/img/tab/tabs-v-bg.png')}); zoom: 1; overflow: hidden; position: relative;
.z-tabs-ver-cnt
padding-top: 2px; padding-left: 1px; list-style-image: none; list-style-position:outside; list-style-type: none; display: block; margin: 0; zoom: 1; height: 4096px; border-right: 1px solid #7EAAC6; -moz-user-select: none; background: transparent no-repeat scroll 0 -18px; background-image: url(${c:encodeURL('~./zul/img/tab/scroll-d.png')}); border-right: 1px solid #8DB2E3; cursor: pointer; height: 18px; position: absolute; right: 0; bottom: 0; z-index: 25; width: 100%; display: block; background: transparent no-repeat scroll 0 0; background-image: url(${c:encodeURL('~./zul/img/tab/scroll-u.png')}); border-right: 1px solid #7EAAC6; cursor: pointer; height: 18px; position: absolute; right: 0; top: 0; z-index: 25; width: 100%; display: block;
.z-tabs-ver-down-scroll
The scroll down button
.z-tabs-ver-up-scroll
The scroll up button
Default (Vertical)
156
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-tab-ver V :hover V -seld V -disd-seld ! -disd !
CSS Specification
Default (Vertical)
157
Class Name .z-tab-ver-hl
Description The left of tab
Default Values position: relative; padding-top:8px; outline: none; zoom: 1; background: transparent no-repeat scroll -512px 0; background-image: url(${c:encodeURL('~./zul/img/tab/tab-v-corner.png')}); cursor: pointer; padding-bottom: 10px; background: transparent no-repeat scroll -512px bottom; background-image: url(${c:encodeURL('~./zul/img/tab/tab-v-corner.png')}); overflow: hidden; cursor: pointer; padding-left: 5px; background: transparent repeat-y scroll -512px 0; background-image: url(${c:encodeURL('~./zul/img/tab/tab-v-hm.png')}); zoom: 1; 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; color: #0F3B82; cursor: default; font-weight: bold; white-space: nowrap;
.z-tab-ver-hl .z-tab-ver-hr .z-tab-ver .z-tab-ver-hm .z-tab-ver .z-tab-ver-text .z-tab-ver-seld .z-tab-ver-text
The right of tab
The middle of tab
Font and color of tab's text Font and color of tab's text when choiced The close button of tab
.z-tab-ver-close
right: 1px; top: 5px; width: 11px; height: 12px; cursor: pointer; position: absolute; background-image: url(${c:encodeURL('~./zul/img/tab/tab-close.gif')}); background-repeat: no-repeat; cursor: pointer; display: block; z-index: 15; zoom: 1; copacity: .8; filter: alpha(opacity=80);
Structure
Default (Vertical)
158
Events
CSS\Action Naming: Supported: Normal (Open) .z-tabpanels-ver, .z-tabpanel-ver V Hover Click, Select, and Drag. Focus Focus and Hover Disable
CSS Specification
Class Name .z-tabbox-ver .z-tabpanels-ver .z-tabbox-ver .z-tabpanel-ver Description The tabpanels border The tabpanel Default Values border-color: #7EAAC6; border-width: 1px; border-style: solid; border-left: none; padding: 5px; zoom: 1;
accordion
159
accordion
This is the accordion mold for Tabbox.
Source
Tabbox [1]
Structure
Events
CSS\Action Naming: Normal (Open) .z-tabbox-accordion, .z-tabpanels-accordion, .z-tabpanel-accordion-outer Supported: V Hover Click, Select, and Drag. Focus Focus and Hover Disable
accordion
160
CSS Specification
Class Name .z-tabbox-accordion .z-tabpanel-accordion-outer Description Overflow Position Default Values overflow: hidden; visibility: hidden; position: relative;
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-tab-accordion V -seld ! -disd-seld ! -disd !
CSS\Action Naming: Supported: Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
.z-tab-accordion-close :hover V V
accordion
161
CSS Specification
Class Name Description Default Values cursor: pointer; position: relative; zoom: 1; .z-tab-accordion-header The cursor type .z-tab-accordion-tl Top left background
background: transparent no-repeat 0 top; background-image: url(${c:encodeURL('~./zul/img/tab/accd-corner.png')}); zoom: 1; height: 5px; margin-right: 5px; font-size: 0; line-height: 0;
.z-tab-accordion-tr
Top right background
position: relative; background: transparent no-repeat right -5px; background-image: url(${c:encodeURL('~./zul/img/tab/accd-corner.png')}); height: 5px; margin-right: -5px; font-size: 0; line-height: 0; zoom: 1
.z-tab-accordion-hl
Left background Right background Middle background The header's text of tab
background: transparent no-repeat scroll 0 0; background-image: url(${c:encodeURL('~./zul/img/tab/accd-hl.png')}); padding-left: 6px; zoom: 1; background: transparent no-repeat scroll right 0; background-image: url(${c:encodeURL('~./zul/img/tab/accd-hr.png')}); padding-right: 6px; zoom: 1; background: transparent repeat-x scroll 0 0; background-image: url(${c:encodeURL('~./zul/img/tab/accd-hm.png')}); overflow: hidden; padding: 3px 0 5px; zoom: 1; 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; padding-bottom: 2px; background-repeat: no-repeat; background-image: url(${c:encodeURL('~./zul/img/common/close-off.gif')}); cursor: pointer; width: 17px; height: 16px; position: absolute; right: 10px; top: 5px; z-index: 15; opacity: .6; filter: alpha(opacity=60);
.z-tab-accordion-hr
.z-tab-accordion-hm
.z-tab-accordion-text
.z-tab-accordion-close
The close button of tab
accordion-lite
162
accordion-lite
This is the accordion-lite mold for Tabbox.
Source
Tabbox [1]
Structure
Events
CSS\Action Naming: Normal (Open) .z-tabbox-accordion-lite, .z-tabpanels-accordion-lite, .z-tabpanel-accordion-lite-outer Supported: V Hover Click, Select, and Drag. Focus Focus and Hover Disable
CSS Specification
accordion-lite
163
Class Name .z-tabbox-accordion-lite .z-tabpanels-accordion-lite
Description Default Values Overflow Border overflow: hidden; visibility: hidden; border-top: 1px solid #99BBE8; border-right: 1px solid #99BBE8; border-left: 1px solid #99BBE8; position: relative; position: relative; border-bottom:1px solid #99BBE8; padding:5px; zoom: 1
.z-tabpanel-accordion-lite-outer .z-tabbox-accordion-lite .z-tabpanel-accordion-lite
Position Border
Structure
Events
CSS\Action Naming: Supported: Normal (Open) .z-tab-accordion-lite V Hover Click, Select, and Drag. Focus Focus and Hover Disable -seld ! -disd-seld ! -disd !
CSS\Action Naming: Supported: Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable
.z-tab-accordion-lite-close :hover V V
accordion-lite
164
CSS Specification
Class Name Description Default Values overflow:hidden; zoom:1; cursor:pointer; position:relative; border: 1px solid #99BBE8; border-top-width:0; border-right-width:0; border-left-width:0; 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; 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; padding-right:6px; display:block; background:transparent url(${c:encodeURL('~./zul/img/tab2/accdlite-all.png')}) repeat-x scroll 0 -9px; 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; 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; .z-tab-accordion-lite-header Position
.z-tab-accordion-lite-text
Font size
.z-tab-accordion-lite-tl
Top left background
.z-tab-accordion-lite-tr
Top right background Top middle background Background of close icon
.z-tab-accordion-lite-tm
.z-tab-accordion-lite-close
Tablelayout
Component Reference: Tablelayout Tablelayout and Tablechildren are composed of HTML Table.
Version History
Default
165
Default
This is the Default mold for Tablelayout.
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: .z-tablelayout, .z-tablechildren Supported: V
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS background-position }
CSS Specification
Class Name td.z-tablechildren Description Align Default Values vertical-align: top;
Textbox
166
Textbox
Component Reference: Textbox Textbox is composed of HTML Input element.
Version History
Default
This is the Default mold for Textbox.
Source
Textbox [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-textbox V -focus ! -disd !
CSS Specification
Default
167
Class Name .z-textbox
Default Values background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border: 1px solid #86A4BE; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal; background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870; background: #ECEAE4;
.z-textbox-text-invalid
.z-textbox-readonly, .z-textbox-text-disd
Timebox
Component Reference: Timebox Timebox is composed of two parts, an input box and a button.
Version History
Default
This is the Default mold for Timebox.
Source
Timebox [1]
Structure
Default
168
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-timebox V -over V -btn-clk V -focus V -btn-over V -disd !
CSS Specification
Class Name .z-timebox-inp Description Background of input element Background of invalidated Background of disabled and read only Background of the button image Default Values background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border: 1px solid #86A4BE; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal; background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px solid #DD7870; background: #ECEAE4;
.z-timebox-text-invalid
.z-timebox-readonly, .z-timebox-text-disd
.z-timebox .z-timebox-btn
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 #86A4BE;
Toolbar
Component Reference: Toolbar Toolbar is a kind of special container, and it is used to combine with Toolbarbutton.
Version History
Default
169
Default
This is the Default mold for Toolbar.
Source
Toolbar [1]
Structure
Default
170
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-toolbar V
CSS Specification
Class Name .z-toolbar Description Background image Default Values border-color: #B1CBD5; border-style: solid; border-width: 0 0 1px 0; display: block; padding: 2px; background: #DAF3FF repeat-x 0 center; background-image: url(${c:encodeURL('~./zul/img/common/bar-bg.png')}); position: relative; zoom: 1; font-size: ${fontSizeS};
.z-toolbar-body, .z-toolbar-body span .z-toolbar a, .z-toolbar a:visited, .z-toolbar a:hover .z-toolbar-start .z-toolbar-center
Font size
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;
Align to start Align to center Align to end
float: left; clear: none; margin: 0 auto;
.z-toolbar-end
float: right; clear: none;
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ wgt/ css/ toolbar. css. dsp?view=markup
Panel
171
Panel
This is the Panel mold for Toolbar.
Source
Toolbar [1]
Structure
Panel
172
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-toolbar V
CSS Specification
Class Name .z-toolbar Description Background image Default Values border-color: #B1CBD5; border-style: solid; border-width: 0 0 1px 0; display: block; padding: 2px; background: #DAF3FF repeat-x 0 center; background-image: url(${c:encodeURL('~./zul/img/common/bar-bg.png')}); position: relative; zoom: 1; font-size: ${fontSizeS};
.z-toolbar-body, .z-toolbar-body span .z-toolbar a, .z-toolbar a:visited, .z-toolbar a:hover .z-toolbar-start .z-toolbar-center
Font size
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;
Align to start Align to center Align to end
float: left; clear: none; margin: 0 auto;
.z-toolbar-end
float: right; clear: none;
Toolbarbutton
173
Toolbarbutton
Component Reference: Toolbarbutton Toolbarbutton is composed of HTML Div tag.
Version History
Version 5.0 January 2010 Date Change to use HTML Div. Content
Default
This is the Default mold for Toolbarbutton.
Source
Toolbarbutton [1]
Structure
Default
174
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-toolbarbutton -over V V -disd !
CSS Specification
Class Name Description Default Values padding: 2px 2px; position: relative; zoom: 1; font-family: ${fontFamilyT}; font-size: ${fontSizeS}; font-weight: normal; .z-toolbarbutton-cnt Font size
Tree
Component Reference: Tree Tree combines with a set of its children, including Treechildren , Treecols , Treecol , Treerow , Treeitem , Treecell , Treefoot , Treefooter , and Paging . Tree also supports four ways to show its icon: z-tree, z-dottree, z-filetree, and z-vfiletree.
Version History
Default
175
Default
This is the Default mold for Tree.
Source
Tree [3]
Structure
Default
176
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-tree V
CSS Specification
Class Name div.z-tree Description Background color Default Values background: #DAE7F6; border: 1px solid #7F9DB9; overflow: hidden; zoom: 1; border: 0; overflow: hidden; width: 100%;
div.z-tree-header, div.z-tree-header tr, div.z-tree-footer div.z-tree-body
Border
Background color of the body Background color of the footer
background: white; border: 0; overflow: auto; width: 100%; position: relative; background: #DAE7F6; border-top: 1px solid #9EB6CE;
div.z-tree-footer
paging
This is the paging mold for Tree.
Source
Tree [3]
Structure
paging
177
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-tree V
CSS Specification
Class Name div.z- tree -pgi-b div.z-tree-pgi-t Description Border of bottom paging Border of top paging Default Values border-top: 1px solid #AAB; overflow: hidden; border-bottom: 1px solid #AAB; overflow: hidden;
Treechildren
178
Treechildren
Component Reference: Treechildren Treechildren is used for Tree.
Version History
Default
This is the Default mold for Treechildren.
Source
Treechildren [3]
Structure
Default
179
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-treechildren V
CSS Specification
None.
Treecol
Component Reference: Treecol Treecols and Treecol are used for Tree.
Version History
Default
180
Default
This is the Default mold for Treecol.
Source
Treecol [3]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: .z-treecols, .z-treecol Supported: V
CSS Specification
Default
181
Class Name div.z-tree-header tr.z-treecols
Description Background image
Default Values background-image: url(${c:encodeURL('~./zul/img/grid/column-bg.png')});
div.z-tree-header th.z-treecol 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-treecol-cnt
font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
Treefooter
Component Reference: 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.
Version History
Default
This is the Default mold for Treefooter.
Source
Treefooter [3]
Structure
Default
182
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: .z-treefoot, .z-treefooter Supported: V
CSS Specification
Class Name div.z-tree-footer td.z-treefooter div.z-treefooter-cnt Description Font size Default Values cursor: pointer; padding: 0 2px; font-size: ${fontSizeM}; font-weight: normal; overflow: hidden; border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
Treerow
183
Treerow
Component Reference: Treerow Treerow, Treeitem, and Treecell are used for Tree . Treeitem is not a concrete in client side.
Version History
Default
This is the Default mold for Treerow
Source
Treerow [1]
Structure
Default
184
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: ! ! ! ! ! !
CSS Specification
Class Name tr.z-tree-row, tr.z-tree-row a, tr.z-tree-row a:visited tr.z-tree-row td.z-tree-row-focus Description Font size of treerow Default Values font-size: ${fontSizeM}; font-weight: normal; color: black; text-decoration: none; background-image: url(${c:encodeURL('~./zul/img/focusd.png')}); background-repeat: no-repeat; background: #bcd2ef; border: 1px solid #6f97d2;
Background of focused event Background of selected event Background of hovered event Background of hovered and selected event Font size of treecell
tr.z-tree-row-seld
tr.z-tree-row-over
background: #dae7f6;
tr.z-tree-row-over-seld
background: #6eadff;
div.z-tree-body td.z-tree-cell
cursor: pointer; padding: 0 2px; font-size: ${fontSizeM}; font-weight: normal; overflow: hidden; border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
div.z-tree-cell-cnt
Font size of the content of treecell
Default
185
Size of tree icon width: 18px; min-height: 18px; height: 100%; display:-moz-inline-box; vertical-align:top; display:inline-block; background-image: url(${c:encodeURL('~./zul/img/tree/tree_btn.gif')});
span.z-tree-ico, span.z-tree-line, span.checkmark-spacer 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
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ sel/ css/ tree. css. dsp?view=markup
Vlayout
Component Reference: Vlayout Vlayout is composed of HTML Div tag.
Version History
Default
186
Default
This is the Default mold for Vlayout.
Source
Vlayout [1]
Structure
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: z-vlayout V
Default
187
CSS Specification
Class Name .z-vlayout .z-vlayout-inner Description Overflow Position Default Values hidden position: relative;
Window
Component Reference: Window Window is made by 10 block, the background and text can be customized by users. Window can also combine with Caption as its title.
Version History
Default (embedded)
This is the Default (embedded) mold for Window.
Source
Window [1]
Structure
Default (embedded)
188
Events
CSS\Action Naming: Supported: Normal (Open) .z-window-embedded V Hover Click, Select, and Drag. Focus Focus and Hover Disable
CSS\Action Naming: Normal (Open) .z-window-embedded-close .z-window-embedded-max .z-window-embedded-maxd .z-window-embedded-mid Supported: V V Hover Click, Select, and Drag. Focus Focus and Hover Disable -over
Default (embedded)
189
CSS Specification
Class Name .z-window-embedded-tl Description Top Left Default Values background: transparent no-repeat 0 top; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-corner.png')}); margin-right: 5px; height: 5px; font-size: 0; line-height: 0; zoom: 1; .z-window-embedded-tr Top Right background: transparent no-repeat right -10px; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-corner.png')}); position: relative; height: 5px; margin-right: -5px; font-size: 0; line-height:0; zoom: 1; overflow: hidden; zoom: 1; color: #222222; padding-bottom: 4px; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
.z-window-embedded-header
The color and font size of the header The left background of header The right background of header The middle background of header
.z-window-embedded-hl
background: transparent no-repeat 0 0; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-hl.png')}); padding-left: 6px; zoom: 1;
.z-window-embedded-hr
background: transparent no-repeat right 0; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-hr.png')}); padding-right: 6px; zoom: 1;
.z-window-embedded-hm
background: transparent repeat-x 0 0; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-hm.png')}); overflow: hidden; zoom: 1;
.z-window-embedded-cnt
The content of the margin: 0; padding: 3px; border: 1px solid #538BA2; window
.z-window-embedded-cnt-noborder The content of the border: 0;overflow: hidden;zoom: 1; window without border .z-window-embedded-icon The background image of the tool background: transparent no-repeat 0 0; background-image : url(${c:encodeURL('~./zul/img/wnd/ebd-btn.gif')}); height: 16px; width: 16px; overflow: hidden; float: right; cursor: pointer; margin-left: 2px; .z-window-embedded-min The minimize button The maximize button The close button background-position: 0 0;
.z-window-embedded-max
.z-window-embedded-close
Example
Default (embedded)
190
1. <style> .z-window-embedded-tl,.z-window-embedded-tr,.z-window-embedded-hl,.z-window-embedded-hr, .z-window-embedded-hm { background-image:none; background-color:#94D3D3; } .z-window-embedded-cnt { border:1px solid #7BADAD; } </style> 2. <style> .z-window-embedded-tl, .z-window-embedded-tr, .z-window-embedded-hl, .z-window-embedded-hr, .z-window-embedded-hm { background-image:none; background-color:#B2A4F2; } .z-window-embedded-cnt { border:1px solid #8E83C1; } </style> 3. <style> .z-window-embedded-tl, .z-window-embedded-tr, .z-window-embedded-hl, .z-window-embedded-hr, .z-window-embedded-hm { background-image:none; background-color:#545E6B; } .z-window-embedded-cnt { border:1px solid #30363D; } .z-window-embedded-header { color:white; font-weight:bold; } </style>
References
[1] http:/ / zk1. svn. sourceforge. net/ viewvc/ zk1/ releases/ 5. 0. 4/ zul/ src/ archive/ web/ js/ zul/ wnd/ css/ window. css. dsp?view=markup
Default (popup)
191
Default (popup)
This is the Default (popup) mold for Window.
Source
Window [1]
Structure
Default (popup)
192
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported: .z-window-pop V
CSS\Action Naming: Normal (Open) .z-window-pop-close .z-window-pop-max .z-window-pop-maxd .z-window-pop-min Supported: V V Hover Click, Select, and Drag. Focus Focus and Hover Disable -over
CSS Specification
Class Name .z-window-popup-tl Description Top Left Default Values background: transparent no-repeat 0 top; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-pop-corner.png')}); margin-right: 5px; height: 5px; font-size: 0; line-height: 0; zoom: 1; .z-window-popup-tr Top Right background: transparent no-repeat right -10px; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-pop-corner.png')}); position: relative; height: 5px; margin-right: -5px; font-size: 0; line-height:0; zoom: 1; .z-window-popup-header The color and font size of the header The left background of header overflow: hidden; zoom: 1; color: #FFFFFF; padding-bottom: 4px; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal; background: transparent no-repeat 0 0; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-pop-hl.png')}); padding-left: 6px; zoom: 1;
.z-window-popup-hl
.z-window-popup-hr
The right background background: transparent no-repeat right 0; background-image: of header url(${c:encodeURL('~./zul/img/wnd/wnd-pop-hr.png')}); padding-right: 6px; zoom: 1; The middle background: transparent repeat-x 0 0; background-image: background of header url(${c:encodeURL('~./zul/img/wnd/wnd-pop-hm.png')}); overflow: hidden; zoom: 1; The content of the window margin: 0; padding: 2px; background: white; overflow: hidden; zoom: 1; border: 1px solid #2c70a9; border: 0; overflow: hidden; zoom: 1; margin: 0; padding: 1px; background: white;
.z-window-popup-hm
.z-window-popup-cnt
.z-window-popup-cnt-noborder The content of the window without border .z-window-popup-icon The background image of the tool
background: transparent no-repeat 0 0; background-image : url(${c:encodeURL('~./zul/img/wnd/pop-btn.gif')}); height: 16px; width: 16px; overflow: hidden; float: right; cursor: pointer; margin-left: 2px;
.z-window-popup-min .z-window-popup-max
The minimize button The maximize button
background-position: 0 0; background-position: 0 -16px;
Default (popup)
193
The close button background-position: 0 -48px;
.z-window-popup-close
Default (overlapped, highlighted, and modal)

This is the Default (overlapped, highlighted, and modal) mold for Window.
Source
Window [1]
Structure
194
Events
CSS\Action Naming: Normal (Open) .z-window-overlapped, .z-window-modal, .z-window-highlight Supported: V Hover Click, Select, and Drag. Focus Focus and Hover Disable
CSS\Action Naming: Normal (Open) .z-window-*-close .z-window-*-max .z-window-*-maxd .z-window-*-mid Supported: V V Hover Click, Select, and Drag. Focus Focus and Hover Disable -over
CSS Specification
Class Name .z-window-overlapped-tl Description Top Left Default Values background: transparent no-repeat 0 top; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-ol-corner.png')}); margin-right: 5px; height: 5px; font-size: 0; line-height: 0; zoom: 1; .z-window-overlapped-tr Top Right background: transparent no-repeat right -10px; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-ol-corner.png')}); position: relative; height: 5px; margin-right: -5px; font-size: 0; line-height:0; zoom: 1; .z-window-overlapped-header The color and font size of the header The left background of header The right background of header The middle background of header The content of the window overflow: hidden; zoom: 1; color: #222222; padding-bottom: 4px; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal; background: transparent no-repeat 0 0; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-ol-hl.png')}); padding-left: 6px; zoom: 1;
.z-window-overlapped-hl
.z-window-overlapped-hr
background: transparent no-repeat right 0; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-ol-hr.png')}); padding-right: 6px; zoom: 1;
.z-window-overlapped-hm
background: transparent repeat-x 0 0; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-ol-hm.png')}); overflow: hidden; zoom: 1;
.z-window-overlapped-cnt
margin: 0; padding: 4px; background: white; overflow: hidden; zoom: 1;
.z-window-overlapped-cnt-noborder The content of the window without border
margin: 0; padding: 2px; background: white; border: 0; overflow: hidden; zoom: 1;
195
background: transparent repeat-y 0 0; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-ol-clr.png')}); padding-left: 6px; zoom: 1; background: transparent repeat-y right 0; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-ol-clr.png')}); padding-right: 6px; zoom: 1; padding: 0; margin: 0; border: 1px solid #0B5CA0; background: #5EABDB; background: transparent no-repeat 0 -5px; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-ol-corner.png')}); height: 5px; margin-right: 5px; zoom: 1; background: transparent no-repeat right bottom; background-image: url(${c:encodeURL('~./zul/img/wnd/wnd-ol-corner.png')}); position: relative; height: 5px; margin-right: -5px; font-size: 0; line-height:0; zoom: 1;
.z-window-overlapped-cl
Center left
.z-window-overlapped-cr
Center right
.z-window-overlapped-cm .z-window-overlapped-bl
Center middle Bottom left
.z-window-overlapped-br
Bottom right
.z-window-overlapped-icon
The background image of the tool
background: transparent no-repeat 0 0; background-image : url(${c:encodeURL('~./zul/img/wnd/ol-btn.gif')}); height: 16px; width: 16px; overflow: hidden; float: right; cursor: pointer; margin-left: 2px;
.z-window-overlapped-min
The minimize button The maximize button The close button
background-position: 0 0;
.z-window-overlapped-max
.z-window-overlapped-close
Loading
196
Loading
This is the Default mold for Loading.
Source
Loading [1]
Structure
Loading
Processing
Events
CSS\Action Normal (Open) Hover Click, Select, and Drag. Focus Focus and Hover Disable Naming: Supported:
Loading
197
CSS Specification
Class Name .z-loading Description Background and border Default Values background-color: #6eadff; cursor: wait; white-space: nowrap; padding:3px; border: 1px solid #83B5F7; background-color: #FFFFFF; color: #102B6D; border:1px solid #83B5F7; white-space: nowrap; padding:6px; background: transparent no-repeat center; background-image: url(${c:encodeURL('~./zk/img/progress2.gif')}); height: 16px; width: 16px; font-size: ${fontSizeM}; font-weight: normal; font-family: ${fontFamilyT};
.z-loading-indicator Inner part and text
.z-loading-icon
The loading icon
.z-loading
Example
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?> <zk> <style> .z-loading { background-color:#808080; border:1px outset #A0A0A0; font-weight: bold; padding:2px; } .z-loading-indicator { color: gray; border:0 none; } .z-loading-icon { background-image:
Loading url(${c:encodeURL('~./zk/img/progress3.gif')}); } </style> </zk>
198
Test Method
Loading
<zk> <button label="showBusy"> <attribute name="onClick"><![CDATA[ Clients.showBusy("some message..."); ]]></attribute> </button> </zk>
Processing
<zk> <button label="Test Progress" onClick="org.zkoss.lang.Threads.sleep(10000)"/> </zk>
Article Sources and Contributors
199

ZK Style Guide Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide Contributors: Alicelin, Southerncrossie, Sphota, Tmillsclare, Tomyeh Introduction Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/Introduction Contributors: Alicelin, Elton776, Tomyeh ZK Class Concept Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Concept Contributors: Alicelin, Elton776, Jumperchen, Tmillsclare, Tomyeh Sclass Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Concept/Sclass Contributors: Elton776, Tomyeh Zclass Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Concept/Zclass Contributors: Alicelin, Elton776, Tmillsclare, Tomyeh Overwriting Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Concept/Overwriting Contributors: Elton776 ZK Class Naming Rule Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Naming_Rule Contributors: Tmillsclare By DOM Structure Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Naming_Rule/By_DOM_Structure Contributors: Elton776, Tmillsclare Layout Elements Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Naming_Rule/By_DOM_Structure/Layout_Elements Contributors: Elton776 Other Elements Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Naming_Rule/By_DOM_Structure/Other_Elements Contributors: Elton776 Tool Icons Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Naming_Rule/By_DOM_Structure/Tool_Icons Contributors: Elton776 By DOM Position Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Naming_Rule/By_DOM_Position Contributors: Alicelin, Elton776, Tmillsclare Regions Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Naming_Rule/By_DOM_Position/Regions Contributors: Elton776 Parts (3 x 3 grid) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Naming_Rule/By_DOM_Position/Parts_%283_x_3_grid%29 Contributors: Elton776 Parts: (10 block, 13 block is used for Panel only) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Naming_Rule/By_DOM_Position/Parts:_%2810_block%2C_13_block_is_used_for_Panel_only%29 Contributors: Alicelin, Elton776 Compass Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Naming_Rule/By_DOM_Position/Compass Contributors: Elton776 By Event Effect Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Naming_Rule/By_Event_Effect Contributors: Elton776, Tmillsclare Basic Concepts Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Naming_Rule/By_Event_Effect/Basic_Concepts Contributors: Elton776 Priority Order Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/ZK_Class_Naming_Rule/By_Event_Effect/Priority_Order Contributors: Elton776 Action Image Index Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/Action_Image_Index Contributors: Elton776, Tmillsclare Example Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/Action_Image_Index/Example Contributors: Elton776 XUL Component Specification Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification Contributors: Tmillsclare A Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/A Contributors: Jumperchen Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/A/Default Contributors: Jumperchen Auxhead Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Auxhead Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Auxhead/Default Contributors: Elton776, Jimmyshiau, Tmillsclare Bandbox Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Bandbox Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Bandbox/Default Contributors: Elton776, SimonPai Bandpopup Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Bandpopup Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Bandpopup/Default Contributors: Elton776, SimonPai Borderlayout Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Borderlayout Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Borderlayout/Default Contributors: Elton776, Jimmyshiau, Jumperchen Default (North) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Borderlayout/Default_%28North%29 Contributors: Elton776, Jumperchen Default (South) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Borderlayout/Default_%28South%29 Contributors: Elton776, Jumperchen Default (West) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Borderlayout/Default_%28West%29 Contributors: Elton776, Jumperchen Default (East) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Borderlayout/Default_%28East%29 Contributors: Elton776, Jumperchen Default (Center) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Borderlayout/Default_%28Center%29 Contributors: Elton776, Jumperchen Box Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Box Contributors: Alicelin, Elton776 Default (Vbox) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Box/Default_%28Vbox%29 Contributors: Elton776, Jumperchen Button Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Button Contributors: Elton776, Tmillsclare Default (os) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Button/Default_%28os%29 Contributors: Elton776, Jumperchen, Tmillsclare trendy Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Button/trendy Contributors: Elton776, Jumperchen, Tmillsclare Calendar Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Calendar Contributors: Alicelin, Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Calendar/Default Contributors: Elton776, Jumperchen Caption Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Caption Contributors: Alicelin, Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Caption/Default Contributors: Elton776, Jumperchen Default (legend) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Caption/Default_%28legend%29 Contributors: Elton776, Jumperchen Cell Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Cell Contributors: Jumperchen, Tmillsclare

Default (Row) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Cell/Default_%28Row%29 Contributors: Elton776, Jumperchen Checkbox Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Checkbox Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Checkbox/Default Contributors: Elton776, Jumperchen Colorbox Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Colorbox Contributors: Alicelin, Jumperchen Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Colorbox/Default Contributors: Elton776, Jumperchen Column Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Column Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Column/Default Contributors: Elton776, Jumperchen Columnlayout Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Columnlayout Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Columnlayout/Default Contributors: Elton776, Jumperchen Combobox Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Combobox Contributors: Alicelin, Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Combobox/Default Contributors: Elton776, Jumperchen Combobutton Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Combobutton Contributors: Benbai Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Combobutton/Default Contributors: Benbai, Tmillsclare, Tomyeh Comboitem Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Comboitem Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Comboitem/Default Contributors: Elton776, Jumperchen Datebox Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Datebox Contributors: Alicelin, Elton776, Jumperchen Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Datebox/Default Contributors: Elton776, Jumperchen Decimalbox Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Decimalbox Contributors: Alicelin, Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Decimalbox/Default Contributors: Elton776, Jumperchen Detail Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Detail Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Detail/Default Contributors: Elton776, Jumperchen Doublebox Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Doublebox Contributors: Alicelin, Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Doublebox/Default Contributors: Elton776, Jumperchen Doublespinner Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Doublespinner Contributors: Jumperchen Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Doublespinner/Default Contributors: Jumperchen Fisheyebar Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Fisheyebar Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Fisheyebar/Default Contributors: Elton776, Jumperchen Footer Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Footer Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Footer/Default Contributors: Elton776, Jumperchen Frozen Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Frozen Contributors: Jumperchen, SimonPai Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Frozen/Default Contributors: Jumperchen Grid Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Grid Contributors: Alicelin, Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Grid/Default Contributors: Elton776, Jumperchen paging Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Grid/paging Contributors: Elton776, Jumperchen Group Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Group Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Group/Default Contributors: Elton776, Jumperchen Groupbox Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Groupbox Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Groupbox/Default Contributors: Benbai, Elton776, Jumperchen, Tmillsclare 3d Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Groupbox/3d Contributors: Benbai, Elton776, Jumperchen Groupfoot Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Groupfoot Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Groupfoot/Default Contributors: Elton776, Jumperchen Hbox Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Hbox Contributors: Alicelin, Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Hbox/Default Contributors: Elton776, Jumperchen Hlayout Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Hlayout Contributors: Jumperchen Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Hlayout/Default Contributors: Jumperchen Intbox Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Intbox Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Intbox/Default Contributors: Elton776, Jimmyshiau Label Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Label Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Label/Default Contributors: Elton776, Jimmyshiau Listbox Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Listbox Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Listbox/Default Contributors: Elton776, Jimmyshiau
200

paging Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Listbox/paging Contributors: Elton776, Jimmyshiau select Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Listbox/select Contributors: Elton776, Jimmyshiau Listfooter Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Listfooter Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Listfooter/Default Contributors: Elton776, Jimmyshiau Listgroup Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Listgroup Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Listgroup/Default Contributors: Elton776, Jimmyshiau, Jumperchen Listgroupfoot Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Listgroupfoot Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Listgroupfoot/Default Contributors: Elton776, Jimmyshiau, Jumperchen Listheader Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Listheader Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Listheader/Default Contributors: Elton776, Jimmyshiau, Tmillsclare Listitem Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Listitem Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Listitem/Default Contributors: Elton776, Jimmyshiau Longbox Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Longbox Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Longbox/Default Contributors: Elton776, Jumperchen Menubar Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Menubar Contributors: Alicelin, Elton776 Default (Horizontal) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Menubar/Default_%28Horizontal%29 Contributors: Elton776, Jumperchen Default (Vertical) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Menubar/Default_%28Vertical%29 Contributors: Elton776, Jumperchen Menu in Menubar Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Menubar/Menu_in_Menubar Contributors: Elton776, Jumperchen Menuitem in Menubar Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Menubar/Menuitem_in_Menubar Contributors: Elton776, Jumperchen Menupopup Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Menupopup Contributors: Alicelin, Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Menupopup/Default Contributors: Elton776, Jumperchen Menu in Menupopup Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Menupopup/Menu_in_Menupopup Contributors: Elton776, Jumperchen Menuitem in Menupopup Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Menupopup/Menuitem_in_Menupopup Contributors: Elton776, Jumperchen Menuseparator Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Menuseparator Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Menuseparator/Default Contributors: Elton776, Jumperchen Paging Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Paging Contributors: Alicelin, Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Paging/Default Contributors: Elton776, Jimmyshiau os Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Paging/os Contributors: Elton776, Jimmyshiau Panel Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Panel Contributors: Alicelin, Elton776, Tmillsclare Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Panel/Default Contributors: Elton776, Jimmyshiau Popup Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Popup Contributors: Elton776, Jumperchen Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Popup/Default Contributors: Elton776, Jimmyshiau Portallayout Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Portallayout Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Portallayout/Default Contributors: Elton776, Jimmyshiau Progressmeter Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Progressmeter Contributors: Alicelin, Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Progressmeter/Default Contributors: Elton776, SimonPai, Tmillsclare Radio Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Radio Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Radio/Default Contributors: Elton776, SimonPai Row Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Row Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Row/Default Contributors: Elton776, SimonPai Separator Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Separator Contributors: Alicelin, Elton776 Default (Horizontal) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Separator/Default_%28Horizontal%29 Contributors: Elton776, SimonPai Default (Vertical) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Separator/Default_%28Vertical%29 Contributors: Elton776, SimonPai Slider Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Slider Contributors: Alicelin, Elton776 Default (Horizontal) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Slider/Default_%28Horizontal%29 Contributors: Elton776, SimonPai Default (Vertical) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Slider/Default_%28Vertical%29 Contributors: Elton776, SimonPai sphere (Horizontal) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Slider/sphere_%28Horizontal%29 Contributors: Elton776, SimonPai sphere (Vertical) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Slider/sphere_%28Vertical%29 Contributors: Elton776, SimonPai scale Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Slider/scale Contributors: Elton776, SimonPai Spinner Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Spinner Contributors: Elton776
201

Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Spinner/Default Contributors: Elton776, SimonPai Splitter Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Splitter Contributors: Elton776 Default (Vertical) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Splitter/Default_%28Vertical%29 Contributors: Elton776, SimonPai Default (Horizontal) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Splitter/Default_%28Horizontal%29 Contributors: Elton776, SimonPai Default (OS-Vertical) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Splitter/Default_%28OS-Vertical%29 Contributors: Elton776, SimonPai Default (OS-Horizontal) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Splitter/Default_%28OS-Horizontal%29 Contributors: Elton776, SimonPai Tabbox Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Tabbox Contributors: Alicelin, Elton776 Default (Horizontal) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Tabbox/Default_%28Horizontal%29 Contributors: Elton776, SimonPai Default (Vertical) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Tabbox/Default_%28Vertical%29 Contributors: Elton776, SimonPai accordion Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Tabbox/accordion Contributors: Elton776, SimonPai accordion-lite Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Tabbox/accordion-lite Contributors: Alicelin, Elton776, SimonPai Tablelayout Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Tablelayout Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Tablelayout/Default Contributors: Elton776, Jumperchen Textbox Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Textbox Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Textbox/Default Contributors: Elton776, Jumperchen Timebox Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Timebox Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Timebox/Default Contributors: Elton776, Jumperchen Toolbar Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Toolbar Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Toolbar/Default Contributors: Elton776, Jumperchen Panel Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Toolbar/Panel Contributors: Elton776, Jumperchen Toolbarbutton Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Toolbarbutton Contributors: Elton776, Jumperchen Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Toolbarbutton/Default Contributors: Elton776, Jumperchen Tree Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Tree Contributors: Alicelin, Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Tree/Default Contributors: Elton776, Jumperchen paging Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Tree/paging Contributors: Elton776, Jumperchen Treechildren Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Treechildren Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Treechildren/Default Contributors: Elton776, Jumperchen Treecol Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Treecol Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Treecol/Default Contributors: Elton776, Jumperchen Treefooter Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Treefooter Contributors: Elton776 Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Treefooter/Default Contributors: Elton776, Jumperchen Treerow Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Treerow Contributors: Tmillsclare Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Treerow/Default Contributors: Tmillsclare Vlayout Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Vlayout Contributors: Char, Jumperchen Default Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Vlayout/Default Contributors: Jumperchen Window Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Window Contributors: Elton776, Jumperchen Default (embedded) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Window/Default_%28embedded%29 Contributors: Elton776, Jumperchen, Tmillsclare Default (popup) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Window/Default_%28popup%29 Contributors: Elton776, Jumperchen Default (overlapped, highlighted, and modal) Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/XUL_Component_Specification/Window/Default_%28overlapped%2C_highlighted%2C_and_modal%29 Contributors: Elton776, Jumperchen Loading Source: http://new.zkoss.org/index.php?title=ZK_Style_Guide/Miscellaneous/Loading Contributors: Tmillsclare
202
Image Sources, Licenses and Contributors
203

File:concepts4.jpg Source: http://new.zkoss.org/index.php?title=File:Concepts4.jpg License: unknown Contributors: Tmillsclare Image:Concepts2.png Source: http://new.zkoss.org/index.php?title=File:Concepts2.png License: unknown Contributors: Elton776 Image:Concepts3.png Source: http://new.zkoss.org/index.php?title=File:Concepts3.png License: unknown Contributors: Elton776 Image:Zk-css-dom.PNG Source: http://new.zkoss.org/index.php?title=File:Zk-css-dom.PNG License: unknown Contributors: Elton776 Image:Action-indexing.png Source: http://new.zkoss.org/index.php?title=File:Action-indexing.png License: unknown Contributors: Elton776 Image:Action-indexing2.png Source: http://new.zkoss.org/index.php?title=File:Action-indexing2.png License: unknown Contributors: Elton776 Image:A1.PNG Source: http://new.zkoss.org/index.php?title=File:A1.PNG License: unknown Contributors: Jumperchen File:Auxhead-one.png Source: http://new.zkoss.org/index.php?title=File:Auxhead-one.png License: unknown Contributors: Tmillsclare File:Auxhead-two.png Source: http://new.zkoss.org/index.php?title=File:Auxhead-two.png License: unknown Contributors: Tmillsclare Image:Auxhead-demo.png Source: http://new.zkoss.org/index.php?title=File:Auxhead-demo.png License: unknown Contributors: Elton776 Image:Bandboxone.png Source: http://new.zkoss.org/index.php?title=File:Bandboxone.png License: unknown Contributors: Elton776 Image:Bandboxtwo.png Source: http://new.zkoss.org/index.php?title=File:Bandboxtwo.png License: unknown Contributors: Elton776 Image:Bandboxfirstt.png Source: http://new.zkoss.org/index.php?title=File:Bandboxfirstt.png License: unknown Contributors: Elton776 Image:Bandpopupone.png Source: http://new.zkoss.org/index.php?title=File:Bandpopupone.png License: unknown Contributors: Elton776 Image:Borderlayout1.jpg Source: http://new.zkoss.org/index.php?title=File:Borderlayout1.jpg License: unknown Contributors: Elton776 Image:Borderlayout2.jpg Source: http://new.zkoss.org/index.php?title=File:Borderlayout2.jpg License: unknown Contributors: Elton776, Jimmyshiau Image:Borderlayout-demo.png Source: http://new.zkoss.org/index.php?title=File:Borderlayout-demo.png License: unknown Contributors: Elton776 Image:North1.jpg Source: http://new.zkoss.org/index.php?title=File:North1.jpg License: unknown Contributors: Elton776 Image:North2.jpg Source: http://new.zkoss.org/index.php?title=File:North2.jpg License: unknown Contributors: Elton776 Image:South1.jpg Source: http://new.zkoss.org/index.php?title=File:South1.jpg License: unknown Contributors: Elton776 Image:South2.jpg Source: http://new.zkoss.org/index.php?title=File:South2.jpg License: unknown Contributors: Elton776 Image:West1.jpg Source: http://new.zkoss.org/index.php?title=File:West1.jpg License: unknown Contributors: Elton776 Image:West2.jpg Source: http://new.zkoss.org/index.php?title=File:West2.jpg License: unknown Contributors: Elton776 Image:East1.jpg Source: http://new.zkoss.org/index.php?title=File:East1.jpg License: unknown Contributors: Elton776 Image:East2.jpg Source: http://new.zkoss.org/index.php?title=File:East2.jpg License: unknown Contributors: Elton776 Image:Center1.jpg Source: http://new.zkoss.org/index.php?title=File:Center1.jpg License: unknown Contributors: Elton776 Image:Center2.jpg Source: http://new.zkoss.org/index.php?title=File:Center2.jpg License: unknown Contributors: Elton776 Image:Box1.png Source: http://new.zkoss.org/index.php?title=File:Box1.png License: unknown Contributors: Elton776 Image:Box2.png Source: http://new.zkoss.org/index.php?title=File:Box2.png License: unknown Contributors: Elton776 Image:Button-os.png Source: http://new.zkoss.org/index.php?title=File:Button-os.png License: unknown Contributors: Elton776 Image:Button2.png Source: http://new.zkoss.org/index.php?title=File:Button2.png License: unknown Contributors: Elton776 Image:Button1.png Source: http://new.zkoss.org/index.php?title=File:Button1.png License: unknown Contributors: Elton776 Image:Button3.png Source: http://new.zkoss.org/index.php?title=File:Button3.png License: unknown Contributors: Elton776 Image:Button4.png Source: http://new.zkoss.org/index.php?title=File:Button4.png License: unknown Contributors: Elton776 Image:Calendar1.PNG Source: http://new.zkoss.org/index.php?title=File:Calendar1.PNG License: unknown Contributors: Elton776, Jumperchen Image:Calendar2.PNG Source: http://new.zkoss.org/index.php?title=File:Calendar2.PNG License: unknown Contributors: Elton776, Jumperchen Image:Calendar3.PNG Source: http://new.zkoss.org/index.php?title=File:Calendar3.PNG License: unknown Contributors: Elton776, Jumperchen Image:Calendar4.PNG Source: http://new.zkoss.org/index.php?title=File:Calendar4.PNG License: unknown Contributors: Elton776, Jumperchen Image:Caption2.jpg Source: http://new.zkoss.org/index.php?title=File:Caption2.jpg License: unknown Contributors: Elton776 Image:Caption3.png Source: http://new.zkoss.org/index.php?title=File:Caption3.png License: unknown Contributors: Elton776 Image:Groupboxone.png Source: http://new.zkoss.org/index.php?title=File:Groupboxone.png License: unknown Contributors: Elton776 Image:Captionone.png Source: http://new.zkoss.org/index.php?title=File:Captionone.png License: unknown Contributors: Elton776 Image:Cell1.PNG Source: http://new.zkoss.org/index.php?title=File:Cell1.PNG License: unknown Contributors: Elton776, Jumperchen Image:Cell2.PNG Source: http://new.zkoss.org/index.php?title=File:Cell2.PNG License: unknown Contributors: Jumperchen Image:Checkbox1.jpg Source: http://new.zkoss.org/index.php?title=File:Checkbox1.jpg License: unknown Contributors: Elton776 Image:Checkbox2.png Source: http://new.zkoss.org/index.php?title=File:Checkbox2.png License: unknown Contributors: Elton776 Image:Colorbox1.PNG Source: http://new.zkoss.org/index.php?title=File:Colorbox1.PNG License: unknown Contributors: Elton776, Jumperchen Image:Colorbox2.PNG Source: http://new.zkoss.org/index.php?title=File:Colorbox2.PNG License: unknown Contributors: Elton776, Jumperchen Image:Colorbox3.PNG Source: http://new.zkoss.org/index.php?title=File:Colorbox3.PNG License: unknown Contributors: Elton776, Jumperchen Image:Colorbox4.PNG Source: http://new.zkoss.org/index.php?title=File:Colorbox4.PNG License: unknown Contributors: Elton776, Jumperchen Image:Grid1.jpg Source: http://new.zkoss.org/index.php?title=File:Grid1.jpg License: unknown Contributors: Elton776 Image:Column1.jpg Source: http://new.zkoss.org/index.php?title=File:Column1.jpg License: unknown Contributors: Elton776 Image:Columnlayout1.jpg Source: http://new.zkoss.org/index.php?title=File:Columnlayout1.jpg License: unknown Contributors: Elton776 Image:Columnlayout2.jpg Source: http://new.zkoss.org/index.php?title=File:Columnlayout2.jpg License: unknown Contributors: Elton776, Jumperchen Image:Combobox1.png Source: http://new.zkoss.org/index.php?title=File:Combobox1.png License: unknown Contributors: Elton776 Image:Combobox2.png Source: http://new.zkoss.org/index.php?title=File:Combobox2.png License: unknown Contributors: Elton776 Image:Comboitemone.png Source: http://new.zkoss.org/index.php?title=File:Comboitemone.png License: unknown Contributors: Elton776 Image:Comboitemtwo.png Source: http://new.zkoss.org/index.php?title=File:Comboitemtwo.png License: unknown Contributors: Elton776 Image:Datebox1.png Source: http://new.zkoss.org/index.php?title=File:Datebox1.png License: unknown Contributors: Elton776 Image:Datebox2.jpg Source: http://new.zkoss.org/index.php?title=File:Datebox2.jpg License: unknown Contributors: Elton776, Jumperchen Image:Decimalbox1.jpg Source: http://new.zkoss.org/index.php?title=File:Decimalbox1.jpg License: unknown Contributors: Elton776 Image:Detail1.jpg Source: http://new.zkoss.org/index.php?title=File:Detail1.jpg License: unknown Contributors: Elton776 Image:Detail2.jpg Source: http://new.zkoss.org/index.php?title=File:Detail2.jpg License: unknown Contributors: Elton776 Image:Doublebox1.jpg Source: http://new.zkoss.org/index.php?title=File:Doublebox1.jpg License: unknown Contributors: Elton776 Image:Doublespinner1.png Source: http://new.zkoss.org/index.php?title=File:Doublespinner1.png License: unknown Contributors: Jumperchen Image:Doublespinner2.png Source: http://new.zkoss.org/index.php?title=File:Doublespinner2.png License: unknown Contributors: Jumperchen Image:Fisheyebar1.jpg Source: http://new.zkoss.org/index.php?title=File:Fisheyebar1.jpg License: unknown Contributors: Elton776 Image:Fisheyebar2.jpg Source: http://new.zkoss.org/index.php?title=File:Fisheyebar2.jpg License: unknown Contributors: Elton776

Image:Footer1.jpg Source: http://new.zkoss.org/index.php?title=File:Footer1.jpg License: unknown Contributors: Elton776 Image:FrozenGrid1.PNG Source: http://new.zkoss.org/index.php?title=File:FrozenGrid1.PNG License: unknown Contributors: Jumperchen Image:FrozenGrid2.PNG Source: http://new.zkoss.org/index.php?title=File:FrozenGrid2.PNG License: unknown Contributors: Jumperchen Image:Grid2.jpg Source: http://new.zkoss.org/index.php?title=File:Grid2.jpg License: unknown Contributors: Elton776 Image:Grid-pg1.jpg Source: http://new.zkoss.org/index.php?title=File:Grid-pg1.jpg License: unknown Contributors: Elton776 Image:Grid-pg2.jpg Source: http://new.zkoss.org/index.php?title=File:Grid-pg2.jpg License: unknown Contributors: Elton776 Image:Group1.jpg Source: http://new.zkoss.org/index.php?title=File:Group1.jpg License: unknown Contributors: Elton776 Image:Groupbox-final.png Source: http://new.zkoss.org/index.php?title=File:Groupbox-final.png License: unknown Contributors: Tmillsclare Image:Groupbox-3d1.jpg Source: http://new.zkoss.org/index.php?title=File:Groupbox-3d1.jpg License: unknown Contributors: Elton776 Image:Groupbox-3d2.jpg Source: http://new.zkoss.org/index.php?title=File:Groupbox-3d2.jpg License: unknown Contributors: Elton776 Image:Groupfoot1.jpg Source: http://new.zkoss.org/index.php?title=File:Groupfoot1.jpg License: unknown Contributors: Elton776, Jumperchen Image:Hboxone.png Source: http://new.zkoss.org/index.php?title=File:Hboxone.png License: unknown Contributors: Elton776 Image:Hboxtwo.png Source: http://new.zkoss.org/index.php?title=File:Hboxtwo.png License: unknown Contributors: Elton776 Image:Hlayout1.PNG Source: http://new.zkoss.org/index.php?title=File:Hlayout1.PNG License: unknown Contributors: Jumperchen Image:Hlayout2.PNG Source: http://new.zkoss.org/index.php?title=File:Hlayout2.PNG License: unknown Contributors: Jumperchen Image:Intbox1.jpg Source: http://new.zkoss.org/index.php?title=File:Intbox1.jpg License: unknown Contributors: Elton776 Image:Label1.jpg Source: http://new.zkoss.org/index.php?title=File:Label1.jpg License: unknown Contributors: Elton776 Image:Listbox1.jpg Source: http://new.zkoss.org/index.php?title=File:Listbox1.jpg License: unknown Contributors: Elton776 Image:Listbox2.jpg Source: http://new.zkoss.org/index.php?title=File:Listbox2.jpg License: unknown Contributors: Elton776 Image:Listbox-pg1.jpg Source: http://new.zkoss.org/index.php?title=File:Listbox-pg1.jpg License: unknown Contributors: Elton776 Image:Listbox-pg2.jpg Source: http://new.zkoss.org/index.php?title=File:Listbox-pg2.jpg License: unknown Contributors: Elton776 Image:Listbox-select1.jpg Source: http://new.zkoss.org/index.php?title=File:Listbox-select1.jpg License: unknown Contributors: Elton776 Image:Listbox-select2.jpg Source: http://new.zkoss.org/index.php?title=File:Listbox-select2.jpg License: unknown Contributors: Elton776 Image:Listfooter1.jpg Source: http://new.zkoss.org/index.php?title=File:Listfooter1.jpg License: unknown Contributors: Elton776, Jimmyshiau, Jumperchen Image:Listgroup1.jpg Source: http://new.zkoss.org/index.php?title=File:Listgroup1.jpg License: unknown Contributors: Elton776, Jumperchen Image:Listgroupfoot1.jpg Source: http://new.zkoss.org/index.php?title=File:Listgroupfoot1.jpg License: unknown Contributors: Elton776, Jimmyshiau Image:Listheader1.jpg Source: http://new.zkoss.org/index.php?title=File:Listheader1.jpg License: unknown Contributors: Elton776, Jimmyshiau Image:Listitem1.jpg Source: http://new.zkoss.org/index.php?title=File:Listitem1.jpg License: unknown Contributors: Elton776, Jimmyshiau Image:Longbox1.jpg Source: http://new.zkoss.org/index.php?title=File:Longbox1.jpg License: unknown Contributors: Elton776 Image:Menubar-hoz1.jpg Source: http://new.zkoss.org/index.php?title=File:Menubar-hoz1.jpg License: unknown Contributors: Elton776 Image:Menubar-hoz2.jpg Source: http://new.zkoss.org/index.php?title=File:Menubar-hoz2.jpg License: unknown Contributors: Elton776 Image: Menubar-ver1.jpg Source: http://new.zkoss.org/index.php?title=File:Menubar-ver1.jpg License: unknown Contributors: Elton776 Image:Menubar-ver2.jpg Source: http://new.zkoss.org/index.php?title=File:Menubar-ver2.jpg License: unknown Contributors: Elton776 Image:Menu-in-menubar1.jpg Source: http://new.zkoss.org/index.php?title=File:Menu-in-menubar1.jpg License: unknown Contributors: Elton776 Image:Menu-in-menubar2.jpg Source: http://new.zkoss.org/index.php?title=File:Menu-in-menubar2.jpg License: unknown Contributors: Elton776 Image:Menu-in-menubar3.jpg Source: http://new.zkoss.org/index.php?title=File:Menu-in-menubar3.jpg License: unknown Contributors: Elton776 Image:Menu-in-menubar4.jpg Source: http://new.zkoss.org/index.php?title=File:Menu-in-menubar4.jpg License: unknown Contributors: Elton776 Image:Menuitem-in-menubar1.jpg Source: http://new.zkoss.org/index.php?title=File:Menuitem-in-menubar1.jpg License: unknown Contributors: Elton776 Image:Menuitem-in-menubar2.jpg Source: http://new.zkoss.org/index.php?title=File:Menuitem-in-menubar2.jpg License: unknown Contributors: Elton776 Image:Menuitem-in-menubar3.jpg Source: http://new.zkoss.org/index.php?title=File:Menuitem-in-menubar3.jpg License: unknown Contributors: Elton776 Image:Menuitem-in-menubar4.jpg Source: http://new.zkoss.org/index.php?title=File:Menuitem-in-menubar4.jpg License: unknown Contributors: Elton776 Image:Menupopup1.jpg Source: http://new.zkoss.org/index.php?title=File:Menupopup1.jpg License: unknown Contributors: Elton776 Image:Menupopup2.jpg Source: http://new.zkoss.org/index.php?title=File:Menupopup2.jpg License: unknown Contributors: Elton776 Image:Menu-in-menupopup1.jpg Source: http://new.zkoss.org/index.php?title=File:Menu-in-menupopup1.jpg License: unknown Contributors: Elton776 Image:Menuitem-in-menupopup1.jpg Source: http://new.zkoss.org/index.php?title=File:Menuitem-in-menupopup1.jpg License: unknown Contributors: Elton776 Image:Menuseparatorinmenupopupone.jpg Source: http://new.zkoss.org/index.php?title=File:Menuseparatorinmenupopupone.jpg License: unknown Contributors: Elton776 Image:Pagingone.jpg Source: http://new.zkoss.org/index.php?title=File:Pagingone.jpg License: unknown Contributors: Elton776 Image:Paging2.jpg Source: http://new.zkoss.org/index.php?title=File:Paging2.jpg License: unknown Contributors: Elton776 Image:Pagingosone.jpg Source: http://new.zkoss.org/index.php?title=File:Pagingosone.jpg License: unknown Contributors: Elton776 Image:Pagingostwo.jpg Source: http://new.zkoss.org/index.php?title=File:Pagingostwo.jpg License: unknown Contributors: Elton776 Image:Panelone.jpg Source: http://new.zkoss.org/index.php?title=File:Panelone.jpg License: unknown Contributors: Elton776 Image:Panelthree.jpg Source: http://new.zkoss.org/index.php?title=File:Panelthree.jpg License: unknown Contributors: Elton776 Image:Paneltwo.jpg Source: http://new.zkoss.org/index.php?title=File:Paneltwo.jpg License: unknown Contributors: Elton776 Image:Panelfour.jpg Source: http://new.zkoss.org/index.php?title=File:Panelfour.jpg License: unknown Contributors: Elton776 Image:Popupone.jpg Source: http://new.zkoss.org/index.php?title=File:Popupone.jpg License: unknown Contributors: Elton776 Image:Popuptwo.jpg Source: http://new.zkoss.org/index.php?title=File:Popuptwo.jpg License: unknown Contributors: Elton776 Image:Portallayoutone.jpg Source: http://new.zkoss.org/index.php?title=File:Portallayoutone.jpg License: unknown Contributors: Elton776 Image:Portallayouttwo.jpg Source: http://new.zkoss.org/index.php?title=File:Portallayouttwo.jpg License: unknown Contributors: Elton776 Image:Progressmeterone.jpg Source: http://new.zkoss.org/index.php?title=File:Progressmeterone.jpg License: unknown Contributors: Elton776 Image:Progressmetertwo.jpg Source: http://new.zkoss.org/index.php?title=File:Progressmetertwo.jpg License: unknown Contributors: Elton776 Image:Radioone.jpg Source: http://new.zkoss.org/index.php?title=File:Radioone.jpg License: unknown Contributors: Elton776 Image:Radiotwo.jpg Source: http://new.zkoss.org/index.php?title=File:Radiotwo.jpg License: unknown Contributors: Elton776 Image:Rowone.jpg Source: http://new.zkoss.org/index.php?title=File:Rowone.jpg License: unknown Contributors: Elton776 Image:Separatorhora.jpg Source: http://new.zkoss.org/index.php?title=File:Separatorhora.jpg License: unknown Contributors: Elton776 Image:Separatorhorb.jpg Source: http://new.zkoss.org/index.php?title=File:Separatorhorb.jpg License: unknown Contributors: Elton776 Image:Separatorhorc.jpg Source: http://new.zkoss.org/index.php?title=File:Separatorhorc.jpg License: unknown Contributors: Elton776 Image:Separator-ver1.jpg Source: http://new.zkoss.org/index.php?title=File:Separator-ver1.jpg License: unknown Contributors: Elton776 Image:Separator-ver2.jpg Source: http://new.zkoss.org/index.php?title=File:Separator-ver2.jpg License: unknown Contributors: Elton776 Image:Separator-ver3.jpg Source: http://new.zkoss.org/index.php?title=File:Separator-ver3.jpg License: unknown Contributors: Elton776 Image:Slider-hor1.jpg Source: http://new.zkoss.org/index.php?title=File:Slider-hor1.jpg License: unknown Contributors: Elton776 Image:Slider-hor2.jpg Source: http://new.zkoss.org/index.php?title=File:Slider-hor2.jpg License: unknown Contributors: Elton776
204

Image:Slider-ver1.jpg Source: http://new.zkoss.org/index.php?title=File:Slider-ver1.jpg License: unknown Contributors: Elton776 Image:Slider-ver2.jpg Source: http://new.zkoss.org/index.php?title=File:Slider-ver2.jpg License: unknown Contributors: Elton776 Image:Slider-sphere-hor1.jpg Source: http://new.zkoss.org/index.php?title=File:Slider-sphere-hor1.jpg License: unknown Contributors: Elton776 Image:Slider-sphere-hor2.jpg Source: http://new.zkoss.org/index.php?title=File:Slider-sphere-hor2.jpg License: unknown Contributors: Elton776 Image:Slider-sphere-ver1.jpg Source: http://new.zkoss.org/index.php?title=File:Slider-sphere-ver1.jpg License: unknown Contributors: Elton776 Image:Slider-sphere-ver2.jpg Source: http://new.zkoss.org/index.php?title=File:Slider-sphere-ver2.jpg License: unknown Contributors: Elton776 Image:Slider-scale-hor1.jpg Source: http://new.zkoss.org/index.php?title=File:Slider-scale-hor1.jpg License: unknown Contributors: Elton776 Image:Slider-scale-hor2.jpg Source: http://new.zkoss.org/index.php?title=File:Slider-scale-hor2.jpg License: unknown Contributors: Elton776 Image:Spinner1.png Source: http://new.zkoss.org/index.php?title=File:Spinner1.png License: unknown Contributors: Elton776 Image:Spinner2.png Source: http://new.zkoss.org/index.php?title=File:Spinner2.png License: unknown Contributors: Elton776 Image:Splitter-ver1.png Source: http://new.zkoss.org/index.php?title=File:Splitter-ver1.png License: unknown Contributors: Elton776 Image:Splitter-ver2.png Source: http://new.zkoss.org/index.php?title=File:Splitter-ver2.png License: unknown Contributors: Elton776 Image:Splitter-ver3.png Source: http://new.zkoss.org/index.php?title=File:Splitter-ver3.png License: unknown Contributors: Elton776 Image:Splitter-ver4.png Source: http://new.zkoss.org/index.php?title=File:Splitter-ver4.png License: unknown Contributors: Elton776 Image:Splitter-hor1.jpg Source: http://new.zkoss.org/index.php?title=File:Splitter-hor1.jpg License: unknown Contributors: Elton776 Image:Splitter-hor2.jpg Source: http://new.zkoss.org/index.php?title=File:Splitter-hor2.jpg License: unknown Contributors: Elton776 Image:Splitter-hor3.jpg Source: http://new.zkoss.org/index.php?title=File:Splitter-hor3.jpg License: unknown Contributors: Elton776 Image:Splitter-hor4.jpg Source: http://new.zkoss.org/index.php?title=File:Splitter-hor4.jpg License: unknown Contributors: Elton776 Image:Splitter-os-ver1.png Source: http://new.zkoss.org/index.php?title=File:Splitter-os-ver1.png License: unknown Contributors: Elton776 Image:Splitter-os-ver2.jpg Source: http://new.zkoss.org/index.php?title=File:Splitter-os-ver2.jpg License: unknown Contributors: Elton776 Image:Splitter-os-ver3.jpg Source: http://new.zkoss.org/index.php?title=File:Splitter-os-ver3.jpg License: unknown Contributors: Elton776 Image:Splitter-os-ver4.jpg Source: http://new.zkoss.org/index.php?title=File:Splitter-os-ver4.jpg License: unknown Contributors: Elton776 Image:Splitter-os-hor1.jpg Source: http://new.zkoss.org/index.php?title=File:Splitter-os-hor1.jpg License: unknown Contributors: Elton776 Image:Splitter-os-hor2.jpg Source: http://new.zkoss.org/index.php?title=File:Splitter-os-hor2.jpg License: unknown Contributors: Elton776 Image:Splitter-os-hor3.jpg Source: http://new.zkoss.org/index.php?title=File:Splitter-os-hor3.jpg License: unknown Contributors: Elton776 Image:Splitter-os-hor4.jpg Source: http://new.zkoss.org/index.php?title=File:Splitter-os-hor4.jpg License: unknown Contributors: Elton776 Image:Tabbox-hor1.jpg Source: http://new.zkoss.org/index.php?title=File:Tabbox-hor1.jpg License: unknown Contributors: Elton776 Image:Tabbox-hoz2.jpg Source: http://new.zkoss.org/index.php?title=File:Tabbox-hoz2.jpg License: unknown Contributors: Elton776 Image:Tabs-hor1.jpg Source: http://new.zkoss.org/index.php?title=File:Tabs-hor1.jpg License: unknown Contributors: Elton776 Image:Tab-hor1.jpg Source: http://new.zkoss.org/index.php?title=File:Tab-hor1.jpg License: unknown Contributors: Elton776 Image:Tabpanels-hor1.jpg Source: http://new.zkoss.org/index.php?title=File:Tabpanels-hor1.jpg License: unknown Contributors: Elton776 Image:Tabbox-ver1.jpg Source: http://new.zkoss.org/index.php?title=File:Tabbox-ver1.jpg License: unknown Contributors: Elton776 Image:Tabbox-ver2.jpg Source: http://new.zkoss.org/index.php?title=File:Tabbox-ver2.jpg License: unknown Contributors: Elton776 Image:Tabs-ver1.jpg Source: http://new.zkoss.org/index.php?title=File:Tabs-ver1.jpg License: unknown Contributors: Elton776 Image:Tab-ver1.jpg Source: http://new.zkoss.org/index.php?title=File:Tab-ver1.jpg License: unknown Contributors: Elton776 Image:Tabpanels-ver1.jpg Source: http://new.zkoss.org/index.php?title=File:Tabpanels-ver1.jpg License: unknown Contributors: Elton776 Image:Tabbox-accordion1.jpg Source: http://new.zkoss.org/index.php?title=File:Tabbox-accordion1.jpg License: unknown Contributors: Elton776 Image:Tabbox-accordion2.jpg Source: http://new.zkoss.org/index.php?title=File:Tabbox-accordion2.jpg License: unknown Contributors: Elton776 Image:Tab-accordion1.jpg Source: http://new.zkoss.org/index.php?title=File:Tab-accordion1.jpg License: unknown Contributors: Elton776 Image:Tabbox-accordion-lite1.jpg Source: http://new.zkoss.org/index.php?title=File:Tabbox-accordion-lite1.jpg License: unknown Contributors: Elton776 Image:Tabbox-accordion-lite2.jpg Source: http://new.zkoss.org/index.php?title=File:Tabbox-accordion-lite2.jpg License: unknown Contributors: Elton776 Image:Tab-accordion-lite1.jpg Source: http://new.zkoss.org/index.php?title=File:Tab-accordion-lite1.jpg License: unknown Contributors: Elton776 Image:Tablelayout1.jpg Source: http://new.zkoss.org/index.php?title=File:Tablelayout1.jpg License: unknown Contributors: Elton776 Image:Tablelayout2.jpg Source: http://new.zkoss.org/index.php?title=File:Tablelayout2.jpg License: unknown Contributors: Elton776, Jumperchen Image:Textbox1.jpg Source: http://new.zkoss.org/index.php?title=File:Textbox1.jpg License: unknown Contributors: Elton776 Image:Timebox1.png Source: http://new.zkoss.org/index.php?title=File:Timebox1.png License: unknown Contributors: Elton776 Image:Timebox2.png Source: http://new.zkoss.org/index.php?title=File:Timebox2.png License: unknown Contributors: Elton776 Image:Toolbar1.jpg Source: http://new.zkoss.org/index.php?title=File:Toolbar1.jpg License: unknown Contributors: Elton776 Image:Toolbar2.jpg Source: http://new.zkoss.org/index.php?title=File:Toolbar2.jpg License: unknown Contributors: Elton776 Image:Toolbar3.jpg Source: http://new.zkoss.org/index.php?title=File:Toolbar3.jpg License: unknown Contributors: Elton776 Image:Toolbar4.jpg Source: http://new.zkoss.org/index.php?title=File:Toolbar4.jpg License: unknown Contributors: Elton776 Image:Toolbar-panel1.jpg Source: http://new.zkoss.org/index.php?title=File:Toolbar-panel1.jpg License: unknown Contributors: Elton776 Image:Toolbarbutton1.jpg Source: http://new.zkoss.org/index.php?title=File:Toolbarbutton1.jpg License: unknown Contributors: Elton776, Jumperchen Image:Toolbarbutton2.jpg Source: http://new.zkoss.org/index.php?title=File:Toolbarbutton2.jpg License: unknown Contributors: Elton776, Jumperchen Image:Tree3.jpg Source: http://new.zkoss.org/index.php?title=File:Tree3.jpg License: unknown Contributors: Elton776 Image:Tree2.jpg Source: http://new.zkoss.org/index.php?title=File:Tree2.jpg License: unknown Contributors: Elton776 Image:Tree-pg1.jpg Source: http://new.zkoss.org/index.php?title=File:Tree-pg1.jpg License: unknown Contributors: Elton776 Image:Tree-pg2.jpg Source: http://new.zkoss.org/index.php?title=File:Tree-pg2.jpg License: unknown Contributors: Elton776 Image:Tree1.jpg Source: http://new.zkoss.org/index.php?title=File:Tree1.jpg License: unknown Contributors: Tmillsclare Image:Treechildren1.jpg Source: http://new.zkoss.org/index.php?title=File:Treechildren1.jpg License: unknown Contributors: Elton776, Jumperchen Image:Treecol1.jpg Source: http://new.zkoss.org/index.php?title=File:Treecol1.jpg License: unknown Contributors: Elton776, Jumperchen Image:Treefooter1.jpg Source: http://new.zkoss.org/index.php?title=File:Treefooter1.jpg License: unknown Contributors: Elton776, Jumperchen Image:Treerow1.jpg Source: http://new.zkoss.org/index.php?title=File:Treerow1.jpg License: unknown Contributors: Jumperchen, Tmillsclare Image:Treerow2.jpg Source: http://new.zkoss.org/index.php?title=File:Treerow2.jpg License: unknown Contributors: Tmillsclare Image:Vlayout1.PNG Source: http://new.zkoss.org/index.php?title=File:Vlayout1.PNG License: unknown Contributors: Jumperchen Image:Vlayout2.PNG Source: http://new.zkoss.org/index.php?title=File:Vlayout2.PNG License: unknown Contributors: Jumperchen Image:Window-embedded1.jpg Source: http://new.zkoss.org/index.php?title=File:Window-embedded1.jpg License: unknown Contributors: Elton776 Image:Window-embedded2.jpg Source: http://new.zkoss.org/index.php?title=File:Window-embedded2.jpg License: unknown Contributors: Elton776 Image:Window-embedded3.jpg Source: http://new.zkoss.org/index.php?title=File:Window-embedded3.jpg License: unknown Contributors: Elton776 Image:Window-ebd-demo.png Source: http://new.zkoss.org/index.php?title=File:Window-ebd-demo.png License: unknown Contributors: Elton776 Image:Window-popup1.jpg Source: http://new.zkoss.org/index.php?title=File:Window-popup1.jpg License: unknown Contributors: Elton776
205

Image:Window-popup2.jpg Source: http://new.zkoss.org/index.php?title=File:Window-popup2.jpg License: unknown Contributors: Elton776 Image:Window-popup3.jpg Source: http://new.zkoss.org/index.php?title=File:Window-popup3.jpg License: unknown Contributors: Elton776 Image:Window-overlapped1.jpg Source: http://new.zkoss.org/index.php?title=File:Window-overlapped1.jpg License: unknown Contributors: Elton776 Image:Window-overlapped2.jpg Source: http://new.zkoss.org/index.php?title=File:Window-overlapped2.jpg License: unknown Contributors: Elton776 Image:Window-overlapped3.jpg Source: http://new.zkoss.org/index.php?title=File:Window-overlapped3.jpg License: unknown Contributors: Elton776 Image:Zk loading.png Source: http://new.zkoss.org/index.php?title=File:Zk_loading.png License: unknown Contributors: Tmillsclare Image:Zk processing.png Source: http://new.zkoss.org/index.php?title=File:Zk_processing.png License: unknown Contributors: Tmillsclare Image:Zk loading test.png Source: http://new.zkoss.org/index.php?title=File:Zk_loading_test.png License: unknown Contributors: Tmillsclare
206

ZK 6.0.0 Style Guide

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ZK 6.0.0 Style Guide

Uploaded by

Copyright:

Available Formats

ZK Style Guide

Default (popup) Default (overlapped, highlighted, and modal) Loading

191 193 196

ZK Class Naming Rule

ZK Class Naming Rule

-bm: Bottom Middle

Parts: (10 block, 13 block is used for Panel only)

Parts: (10 block, 13 block is used for Panel only)

Action Image Index

Action Image Index

This icon is a Tree toggle image.

XUL Component Specification

XUL Component Specification

Font size of the content

Default <auxheader label="Q3" colspan="3"/> <auxheader label="Q4" colspan="3"/> </auxhead> ...

background: transparent url(${c:encodeURL('~./zul/img/button/bandbtn.gif')}) no-repeat 0 0;

CSS\Action Naming: Supported:

Normal (Open) .z-borderlayout-icon V

.z-borderlayout-icon Background of tool icons

Class Name .z-north

Description Border and background Background of header

.z-north-noborder No border .z-north-splt Background of splitter

Class Name .z-south

Description Border and background Background of header

.z-south-noborder No border .z-south-splt Background of splitter

Class Name .z-west

Description Border and background Background of header

.z-west-noborder No border .z-west-splt Background of splitter

Class Name .z-east

Description Border and background Background of header

.z-east-noborder No border .z-east-splt Background of splitter

Class Name .z-button

Description Font size and color

Default Values 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

.z-calendar-seld Selected background background: #CCE0FB;

.z-caption button, .z-caption .z-button .z-button-btn .z-caption a, .z-caption a:visited

Border and font size

div.z-grid-header .z-column-sort div.z-column-cnt

Background of the content of the sort

Font size of the content Overflow Background of button

font-size: ${fontSizeM}; font-weight: normal; font-family: ${fontFamilyC};

Normal (Open) .z-columnlayout, z-columnchildren V

Class Name .z-combobox

Description Font size

Background of input element

Font size and background of combobox's popup

Color and font size of Comboitem's description and content

.z-datebox-readonly, .z-datebox-text-disd .z-datebox .z-datebox-btn

Font size and background of datebox's popup

Class Name .z- decimalbox

Description Font size and background Invalid event

Disabled and read-only

Background of image icon

Class Name .z-doublebox

Description Font size and background Invalid event

Disabled and read-only

position: absolute; z-index: 2;

Background image of the header

background-color: #C3E7FB; background-repeat: repeat-x; background-image: url(${c:encodeURL('~./zul/img/grid/column-bg.png')});

Class Name tr.z-group

Description Background image Font size

Default Values background: #E9F2FB url(${c:encodeURL('~./zul/img/grid/group_bg.gif')}) repeat-x 0 0;

border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;