ZK 6.5.4 Style Guide.pdf

8/10/2019 ZK 6.5.4 Style Guide.pdf

1/213

PDF generated using the open source mwlib toolkit. See http://code.pediapress.com/ for more information.

PDF generated at: Mon, 11 Nov 2013 07:18:55 CST

ZK Style GuideFor ZK 6.5.4


2/213

Contents

Articles

ZK Style Guide 1

Introduction 1

ZK Class Concept 1

Sclass 3

Zclass 4

Overwriting 5

ZK Class Naming Rule 6

By DOM Structure 6

Layout Elements 6

Other Elements 7

Tool Icons 7

By DOM Position 8

Regions 8

Parts (3 x 3 grid) 8

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

Compass 9

By Event Effect 9

Basic Concepts 10

Priority Order 10

Action Image Index 11

Example 11

XUL Component Specification 12

A 12

Default 12

Auxhead 13

Default 13

Bandbox 15

Default 15

Bandpopup 17

Default 17

Borderlayout 18

Default 19

Default (North) 21

Default (South) 23


3/213

Default (West) 25

Default (East) 27

Default (Center) 29

Box 31

Default (Vbox) 31

Button 32

Default (os) 33

trendy 34

Calendar 36

Default 36

Caption 38

Default 38

Default (legend) 40

Cell 41

Default (Row) 41

Checkbox 43

Default 43

Colorbox 44

Default 44

Column 47

Default 47

Columnlayout 49

Default 49

Combobox 50

Default 51

Combobutton 52

Default 53

Comboitem 54

Default 54 Datebox 56

Default 56

Decimalbox 58

Default 58

Detail 59

Default 59

Doublebox 61

Default 61

Doublespinner 62


4/213

Default 62

Fisheyebar 64

Default 64

Footer 65

Default 66

Frozen 67

Default 67

Grid 68

Default 69

paging 71

Group 72

Default 73

Groupbox 74

Default 75

3d 76

Groupfoot 79

Default 79

Hbox 80

Default 81

Hlayout 82

Default 82

Intbox 83

Default 83

Label 84

Default 85

Listbox 86

Default 86

paging 87

select 89 Listfooter 90

Default 90

Listgroup 91

Default 91

Listgroupfoot 92

Default 93

Listheader 94

Default 94

Listitem 96


5/213

Default 96

Longbox 98

Default 98

Menubar 99

Default (Horizontal) 99

Default (Vertical) 100

Menu in Menubar 101

Menuitem in Menubar 103

Menupopup 105

Default 105

Menu in Menupopup 107

Menuitem in Menupopup 108

Menuseparator 109

Default 110

Paging 111

Default 111

os 113

Panel 114

Default 114

Popup 117

Default 118

Portallayout 120

Default 120

Progressmeter 122

Default 122

Radio 123

Default 123

Row 124

Default 125 Separator 126



Slider 129



sphere (Horizontal) 133

sphere (Vertical) 134

scale 136


6/213

Spinner 137

Default 138

Splitter 139



Default (OS-Vertical) 143

Default (OS-Horizontal) 145

Tabbox 146



accordion 159

accordion-lite 162

Tablelayout 164

Default 165

Textbox 166

Default 166

Timebox 167

Default 167

Toolbar 168

Default 169

Panel 171

Toolbarbutton 173

Default 173

Tree 174

Default 175

paging 176

Treechildren 178

Default 178

Treecol 179 Default 180

Treefooter 181

Default 181

Treerow 183

Default 183

Vlayout 185

Default 186

Window 187

Default (embedded) 187


7/213

Default (popup) 191

Default (overlapped, highlighted, and modal) 193

Loading 196

ReferencesArticle Sources and Contributors 199

Image Sources, Licenses and Contributors 203


8/213

ZK Style Guide 1

ZK Style Guide

Documentation:Books/ZK_Style_Guide

If you have any feedback regarding this book, please leave it here.

http://books.zkoss.org/wiki/ZK_Component_Development_Essentials

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.

For more detail about customize theme and how to apply customize CSS, please refer to Theming and Styling.

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

(HtmlBaseComponent.setZclass(java.lang.String)[1]

) 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
http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBaseComponent.html#setZclass(java.lang.String)http://code.google.com/p/zkthemes/http://new.zkoss.org/index.php?title=ZK_Developer%27s_Reference/Theming_and_Stylinghttp://code.google.com/p/zkthemes/http://new.zkoss.org/index.php?title=ZK_Developer%27s_Referencehttp://new.zkoss.org/index.php?title=ZK_Essentialshttp://new.zkoss.org/index.php?title=ZK_Installation_Guidehttp://new.zkoss.org/index.php?title=ZK_Installation_Guidehttp://books.zkoss.org/wiki/ZK_Component_Development_Essentials


9/213

ZK Class Concept 2

to provide totally different look for the same component in the same mold.

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:

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 classof 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.
http://new.zkoss.org/index.php?title=File:Concepts4.jpghttp://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBaseComponent.html#setZclass(java.lang.String)http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBasedComponent.html#setSclass(java.lang.String)http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBasedComponent.html#setSclass(java.lang.String)


10/213

ZK Class Concept 3

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)

SclassAs 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,

.mydb {

border: 1px solid blue;

}

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/
http://getfirebug.com/http://getfirebug.com/http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBasedComponent.html#setSclass(java.lang.String)http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBasedComponent.html#setSclass(java.lang.String)http://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBaseComponent.html#setZclass(java.lang.String)


11/213

Zclass 4

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:

.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;
http://new.zkoss.org/index.php?title=File:Concepts2.pnghttp://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/HtmlBaseComponent.html#setZclass(java.lang.String)


12/213

Zclass 5

}


13/213

ZK Class Naming Rule 6

ZK Class Naming Rule

This section investigates ZK's class naming rule.

By DOM StructureThe 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.
http://new.zkoss.org/index.php?title=File:Zk-css-dom.PNG


14/213

Other Elements 7

Other Elements

-faker:

faker element to mark a reference point at browser side, like grid, listbox, and tree.

-text:

text area.

-inp:

input element.

-sep:

separator element.

-img:

image area.

-pp:

pop*-up element, like datebox, combobox, and so on.

-btn:

a button or an icon.

Tool Icons

Usage Switch Resize Split

Postfix -close:

describes an icon which is closed, like tree,

group, an so on.

-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.

-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.

-splt:

describes a splittable

icon.

-ns:

describes a non-splittable

icon.

Note: all the bold characters have been renamed since ZK 3.6.0


15/213


16/213

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

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 -tr: Top Right

-hl: Header Left -hm: Header Middle -hr: Header Right

-cl: Center Left -cm: Center Middle -cr: Center Right

-fl: Footer Left -fm: Footer Middle -fr: Footer Right

-bl: Bottom Left -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


17/213

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 Priority 2 Priority 3

-clk:clicked event.

-focus:

focused event.

-over:

mouse over event.

-drag:

dragged event.

-drop:

dropped event.

-seld:selected event.

-ck:

checked event.

-unck:

unchecked event.

-disd:disabled event.

-visi:

visited event.

-hide:

hidden event.

-invalid

invalid event.

-readonly

readonly

event.


18/213

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) Hover Click, Select, and Drag. Focus Focus and Hover Disable

Close Same as

above

Same as above Same as

above


above

Other status Same as

above


above


above

Example

This icon is a Timebox image.

This icon is a Tree toggle image.
http://new.zkoss.org/index.php?title=File:Action-indexing2.pnghttp://new.zkoss.org/index.php?title=File:Action-indexing.png


19/213

XUL Component Specification 12

XUL Component Specification

The section outlines each component and their relative molds.

AComponent 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: .z-a -disd

Supported: V !

Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS

background-position
http://new.zkoss.org/index.php?title=File:A1.PNGhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/a.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Essential_Components/A


20/213

Default 13

CSS Specification

Class Name Description Default Values

.z-a Font size 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
http://new.zkoss.org/index.php?title=File:Auxhead-two.pnghttp://new.zkoss.org/index.php?title=File:Auxhead-one.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/sel/css/tree.css.dsp?view=markuphttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/sel/css/listbox.css.dsp?view=markuphttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Supplementary/Auxheadhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/a.css.dsp?view=markup


21/213

Default 14

Events


Naming: z-auxhead,

z-auxheader

Supported: V


background-position

CSS Specification


div.z-grid-header

tr.z-auxhead

Background

image

background-image: url(${c:encodeURL('~./zul/img/grid/s_hd.gif')}); background-color: #C7E5F1;

background-repeat: repeat-x;

div.z-grid-header

th.z-auxheader

Font size overflow: hidden; border: 1px solid; border-color: #DAE7F6 #9EB6CE #9EB6CE #DAE7F6;

white-space: nowrap; padding: 2px; font-size: ${fontSizeM}; font-weight: normal;

.z-auxheader-cnt Font size of the

content

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

padding: 0; overflow: hidden;

Example

div.z-grid-headertr.aux1.z-auxhead{

background-color:#F0FDFF;

background-position:08px;

}

div.z-grid-headertr.aux2.z-auxhead{

background-position:0-10px;

}

...
http://new.zkoss.org/index.php?title=File:Auxhead-demo.png


22/213

Default 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
http://new.zkoss.org/index.php?title=File:Bandboxtwo.pnghttp://new.zkoss.org/index.php?title=File:Bandboxone.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/combo.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Bandboxhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/sel/css/tree.css.dsp?view=markuphttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/sel/css/listbox.css.dsp?view=markuphttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markup


23/213

Default 16

Events


Naming: .z-bandbox -over -btn-clk -focus -btn-over -disd

Supported: V V V V V !


background-position

CSS Specification


.z-bandbox Font size border: 0; padding: 0; margin: 0; white-space: nowrap; font-family:

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

.z-bandbox-inp Background of inputelement

background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border:1px solid #7F9DB9;

.z-bandbox-text-invalid Background of

invalidated

background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0;

border: 1px solid #DD7870;

.z-bandbox-readonly,

.z-bandbox-text-disd

Background of

disabled and read

only

background: #ECEAE4;

.z-bandbox .z-bandbox-btn Background of the

button image

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
http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/combo.css.dsp?view=markup


24/213

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
http://new.zkoss.org/index.php?title=File:Bandpopupone.pnghttp://new.zkoss.org/index.php?title=File:Bandboxfirstt.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/combo.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Bandpopup


25/213

Default 18

Events


Naming: .z-band-popup

Supported: V


background-position

CSS Specification


.z-bandbox-pp Font size 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};

Borderlayout

Component Reference:Borderlayout

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

Version History

http://new.zkoss.org/index.php?title=ZK_Component_Reference/Layouts/Borderlayout


26/213

Default 19

Default

This is the Default mold for Borderlayout.

SourceBorderlayout

[1]

Structure
http://new.zkoss.org/index.php?title=File:Borderlayout2.jpghttp://new.zkoss.org/index.php?title=File:Borderlayout1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.dsp?view=markup


27/213

Default 20

Events


Naming: .z-borderlayout

Supported: V


Naming: .z-borderlayout-icon

Supported: V


background-position

CSS Specification


.z-borderlayout Background

and color

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
http://new.zkoss.org/index.php?title=File:Borderlayout-demo.png


28/213

Default 21

.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:013px;

}

.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);}

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
http://new.zkoss.org/index.php?title=File:North1.jpghttp://new.zkoss.org/index.php?title=File:North1.jpghttp://new.zkoss.org/index.php?title=File:North1.jpghttp://new.zkoss.org/index.php?title=File:North1.jpghttp://new.zkoss.org/index.php?title=File:North1.jpghttp://new.zkoss.org/index.php?title=File:North1.jpghttp://new.zkoss.org/index.php?title=File:North1.jpghttp://new.zkoss.org/index.php?title=File:North1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.dsp?view=markuphttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.dsp?view=markuphttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.dsp?view=markup


29/213

Default (North) 22

Events


Naming: .z-north, .z-north-splt

Supported: V


Naming: .z-north-colps,

.z-north-colpsd,

.z-north-exp,

-over

Supported: V V


background-position

CSS Specification
http://new.zkoss.org/index.php?title=File:North2.jpg


30/213

Default (North) 23


.z-north Border and

background

border: 1px solid #9ECAD8; position: absolute; overflow: hidden; background-color: white;

.z-north-header Background of

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 border:0;

.z-north-splt Background of

splitter

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
http://new.zkoss.org/index.php?title=File:South1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.dsp?view=markup


31/213

Default (South) 24

Events


Naming: .z-south, .z-south-splt

Supported: V


Naming: .z-south-colps,

.z-south-colpsd,

.z-south-exp,

-over

Supported: V V


background-position

CSS Specification
http://new.zkoss.org/index.php?title=File:South2.jpg


32/213

Default (South) 25


.z-south Border and

background


.z-south-header Background of

header

color: #0F3B82; font: normal 11px tahoma, arial, verdana, sans-serif; font-weight:bold; padding: 5px 3px

4px 5px; border-bottom: 1px solid #9ecad8;




.z-south-noborder No border border:0;

.z-south-splt Background of

splitter




Default (West)This is the Default (West) mold for Borderlayout.

Source

West[1]

Structure
http://new.zkoss.org/index.php?title=File:West1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.dsp?view=markup


33/213

Default (West) 26

Events


Naming: .z-west,

.z-west-splt

Supported: V


Naming: .z-west-colps,

.z-west-colpsd,

.z-west-exp,

-over

Supported: V V


background-position

CSS Specification
http://new.zkoss.org/index.php?title=File:West2.jpg


34/213

Default (West) 27


.z-west Border and

background


.z-west-header Background of

header

color: #0F3B82; font: normal 11px tahoma, arial, verdana, sans-serif; font-weight:bold; padding: 5px 3px 4px

5px; border-bottom: 1px solid #9ecad8;




.z-west-noborder No border border:0;

.z-west-splt Background of

splitter




Default (East)This is the Default (East) mold for Borderlayout.

Source

East[1]

Structure
http://new.zkoss.org/index.php?title=File:East1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.dsp?view=markup


35/213

Default (East) 28

Events


Naming: .z-east, .z-east-splt

Supported: V


Naming: .z-east-colps,

.z-east-colpsd,

.z-east-exp,

-over

Supported: V V


background-position

CSS Specification
http://new.zkoss.org/index.php?title=File:East2.jpg


36/213

Default (East) 29


.z-east Border and

background


.z-east-header Background of

header

color: #0F3B82; font: normal 11px tahoma, arial, verdana, sans-serif; font-weight:bold; padding: 5px 3px 4px

5px; border-bottom: 1px solid #9ecad8;




.z-east-noborder No border border:0;

.z-east-splt Background of

splitter


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
http://new.zkoss.org/index.php?title=File:Center1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/borderlayout.css.dsp?view=markup


37/213

Default (Center) 30

Events


Naming: .z-center

Supported: V

CSS Specification


.z-center Border and

background


.z-center-header Background ofheader

color: #0F3B82; font: normal 11px tahoma, arial, verdana, sans-serif; font-weight:bold; padding: 5px 3px4px 5px; border-bottom: 1px solid #9ecad8;




.z-center-noborder No border border:0;
http://new.zkoss.org/index.php?title=File:Center2.jpg


38/213

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
http://new.zkoss.org/index.php?title=File:Box2.pnghttp://new.zkoss.org/index.php?title=File:Box1.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/box/css/box.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Containers/Box


39/213

Default (Vbox) 32

Events


Naming: .z-vbox

Supported: V


background-position

CSS Specification


tr.z-vbox-sep Height of separator 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

http://new.zkoss.org/index.php?title=ZK_Component_Reference/Essential_Components/Buttonhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/box/css/box.css.dsp?view=markup


40/213

Default (os) 33

Default (os)

This is the os mold for Button.

SourceButton

[1]

Structure

Events


Naming: .z-button-os

Supported: V


background-position

CSS Specification


.z-button-os Font size and color 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
http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/button.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=File:Button-os.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/button.css.dsp?view=markup


41/213

trendy 34

trendy

This is the Default mold for Button.

SourceButton

[1]

Structure

Events


Naming: .z-button -over -clk -focus -disd



background-position

CSS Specification
http://new.zkoss.org/index.php?title=File:Button1.pnghttp://new.zkoss.org/index.php?title=File:Button2.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/button.css.dsp?view=markup


42/213

trendy 35


.z-button Font size and color font-family: ${fontFamilyT} ;

font-size: ${fontSizeM};

color: black;

.z-button .z-button-tl,

.z-button .z-button-tr,

.z-button .z-button-bl,

.z-button .z-button-br

Corner graph background-image:url(${c:encodeURL('~./zul/img/button/z-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

Right and left edge background-image:url(${c:encodeURL('~./zul/img/button/z-btn-y.gif')});

.z-button .z-button-cm Center image background-image:url(${c:encodeURL('~./zul/img/button/z-btn-ctr.gif')});

Example

.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;

}

.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;

}


43/213

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
http://new.zkoss.org/index.php?title=File:Calendar3.PNGhttp://new.zkoss.org/index.php?title=File:Calendar2.PNGhttp://new.zkoss.org/index.php?title=File:Calendar1.PNGhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/db/css/calendar.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Calendar


44/213


45/213

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
http://new.zkoss.org/index.php?title=File:Caption3.pnghttp://new.zkoss.org/index.php?title=File:Caption2.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/caption.css?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Containers/Caption


46/213

Default 39


Naming: .z-caption

Supported: V


background-position

CSS Specification


.z-caption input, .z- caption td Font size font-size: ${fontSizeS};

.z-caption .z-caption-l Font size of the

left


.z-caption .z-caption-r Font size of the

right


.z-caption button, .z-caption .z-button

.z-button-btn

Font size of button font-size: ${fontSizeXS}; font-weight: normal; padding-top: 0;

padding-bottom: 0; margin-top: 0; margin-bottom: 0;

.z-caption a, .z-caption a:visited Font size of A tag font-size: ${fontSizeS}; font-weight: normal; color: black; background: none;

text-decoration: none;

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
http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/caption.css?view=markup


47/213

Default (legend) 40

Default (legend)

This is the Default (legend) mold for Caption.

SourceCaption

[1]

Structure

Events

None.

CSS Specification


.z-fieldset legend Font size 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
http://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/groupbox.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=File:Captionone.pnghttp://new.zkoss.org/index.php?title=File:Groupboxone.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/groupbox.css.dsp?view=markup


48/213

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
http://new.zkoss.org/index.php?title=File:Cell1.PNGhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Data/Grid/Rowhttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Containers/Boxhttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Supplementary/Cell


49/213

Default (Row) 42

Events


Naming: .z-cell

Supported: V


background-position

CSS Specification


.z-cell Padding padding: 2px; overflow: hidden;

tr.z-row .z-cell Background color and

border

background: white; border-top: none; border-left: 1px solid white; border-right: 1px solid #CCC;

border-bottom: 1px solid #DDD;

tr.z-grid-odd

.z-cell

Background color of the

odd row

background: #F0FAFF;
http://new.zkoss.org/index.php?title=File:Cell2.PNG


50/213

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


Naming: .z-checkbox

Supported: V


background-position
http://new.zkoss.org/index.php?title=File:Checkbox2.pnghttp://new.zkoss.org/index.php?title=File:Checkbox1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/zul/css/norm.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Checkbox


51/213

Default 44

CSS Specification


.z-checkbox-cnt Font size 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
http://new.zkoss.org/index.php?title=File:Colorbox1.PNGhttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Colorboxhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/zul/css/norm.css.dsp?view=markup


52/213

Default 45
http://new.zkoss.org/index.php?title=File:Colorbox3.PNGhttp://new.zkoss.org/index.php?title=File:Colorbox2.PNG


53/213

Default 46

Events


Naming: .z-colorbox

Supported: V


background-position

CSS Specification


.z-colorbox 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')});
http://new.zkoss.org/index.php?title=File:Colorbox4.PNG


54/213


55/213

Default 48

Events


Naming: .z-columns

Supported: V


Naming: .z-column -over

Supported: V !


background-position

CSS Specification


tr.z-columns Background image background-image: url(${c:encodeURL('~./zul/img/grid/s_hd.gif')}); background-color:

#C7E5F1;background-repeat: repeat-x;

div.z-grid-header th.z-column Border and font size overflow: hidden; border: 1px solid; border-color: #DAE7F6 #9EB6CE #9EB6CE

#DAE7F6; white-space: nowrap; padding: 2px; font-size: ${fontSizeM}; font-weight:

normal;

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

div.z-column-cnt

Background of the

content of the sort

cursor: pointer; padding-right: 9px; background:transparent

url(${c:encodeURL('~./zul/img/sort/v_hint.gif')}); background-position: 99% center;

background-repeat: no-repeat;

div.z-grid-header

.z-column-sort-asc

div.z-column-cnt

Background of the

content of the

ascendant sort


url(${c:encodeURL('~./zul/img/sort/v_asc.gif')}); background-position: 99% center;


div.z-grid-header

.z-column-sort-dsc

div.z-column-cnt

Background of the

content of the

descendant sort


url(${c:encodeURL('~./zul/img/sort/v_dsc.gif')}); background-position: 99% center;


div.z-grid-header

.z-column-sort-asc,

div.z-grid-header

.z-column-sort-dsc

Background of the

sort

background: #DDEEFB url(${c:encodeURL('~./zul/img/grid/column-over.gif')})

repeat-x 0 0;

div.z-column-cnt Font size of the

content

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

div.z-column-cnt Overflow overflow: hidden

.z-column-btn Background of

button

background: #DDEEFB url(${c:encodeURL('~./zul/img/grid/hd-btn.gif')}) no-repeat left

center; display: none; position: absolute; width: 14px; right: 0; top: 0; z-index: 2; cursor:

pointer;

.z-column-over Hovered event background: #B9EBFF url(${c:encodeURL('~. /zul/img/grid/column-over.gif')}) repeat-x

0 0;


56/213

Columnlayout 49

Columnlayout

Component Reference:Columnlayout

Columnlayout and Columnchildren.

Version History


Default

This is the Default mold for Columnlayout.

Structure

Events
http://new.zkoss.org/index.php?title=File:Columnlayout2.jpghttp://new.zkoss.org/index.php?title=File:Columnlayout1.jpghttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Layouts/Columnlayout


57/213

Default 50


Naming: .z-columnlayout,

z-columnchildren

Supported: V


background-position

CSS Specification


.z-columnlayout Overflow visibility: hidden; overflow: hidden; zoom: 1;

.z-columnlayout-inner Overflow overflow: hidden;

.z-columnchildren Padding and margin float: left; padding: 0; margin: 0; overflow: hidden; zoom: 1;

.z-columnchildren-body Overflow overflow: hidden; zoom: 1;

.z-columnchildren-cnt Overflow overflow: hidden;

Combobox

Component Reference:Combobox

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

Version History

http://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Combobox


58/213

Default 51

Default

This is the Default mold for Combobox.

SourceCombobox

[1]

Structure

Events


Naming: .z-combobox -over -btn-clk -focus -btn-over -disd



background-position

CSS Specification
http://new.zkoss.org/index.php?title=File:Combobox2.pnghttp://new.zkoss.org/index.php?title=File:Combobox1.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/combo.css.dsp?view=markup


59/213

Default 52


.z-combobox Font size border: 0; padding: 0; margin: 0; white-space: nowrap; font-family: ${fontFamilyC};

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

.z-combobox-inp Background of input

element

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

#FFF url(${c:encodeURL('~./zul/img/misc/text-bg.gif')}) repeat-x 0 0; border: 1px solid

#86A4BE;

.z-combobox-text-invalid Background of

invalidated

background: #FFF url(${c:encodeURL('~./zul/img/misc/text-bg-invalid.gif')}) repeat-x 0 0;


.z-combobox-readonly,

.z-combobox-text-disd

Background of

disabled and read

only


.z-combobox

.z-combobox-img

Background of the

button image

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

0 0;

vertical-align: top; cursor: pointer; width: 17px; height: 19px; border: 0; border-bottom: 1px

solid #7F9DB9;

.z-combobox-pp Font size andbackground 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

http://new.zkoss.org/index.php?title=ZK_Component_Reference/Essential_Components/Combobutton


60/213


61/213

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
http://new.zkoss.org/index.php?title=File:Comboitemtwo.pnghttp://new.zkoss.org/index.php?title=File:Comboitemone.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/combo.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Comboitem


62/213

Default 55

Events


Naming: .z-comboitem -over -seld -over-seld -disd

Supported: V ! ! ! !


background-position

CSS Specification


.z-comboitem.z-combobox-pp .z-comboitem,

.z-combobox-pp .z-comboitem a,

.z-combobox-pp .z-comboitem a:visited

Font size font-size: ${fontSizeM}; font-weight:

normal; color: black;

text-decoration: none;

.z-combobox-pp .z-comboitem-text,

.z-combobox-pp .z-comboitem-img

Font size white-space: nowrap; font-size:

${fontSizeS}; cursor: pointer;

.z-combobox-pp .z-comboitem-inner,

.z-combobox-pp .z-comboitem-cnt

Color and font size of Comboitem's description and

content

color: #888; font-size: ${fontSizeXS};

padding-left: 6px;

[since 6.0.1]

.z-comboitem .z-combobox--spacer

Blank space between the Image and Label text for

customize easier. Customize example:

.z-comboitem-spacer {

margin-right: 30px;

}

no default settings


63/213

Datebox 56

Datebox

Component Reference:Datebox

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

Version History


Default

This is the Default mold for Datebox.

Source

Datebox[1]

Structure
http://new.zkoss.org/index.php?title=File:Datebox2.jpghttp://new.zkoss.org/index.php?title=File:Datebox1.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/combo.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Datebox


64/213


65/213

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


Naming: .z-decimalbox -focus -disd

Supported: V ! !


background-position

CSS Specification
http://new.zkoss.org/index.php?title=File:Decimalbox1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/input.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Decimalbox


66/213

Default 59


.z- decimalbox Font size and

background

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-decimalbox-text-invalid Invalid event background: #FFF url(${c:encodeURL('~./zul/img/misc/text-bg-invalid.gif')}) repeat-x 0 0;


.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
http://new.zkoss.org/index.php?title=File:Detail1.jpghttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Data/Grid/Detailhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/input.css.dsp?view=markup


67/213

Default 60

Events


Naming: .z-detail

Supported: V


background-position

CSS Specification


tr.z-row

.z-detail-outer

Background 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')});

.z-detail-img Background of

image icon

cursor:pointer; width: 100%; height: 18px; background: transparent no-repeat 4px 3px; background-image:

url(${c:encodeURL('~./zul/img/grid/row-expand.png')});
http://new.zkoss.org/index.php?title=File:Detail2.jpg


68/213

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


Naming: .z-doublebox -focus -disd

Supported: V ! !


background-position

CSS Specification
http://new.zkoss.org/index.php?title=File:Doublebox1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/input.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Doublebox


69/213

Default 62


.z-doublebox Font size and

background

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-doublebox-text-invalid Invalid event background: #FFF url(${c:encodeURL('~./zul/img/misc/text-bg-invalid.gif')}) repeat-x 0 0;


.z-doublebox-readonly,

.z-doublebox-text-disd

Disabled and

read-only


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
http://new.zkoss.org/index.php?title=File:Doublespinner2.pnghttp://new.zkoss.org/index.php?title=File:Doublespinner1.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/inp/css/combo.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Input/Doublespinner


70/213

Default 63

Events


Naming: .z-doublespinner -over -btn-clk -focus -btn-over -disd



background-position

CSS Specification


.z-doublespinner-inp Background of

input element

background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0;

border: 1px solid #7F9DB9; font-family: ${fontFamilyC}; font-size: ${fontSizeM};

font-weight: normal;

.z-doublespinner-text-invalid Background of

invalidated

background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')})

repeat-x 0 0; border: 1px solid #DD7870;

.z-doublespinner-readonly,

.z-doublespinner-text-disd

Background of

disabled and read

only


.z-doublespinner.z-doublespinner-btn 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;


71/213

Fisheyebar 64

Fisheyebar

Component Reference:Fisheyebar

Fisheyebar and Fisheye.

Version History


Default

This is the Default mold for Fisheyebar.

Structure
http://new.zkoss.org/index.php?title=File:Fisheyebar2.jpghttp://new.zkoss.org/index.php?title=File:Fisheyebar1.jpghttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Essential_Components/Fisheye/Fisheyebar


72/213

Default 65

Events


Naming: .z-fisheyebar,

.z-fisheye

Supported: V


background-position

CSS Specification


.z-fisheyebar Visibility visibility: hidden;

.z-fisheyebar-inner Position offisheyebar

position: relative;

.z-fisheye Position of

fisheye

position: absolute; z-index: 2;

.z-fisheye-img Image size border: 0px; position: absolute; width: 100%; height: 100%;

.z-fisheye-text Font size font-size: ${fontSizeM}; font-weight: normal; font-family: Arial, Helvetica, sans-serif; background-color:

#eee; border: 2px solid #666; padding: 2px; text-align: center; position: absolute; display: none;

FooterComponent Reference:Footer

Foot and Footer are used for Grid.

Version History

http://new.zkoss.org/index.php?title=ZK_Component_Reference/Data/Grid/Footer


73/213

Default 66

Default

This is the Default mold for Footer.

SourceFooter

[1]

Structure

Events


Naming: .z-foot,

.z-footer

Supported: V


background-position
http://new.zkoss.org/index.php?title=File:Footer1.jpghttp://new.zkoss.org/index.php?title=File:Grid1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markup


74/213

Default 67

CSS Specification


div.z-footer-cnt Font size border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;

div.z-footer-cnt Overflow overflow: hidden;

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
http://new.zkoss.org/index.php?title=File:FrozenGrid2.PNGhttp://new.zkoss.org/index.php?title=File:FrozenGrid1.PNGhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/mesh/css/frozen.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Data/Listboxhttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Data/Gridhttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Supplementary/Frozen


75/213

Default 68

Events


Naming: .z-frozen

Supported: V


background-position

CSS Specification


.z-frozen Background Image 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

http://new.zkoss.org/index.php?title=ZK_Component_Reference/Data/Gridhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/mesh/css/frozen.css.dsp?view=markup


76/213

Default 69

Default

This is the Default mold for Grid.

SourceGrid

[1]

Structure

Events
http://new.zkoss.org/index.php?title=File:Grid2.jpghttp://new.zkoss.org/index.php?title=File:Grid1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markup


77/213

Default 70


Naming: .z-grid

Supported: V


background-position

CSS Specification


div.z-grid Background color background: #DAE7F6; border: 1px solid #7F9DB9; overflow: hidden; zoom: 1;

div.z-grid-header,

div.z-grid-header tr,

div.z-grid-footer

Border border: 0; overflow: hidden; width: 100%;

div.z-grid-header tr.z-columns,

div.z-grid-header tr.z-auxhead

Background image

of the header

background-color: #C3E7FB; background-repeat: repeat-x; background-image:

url(${c:encodeURL('~./zul/img/grid/column-bg.png')});

div.z-grid-body Background color of

the body

background: white; border: 0; overflow: auto; width: 100%;

div.z-grid-footer Background color of

the footer

background: #DAE7F6; border-top: 1px solid #9EB6CE;


78/213

paging 71

paging

This is the paging mold for Grid.

SourceGrid

[1]

Structure
http://new.zkoss.org/index.php?title=File:Grid-pg2.jpghttp://new.zkoss.org/index.php?title=File:Grid-pg1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markup


79/213

paging 72

Events


Naming: .z-grid

Supported: V


background-position

CSS Specification


div.z-grid-pgi-b Border of bottom paging border-top: 1px solid #AAB; overflow: hidden;

div.z-grid-pgi-t Border of top paging border-bottom: 1px solid #AAB; overflow: hidden;

Group

Component Reference:Group

Group is used for Grid.

Version History

http://new.zkoss.org/index.php?title=ZK_Component_Reference/Data/Grid/Group


80/213

Default 73

Default

This is the Default mold for Group.

SourceGroup

[1]

Structure

Events


Naming: .z-group

Supported: V


background-position

CSS Specification
http://new.zkoss.org/index.php?title=File:Group1.jpghttp://new.zkoss.org/index.php?title=File:Grid1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markup


81/213

Default 74


tr.z-group Background

image

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

div.z-group-cnt Font size border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight:

normal;

.z-group-inner

.z-group-cnt span,

.z-group-inner

.z-group-cnt

Color and font

size

color:#3764a0; font: normal ${fontSizeM} ${fontFamilyT}; padding: 4px 2px; width:

auto;font-weight:bold;

td.z-group-inner Padding and

border

padding: 2px; overflow: hidden; border-top: 2px solid #81BAF5; border-bottom: 1px solid #bcd2ef; color:

#3764a0; font: normal ${fontSizeM} ${fontFamilyT};font-weight:bold;

.z-group-img Image icon width: 18px; min-height: 18px; height: 100%; background-image:

url(${c:encodeURL('~./zul/img/toggle.gif')}); background-repeat: no-repeat; vertical-align: top; cursor:

pointer; border: 0;

Groupbox

Component Reference:Groupbox

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

Version History

http://new.zkoss.org/index.php?title=ZK_Component_Reference/Containers/Groupbox


82/213

Default 75

Default

This is the Default mold for Groupbox.

SourceGroupbox

[1]

Structure

Events


Naming: .z-fieldset

Supported: V


background-position

CSS Specification


.z-fieldset-cnt Overflow of content overflow: hidden;

[since 6.0.0]

Events


Naming: .z-groupbox

Supported: V


background-position
http://new.zkoss.org/index.php?title=File:Groupbox-final.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/groupbox.css.dsp?view=markup


83/213

Default 76

CSS Specification


.z-groupbox-cnt Overflow of content overflow: hidden;

3d

This is the 3d mold for Decimalbox.

Source

Groupbox[1]

Structure

Events


Naming: .z-groupbox

Supported: V


background-position
http://new.zkoss.org/index.php?title=File:Groupbox-3d2.jpghttp://new.zkoss.org/index.php?title=File:Groupbox-3d1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/wgt/css/groupbox.css.dsp?view=markup


84/213

3d 77

CSS Specification


.z-groupbox-header Overflow of

header

overflow: hidden;zoom: 1;

.z-groupbox-hl

.z-groupbox-header

Font size color: #373737; font-family: ${fontFamilyT}; font-size: ${fontSizeM}; font-weight: normal; padding: 0

0 4px 0; border: 0 none; background: transparent;

.z-groupbox-tl Background of

top left

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;

.z-groupbox-tr Background of

top right

background:transparent no-repeat scroll right -5px;


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

border: 1px solid #B2CCD9; padding: 5px;

.z-groupbox-bm Background of

bottom middle

background:transparent url(${c:encodeURL('~./img/shdmd.gif')}) repeat-x 0 0; height: 6px; font-size:

0; line-height: 0; zoom: 1;

.z-groupbox-bl Background of

bottom left

background:transparent url(${c:encodeURL('~./img/shdlf.gif')}) no-repeat 0 bottom; padding-left: 6px;

zoom: 1;

.z-groupbox-br Background of

bottom right

background:transparent url(${c:encodeURL('~./img/shdrg.gif')}) no-repeat right bottom; padding-right:

6px; zoom: 1;

[since 6.0.0]

Events


Naming: .z-groupbox-3d

Supported: V


background-position


85/213

3d 78

CSS Specification


.z-groupbox-3d-header Overflow of

header

overflow: hidden;zoom: 1;

.z-groupbox-3d-hl

.z-groupbox-3d-header

Font size color: #373737; font-family: ${fontFamilyT}; font-size: ${fontSizeM}; font-weight: normal;

padding: 0 0 4px 0; border: 0 none; background: transparent;

.z-groupbox-3d-tl Background of

top left

background:transparent no-repeat scroll 0 top;


font-size:0;height:5px; line-height:0; margin-right:5px; zoom:1;

.z-groupbox-3d-tr Background of

top right

background:transparent no-repeat scroll right -5px;


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

border: 1px solid #B2CCD9; padding: 5px;

.z-groupbox-3d-bm Background of

bottom middle

background:transparent url(${c:encodeURL('~./img/shdmd.gif')}) repeat-x 0 0; height: 6px;

font-size: 0; line-height: 0; zoom: 1;

.z-groupbox-3d-bl Background of

bottom left

background:transparent url(${c:encodeURL('~./img/shdlf.gif')}) no-repeat 0 bottom; padding-left:

6px; zoom: 1;

.z-groupbox-3d-br Background of

bottom right

background:transparent url(${c:encodeURL('~./img/shdrg.gif')}) no-repeat r ight bottom;

padding-right: 6px; zoom: 1;


86/213

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
http://new.zkoss.org/index.php?title=File:Groupfoot1.jpghttp://new.zkoss.org/index.php?title=File:Grid1.jpghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/grid/css/grid.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Data/Grid/Groupfoot


87/213

Default 80

Events


Naming: .z-groupfoot

Supported: V


background-position

CSS Specification


.z-groupfoot Background

image

background: #E9F2FB url(${c:encodeURL('~./zul/img/grid/groupfoot_bg.gif')})

repeat-x 0 0;

div.z-groupfoot-cnt Border border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size:${fontSizeM}; font-weight: normal;

td.z-groupfoot-inner Padding padding: 2px; overflow: hidden;

.z-groupfoot-inner .z-groupfoot-cnt span,

.z-groupfoot-inner .z-groupfoot-cnt

Font size and

color

color: #2C559C; font: normal ${fontSizeM} ${fontFamilyT};font-weight:bold;

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

http://new.zkoss.org/index.php?title=ZK_Component_Reference/Layouts/Hbox


88/213

Default 81

Default

This is the Default mold for Hbox.

SourceHbox

[1]

Structure

Events


Naming: .z-hbox

Supported: V


background-position

CSS Specification


td.z-hbox-sep Width of separator width: 0.3em; padding: 0; margin: 0;
http://new.zkoss.org/index.php?title=File:Hboxtwo.pnghttp://new.zkoss.org/index.php?title=File:Hboxone.pnghttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/box/css/box.css.dsp?view=markup


89/213

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


Naming: z-hlayout

Supported: V


background-position
http://new.zkoss.org/index.php?title=File:Hlayout2.PNGhttp://new.zkoss.org/index.php?title=File:Hlayout1.PNGhttp://zk1.svn.sourceforge.net/viewvc/zk1/releases/5.0.4/zul/src/archive/web/js/zul/layout/css/layout.css.dsp?view=markuphttp://new.zkoss.org/index.php?title=ZK_Component_Reference/Layouts/Hlayout


90/213

Default 83

CSS Specification


.z-hlayout Overflow hidden

.z-hlayo

Documents

ZK 6.5.4 Style Guide.pdf