ZK 6.5.4 Style Guide PDF

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 Guide
For ZK 6.5.4
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
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
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
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
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
Default (popup) 191
Default (overlapped, highlighted, and modal) 193
Loading 196
References
Article Sources and Contributors 199
Image Sources, Licenses and Contributors 203
ZK Style Guide
1
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.
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
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:
<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.
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)
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
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:
<zk>
.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
5
}
</style>
<grid width="450px">
<columns>
<column label="Having Zclass"/>
<column label="Without Zclass"/>
</columns>
<rows>
<row><textbox zclass="mydb" value="Default"/><textbox value="Default"/></row>
<row><textbox zclass="mydb" readonly="true" value="Readonly"/><textbox readonly="true" value="Readonly"/></row>
<row><textbox zclass="mydb" disabled="true" value="Disabled"/><textbox disabled="true" value="Disabled"/></row>
<row><textbox zclass="mydb" focus="true" value="Focus"/><textbox value="Focus"/></row>
</rows>
</grid>
</zk>
As you can see, the Zclass is used to change all the action CSS rules of the component. Therefore, we must replace
all the CSS rules of the component with a new CSS name. For example as above, the new name is called mydb,
and we must replace the original name of Textbox called z-textbox to the new one, it is dirty but necessary. Note:
The CSS source of Textbox from SVN
Overwriting
The last part, it is called overwriting, replacing the original CSS rules of the component is that we want to customize
all the components with a special style.
Overwriting Demo
For example Textbox.
<zk>
.z-textbox {
background: black;
color: white;
border: 3px outset blue;
}
</style>
<textbox value="Default"/>
</zk>
As you can see, we merely replace the default CSS with black background, white color, and three pixel borders, we
can use the component replacement instead.
ZK Class Naming Rule
6
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
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
By DOM Position
8
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 -tm: Top Middle -tr: Top Right
-cl: Center Left -cm: Center Middle -cr: Center Right
-bl: Bottom
Left
-bm: Bottom Middle -br: Bottom
Right
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
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.
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.
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: .z-a -disd
Supported: V !
Note: An exclamation mark(!) means that the action effect is done by CSS background , not CSS
background-position
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
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
<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"/>
Default
15
</auxhead>
...
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
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 input
element
background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border:
1px solid #7F9DB9;
.z-bandbox-text-invalid Background of
invalidated
background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0;
border: 1px solid #DD7870;
.z-bandbox-readonly,
.z-bandbox-text-disd
Background of
disabled and read
only
background: #ECEAE4;
.z-bandbox .z-bandbox-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
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
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
Default
19
Default
This is the Default mold for Borderlayout.
Source
Borderlayout
[1]
Structure
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
Default
21
<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>
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
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
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
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
Default (South)
25
.z-south Border and
background
.z-south-header Background of
header
.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
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
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
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
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
Default (Center)
30
Events
Naming: .z-center
Supported: V
CSS Specification
.z-center Border and
background
.z-center-header Background of
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
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
Default (os)
33
Default (os)
This is the os mold for Button.
Source
Button
[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
trendy
34
trendy
This is the Default mold for Button.
Source
Button
[1]
Structure
Events
Naming: .z-button -over -clk -focus -disd
background-position
CSS Specification
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
<style>
.z-button .z-button-tl, .z-button .z-button-tr,
.z-button .z-button-bl, .z-button .z-button-br,
.z-button .z-button-tm, .z-button .z-button-bm,
.z-button .z-button-cl, .z-button .z-button-cr {
background-image:none; background-color:#008bb6;
}
.z-button .z-button-cm {
background-image:none; background-color:#c1c2c3;
}
</style>
<style>
.z-button .z-button-tl, .z-button .z-button-tr,
.z-button .z-button-bl, .z-button .z-button-br,
.z-button .z-button-tm, .z-button .z-button-bm,
.z-button .z-button-cl, .z-button .z-button-cr, .z-button .z-button-cm
{
background-image:none;
}
</style>
<button tooltiptext="Here is a button" image="http://www.freebuttons.com/freebuttons/Alien/AlienDd5.gif"/>
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
Naming: .z-calendar -over -seld -over-seld -disd
Supported: V ! ! ! !
background-position
CSS Specification
.z-calendar Background and
font size
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
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
Default (legend)
40
Default (legend)
This is the Default (legend) mold for Caption.
Source
Caption
[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
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
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;
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
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
Default
45
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')});
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
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;
Columnlayout
49
Columnlayout
Component Reference: Columnlayout
Columnlayout and Columnchildren.
Version History
Default
This is the Default mold for Columnlayout.
Structure
Events
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
Default
51
Default
This is the Default mold for Combobox.
Source
Combobox
[1]
Structure
Events
Naming: .z-combobox -over -btn-clk -focus -btn-over -disd
background-position
CSS Specification
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 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
Naming: .z-combobutton -over -clk -focus
Supported: V V Click V
background-position
CSS Specification
.z-combobutton 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/ 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
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
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
Default
57
Events
Naming: .z-datebox -over -btn-clk -focus -btn-over -disd
background-position
CSS Specification
.z-datebox Font size border: 0; padding: 0; margin: 0; white-space: nowrap; font-family: ${fontFamilyC};font-size:
${fontSizeM}; font-weight: normal;
.z-datebox-inp Background of input
element
background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border: 1px
solid #7F9DB9;
.z-datebox-text-invalid Background of
invalidated
background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border:
1px solid #DD7870;
.z-datebox-readonly,
.z-datebox-text-disd
Background of
disabled and read
only
.z-datebox
.z-datebox-btn
Background of the
button image
background: transparent url(${c:encodeURL('~./zul/img/button/datebtn.gif')}) no-repeat 0 0;
vertical-align: top; cursor: pointer; width: 17px; height: 19px; border: 0; border-bottom: 1px solid
#86A4BE;
.z-datebox-pp Font size and
background of
datebox's popup
display: block; position: absolute; z-index: 88000; background: white; border: 1px solid #888888;
padding: 2px; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
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
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
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')});
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
Default
62
.z-doublebox Font size and
background
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
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};
.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;
Fisheyebar
64
Fisheyebar
Component Reference: Fisheyebar
Fisheyebar and Fisheye.
Version History
Default
This is the Default mold for Fisheyebar.
Structure
Default
65
Events
Naming: .z-fisheyebar,
.z-fisheye
Supported: V
background-position
CSS Specification
.z-fisheyebar Visibility visibility: hidden;
.z-fisheyebar-inner Position of
fisheyebar
position: relative;
.z-fisheye Position of
fisheye
position: absolute; z-index: 2;
.z-fisheye-img Image size border: 0px; position: absolute; width: 100%; height: 100%;
.z-fisheye-text Font size font-size: ${fontSizeM}; font-weight: normal; font-family: Arial, Helvetica, sans-serif; background-color:
#eee; border: 2px solid #666; padding: 2px; text-align: center; position: absolute; display: none;
Footer
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
Naming: .z-foot,
.z-footer
Supported: V
background-position
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
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
Default
69
Default
This is the Default mold for Grid.
Source
Grid
[1]
Structure
Events
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;
paging
71
paging
This is the paging mold for Grid.
Source
Grid
[1]
Structure
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
Default
73
Default
This is the Default mold for Group.
Source
Group
[1]
Structure
Events
Naming: .z-group
Supported: V
background-position
CSS Specification
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
Default
75
Default
This is the Default mold for Groupbox.
Source
Groupbox
[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
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
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
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
font-size:0;height:5px; line-height:0; margin-right:5px; zoom:1;
.z-groupbox-3d-tr Background of
top right
.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 right bottom;
padding-right: 6px; zoom: 1;
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
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:
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
Default
81
Default
This is the Default mold for Hbox.
Source
Hbox
[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;
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
Default
83
CSS Specification
.z-hlayout Overflow hidden
.z-hlayout-inner Display 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
Naming: .z-intbox -focus -disd
Supported: V ! !
background-position
CSS Specification
.z- intbox Font size and
background
background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg.gif')}) repeat-x 0 0; border: 1px solid
#7F9DB9; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
.z-intbox-text-invalid Invalid event background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border: 1px
solid #DD7870;
.z-intbox-readonly,
.z-intbox-text-disd
Disabled and
read-only
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
Naming: .z-label
Supported: V
background-position
CSS Specification
.z-label Font size 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
Naming: .z-listbox
Supported: V
background-position
CSS Specification
div.z-listbox Background color background: #DAE7F6; border: 1px solid #7F9DB9; overflow:
hidden; zoom: 1;
div.z-listbox-header, div.z-listbox-header tr,
div.z-listbox-footer
div.z-listbox-body Background color of the
body
position: relative;
div.z-listbox-footer Background color of the
footer
paging
This is the paging mold for Listbox.
Source
Listbox
[2]
Structure
paging
88
Events
Naming: .z-listbox
Supported: V
background-position
CSS Specification
div.z-listbox-pgi-b Border of bottom paging border-top: 1px solid #AAB; overflow: hidden;
div.z-listbox-pgi-t Border of top paging border-bottom: 1px solid #AAB; overflow: hidden;
select
89
select
This is the select mold for Listbox.
Source
Listbox
[2]
Structure
Events
Naming: .z-listbox
Supported: V
background-position
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
Naming: .z-listfoot, .z-listfooter
Supported: V
background-position
Default
91
CSS Specification
.z-listfooter Font size cursor: pointer; padding: 0 2px; font-size: ${fontSizeM}; font-weight: normal; overflow: hidden;
div.z-listfooter-cnt Font size of the
content
border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight:
normal;
div.z-listfooter-cnt Overflow overflow: hidden;
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
Naming: .z-listgroup
Supported: V
background-position
CSS Specification
tr.z-listgroup Background
image
background: #E9F2FB url(${c:encodeURL('~./zul/img/grid/group_bg.gif')}) repeat-x 0 0;
td.z-listgroup-inner
div.z-listcell-cnt
Color and font
size
color:#3764a0; font: normal ${fontSizeM} ${fontFamilyT}; padding: 4px 2px; width:
auto;font-weight:bold;
td.z-listgroup-inner Padding and
border
padding-top: 2px; border-top: 2px solid #81BAF5;border-bottom: 1px solid #bcd2ef;
.z-listgroup-img Image icon width: 18px; min-height: 18px; height: 100%; background-image:
url(${c:encodeURL('~./zul/img/toggle.gif')});
background-repeat: no-repeat; background-position: 0px 0px; vertical-align: top; cursor:
pointer; border: 0;
Listgroupfoot
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
Naming: .z-listgroupfoot
Supported: V
background-position
CSS Specification
.z-listgroupfoot Background
image
background: #E9F2FB url(${c:encodeURL('~./zul/img/grid/groupfoot_bg.gif')})
repeat-x 0 0;
td.z-listgroupfoot-inner
div.z-listcell-cnt
Color and font
size
color: #2C559C; font: normal ${fontSizeM} ${fontFamilyT};font-weight:bold;
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
Naming: .z-listhead,
.z-listheader
Supported: V
background-position
CSS Specification
div.z-listbox-header tr.z-listhead Background image background-image: url(${c:encodeURL('~./zul/img/grid/s_hd.gif')});
background-color: #C7E5F1;background-repeat: repeat-x;
div.z-listbox-header
th.z-listheader
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;
th.z-listheader-sort
div.z-listheader-cnt
Background of the
content of the sort
url(${c:encodeURL('~./zul/img/sort/v_hint.gif')}); background-position: 99% center;
th.z-listheader-sort-asc
Background of the
content of the
ascendant sort
url(${c:encodeURL('~./zul/img/sort/v_asc.gif')}); background-position: 99% center;
th.z-listheader-sort-dsc
Background of the
content of the
descendant sort
url(${c:encodeURL('~./zul/img/sort/v_dsc.gif')}); background-position: 99% center;
div.z-listheader-cnt Font size of the
content
border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size:
div.z-listheader-cnt Overflow overflow: hidden
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
Naming: .z-listitem,
.z-listcell
-over -seld -focus -over-seld -disd
Supported: V ! ! ! ! !
background-position
CSS Specification
tr.z-listitem, tr.z-listitem a,
tr.z-listitem a:visited
Font size of listitem font-size: ${fontSizeM}; font-weight: normal; color: black; text-decoration: none;
tr.z-listitem
td.z-listitem-focus
Background of focused event background-image: url(${c:encodeURL('~./zul/img/focusd.png')});
tr.z-listitem-seld Background of selected event background: #b3c8e8; border: 1px solid #6f97d2;
tr.z-listitem-over Background of hovered event background: #dae7f6;
tr.z-listitem-over-seld Background of hovered and
selected event
background: #6eadff;
div.z-listcell-cnt Font size of listcell border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC};
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
Naming: .z-longbox -focus -disd
Supported: V ! !
background-position
CSS Specification
Default
99
.z-longbox Font size and
background
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;
.z-longbox-readonly,
.z-longbox-text-disd
Disabled and
read-only
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
Naming: .z-menubar-hor
Supported: V
background-position
CSS Specification
.z-menubar-hor Background
image
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')});
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
Naming: .z-menubar-ver
Supported: V
background-position
CSS Specification
.z-menubar-ver Background
image
position : relative; display: block; padding : 2px 0px; border-bottom : 1px solid #B1CBD5;
background: #CEE7F5 repeat-x 0 center; background-image:
Menu in Menubar
This is the Menu in Menubar mold for Menubar.
Source
Menu
[1]
Structure
Menu in Menubar
102
Events
Naming: .z-menu -btn-over -btn-seld -disd
Supported: V V V !
background-position
CSS Specification
.z-menubar-hor .z-menu Vertical align vertical-align: middle;
.z-menubar-hor .z-menu 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};
.z-menubar-hor .z-menu-btn 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};
.z-menu-body-text-img
.z-menu-inner-m
.z-menu-btn
Padding of menu
button with text
and image
padding-left:18px;
Menu in Menubar
103
.z-menu-body-img
.z-menu-inner-m
.z-menu-btn
Padding of menu
button with
image
padding-left:18px;
.z-menubar-hor
.z-menu-body
.z-menu-inner-l
Size of button
left
font-size:1px; height:21px; line-height:1px; width:3px;
.z-menubar-hor
.z-menu-body
.z-menu-inner-r
Size of button
right
font-size:1px; height:21px; line-height:1px; width:3px;
.z-menu-body
.z-menu-inner-m div
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
Naming: .z-menu-item -btn-over -btn-seld -disd
Supported: V V V !
background-position
CSS Specification
.z-menubar-hor .z-menu-item Vertical align vertical-align: middle;
.z-menubar-hor .z-menu-item 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};
.z-menubar-hor .z-menu-item-btn Font size -adjust:none; font-stretch:normal; font-style:normal; font-variant:normal;
font-weight:normal; line-height:normal; white-space:nowrap; font-family:
.z-menu-item-body-text-img
.z-menu-item-inner-m .z-menu-item-btn
Padding of menuitem
button with text and
image
padding-left:18px;
.z-menu-item-body-img
.z-menu-item-inner-m .z-menu-item-btn
Padding of menuitem
button with image
padding-left:12px; padding-right:0px;
.z-menubar-hor .z-menu-item-body
.z-menu-item-inner-l
Size of button left font-size:1px; height:21px; line-height:1px; width:3px;
.z-menubar-hor .z-menu-item-body
.z-menu-item-inner-r
Size of button right font-size:1px; height:21px; line-height:1px; width:3px;
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
Naming: .z-menu-popup
Supported: V
background-position
CSS Specification
z-menu-popup Background image 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')});
.z-menu-popup Font-size -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};
.z-menu-popup
.z-menu-popup-cnt
The padding and the
border of the popup
content
background:transparent none repeat scroll 0 0; border:0 none; padding:0px; margin:0px !important;
Menu in Menupopup
107
Menu in Menupopup
This is the Menu in Menupopup mold for Menupopup.
Source
Menupopup
[1]
Structure
Events
Naming: .z-menu -over -disd
Supported: V ! !
background-position
CSS Specification
Menu in Menupopup
108
.z-menu-popup-cnt
.z-menu
The outline of
menu in
menupopup
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
The outline of
menu content
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 .z-menu-img
The outline of
menu image
background-position:center center; border:0px; height:16px; margin-right:9px; padding:0;
vertical-align:top; width:16px;
.z-menu-popup-cnt
.z-menu .z-menu-cnt-img
Menu arrow
image
background:transparent no-repeat scroll right center;
background-image:url(${c:encodeURL('~./zul/img/menu/arrow.gif')});
Menuitem in Menupopup
This is the Menuitem in Menupopup mold for Menupopup.
Source
Menupopup
[1]
Structure
Menuitem in Menupopup
109
Events
Naming: .z-menu-item -over -disd
Supported: V ! !
background-position
CSS Specification
.z-menu-popup-cnt
.z-menu-item
The outline of
menuitem in
menupopup
list-style-type:none !important; margin:0 !important; display:block; padding:1px;
cursor:pointer;
.z-menu-popup-cnt
.z-menu-item
a.z-menu-item-cnt
The outline of
menuitem content
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
.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
Naming: .z-menu-separator
Supported: V
background-position
CSS Specification
Default
111
.z-menu-popup-cnt
.z-menu-separator
The outline of
menuseparator
list-style-type:none !important; margin:0 !important; display:block; padding:1px;
cursor:pointer;
.z-menu-popup-cnt
.z-menu-separator-inner
Background background-color:#E0E0E0; border-bottom:1px solid #FFFFFF; display:block;
font-size:1px; line-height:1px; margin:2px 3px; overflow:hidden; width:auto;
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
Naming: .z-paging -btn-over -btn-clk -disd
Supported: V V V !
background-position
CSS Specification
.z-paging Background
image
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:
.z-paging td, .z-paging span,
.z-paging input, .z-paging div,
.z-paging button
Font size -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:
.z-paging .z-paging-btn Font size of
paging button
cursor:pointer; font-weight:normal; white-space:nowrap; width:auto; font-family:
.z-paging-btn .z-paging-first,
.z-paging-btn .z-paging-last,
.z-paging-btn .z-paging-next,
.z-paging-btn .z-paging-prev
Size of paging
button
background-repeat:no-repeat; cursor:pointer; height:21px; width:21px; padding:0;
white-space:nowrap;
.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')});
.z-paging-btn .z-paging-next Background of
the next button
background-position:0 0;
background-image:url(${c:encodeURL('~./zul/img/paging/pg-btn.png')});
.z-paging-btn .z-paging-prev Background of
the previous
button
background-position:0 -21px;
.z-paging-btn .z-paging-last Background of
the last button
.z-paging-btn .z-paging-first Background of
the first button
.z-paging-info Position of the
information
color:#444444; position:absolute; right:8px; top:5px;
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
Naming: .z-paging-os :Hover -seld
Supported: V V V
background-position
CSS Specification
.z-paging-os Background
image
background: white; padding: 5px; zoom:1;
.z-paging-os
.z-paging-os-cnt
Background of
content
padding: 2px 3px; background-color:#C7E5F1;
background-image:url(${c:encodeURL('~./zul/img/grid/column-bg.png')});
background-repeat:repeat-x; border: 1px solid #DAE7F6; font-size: ${fontSizeS}; color: #1725A0;
font-weight: normal; text-decoration: none;
.z-paging-os
.z-paging-os-cnt:hover
Color of mouse
over
color:red
.z-paging-os
.z-paging-os-seld
Background
and font size of
selected event
font-size: ${fontSizeS}; color: white; font-weight: bold;
background-image:url(${c:encodeURL('~./zul/img/grid/paging-os-seld.gif')});
os
114
.z-paging-os
.z-paging-os-seld:hover
Color of
selected mouse
over
color: #403E39;
.z-paging-os span Font size 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
Naming: .z-panel
Supported: V
Naming: .z-panel-close
.z-panel-max
.z-panel-maxd
.z-panel-min
.z-panel-exp
-over
Supported: V V
background-position
CSS Specification
Default
116
.z-panel-header Header's color,
border, and
background
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;
.z-panel-children The border background: white; border: 1px solid #b1cbd5; border-top: 0; overflow: hidden; position:
relative;
.z-panel-tl Top left 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-tr Top right background: transparent no-repeat right -10px; background-image:
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')});
.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 Center middle border: 0; margin: 0; background: #CDF0FF; padding-top: 6px;
.z-panel-cl,
.z-panel-fl
Left of footer
and center
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')});
.z-panel-fm Middle of footer background: #CDF0FF; overflow: hidden;
.z-panel-bl Bottom left background: transparent no-repeat 0 -5px; background-image:
height: 5px; margin-right: 5px; zoom: 1;
.z-panel-br Bottom right background: transparent no-repeat right bottom; background-image:
.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;
.z-panel-exp The expand
button
.z-panel-colpsd .z-panel-exp The expand
button when
collapsed
.z-panel-close The close button background-position: 0 -48px;
Default
117
.z-panel-min The minimize
button
background-position: 0 0;
.z-panel-max The maximize
button
.z-panel-cl .z-panel-top
.z-toolbar
top toolbar
border
border-bottom:0 none; border-top:1px solid #B1CBD5;
.z-panel-body .z-panel-top
.z-toolbar, .z-panel-body
.z-panel-btm .z-toolbar
border 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
Naming: .z-popup
Supported: V
background-position
CSS Specification
Default
119
.z-popup Font and
border
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;
.z-popup
.z-popup-tl
Top left 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-tr
Top right background:transparent no-repeat scroll right -10px;
.z-popup
.z-popup-cm
Center
middle
background: #EDF6FC repeat-x 0 0px; background-image: url(${c:encodeURL('~./zul/img/popup/pp-cm.png')});
padding:4px 10px; overflow: hidden; zoom: 1;
.z-popup
.z-popup-cl
Center left background: transparent repeat-y 0 0; background-image: url(${c:encodeURL('~./zul/img/popup/pp-clr.png')});
padding-left: 6px; overflow: hidden; zoom: 1;
.z-popup
.z-popup-cr
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;
.z-popup
.z-popup-bl
Bottom left background:transparent no-repeat scroll 0 -5px;
height:5px; margin-right:5px; zoom: 1;
.z-popup
.z-popup-br
Bottom right background:transparent no-repeat scroll right -15px;
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
Naming: .z-portallayout,
.z-portalchildren
Supported: V
background-position
CSS Specification
.z-portallayout Overflow visibility: hidden; overflow: hidden; zoom: 1;
.z-portallayout-inner Overflow overflow: hidden;
.z-portalchildren Padding and margin float: left; padding: 0; margin: 0; overflow: hidden; zoom: 1;
.z-portalchildren-body Overflow overflow: hidden; zoom: 1;
.z-portalchildren-cnt Overflow 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
Naming: .z-progressmeter
Supported: V
background-position
CSS Specification
Default
123
div.z-progressmeter Background image background:#E0E8F3 url(${c:encodeURL('~./zk/img/prgmeter_bg.gif')}) repeat-x scroll 0 0 ;
border:1px solid #7FA9E4; text-align: left; height: 17px;
span.z-progressmeter-img Background image of
front
display:-moz-inline-box; display:inline-block;
background:#9CBFEE url(${c:encodeURL('~./zk/img/prgmeter.gif')}) repeat-x scroll left center;
height: 17px; font-size:0;
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
Naming: .z-radio
Supported: V
background-position
CSS Specification
.z- radio -cnt Font size 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
Naming: .z-rows,
.z-row
Supported: V
background-position
CSS Specification
div.z-row-cnt Font size border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size:
div.z-row-cnt Color color: black;
td.z-row-inner Padding padding: 2px; overflow: hidden;
tr.z-row td.z-row-inner Background color and
border
background: white; border-top: none; border-left: 1px solid white; border-right: 1px
solid #CCC; border-bottom: 1px solid #DDD;
tr.z-grid-odd td.z-row-inner,
tr.z-grid-odd
Background color of the
odd row
background: #F0FAFF;
Separator
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
Naming: .z-separator-hor
Supported: V
background-position
CSS Specification
128
.z-separator-hor,
.z-separator-hor-bar
Height height: 7px; overflow: hidden; line-height: 0pt; font-size: 0pt;
.z-separator-hor-bar Background
image
background-image: url(${c:encodeURL('~./img/dot.gif')}); background-position: center left;
background-repeat: repeat-x;
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
Naming: .z-separator-hor
Supported: V
background-position
CSS Specification
Default (Vertical)
129
.z-separator-ver,
.z-separator-ver-bar
Width display:-moz-inline-box; display: inline-block; width: 10px; overflow: hidden;
.z-separator-ver-bar Background
image
background-image: url(${c:encodeURL('~./img/dot.gif')}); background-position: top center;
background-repeat: repeat-y;
Slider
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
Naming: .z-slider-hor
Supported: V
Naming: .z-slider-hor-btn -over -drag
Supported: V V V
background-position
CSS Specification
.z-slider-hor The scroll bar
background
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-hor-center The right scroll
bar background
background-image:url(${c:encodeURL('~./zul/img/slider/slider-bg.png')});
.z-slider-hor-btn The scroll button
background
width: 14px; height: 15px; position: absolute; left: 0; top: 3px;
background-color : transparent; background-image : url(${c:
encodeURL('~./zul/img/slider/slider-square.png')});
background-repeat : no-repeat; background-position : 0 0;
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
Naming: .z-slider-ver
Supported: V
Naming: .z-slider-ver-btn -over -drag
Supported: V V V
background-position
CSS Specification
.z-slider-ver The scroll bar
background
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;
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;
encodeURL('~./zul/img/slider/slider-v-square.png')});
sphere (Horizontal)
133
sphere (Horizontal)
This is the sphere (Horizontal) mold for Slider.
Source
Slider
[1]
Structure
Events
Naming: .z-slider-sphere-hor
Supported: V
Naming: .z-slider-sphere-hor-btn -over -drag
Supported: V V V
background-position
CSS Specification
sphere (Horizontal)
134
.z-slider-sphere-hor The scroll
bar
font-size:0; height:22px; line-height:0; margin-right:7px; zoom:1;
.z-slider-sphere-hor-center The left of
scroll bar
.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
Naming: .z-slider-sphere-ver
Supported: V
Naming: .z-slider-sphere-ver-btn -over -drag
Supported: V V V
background-position
CSS Specification
.z-slider-sphere-ver The scroll bar background:transparent no-repeat scroll left 0;
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;
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;
encodeURL('~./zul/img/slider/slider-v-circle.png')});
scale
136
scale
This is the scale mold for Slider.
Source
Slider
[1]
Structure
Events
Naming: .z-slider-scale
Supported: V
Naming: .z-slider-scale-btn -over -drag
Supported: V V V
background-position
CSS Specification
scale
137
.z-slider-scale 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;
.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;
encodeURL('~./zul/img/slider/slider-scale.gif')});
.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
Naming: .z-spinner -over -btn-clk -focus -btn-over -disd
background-position
CSS Specification
.z-spinner-inp Background of
input element
solid #7F9DB9; font-family: ${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
.z-spinner-text-invalid Background of
invalidated
.z-spinner-readonly,
.z-spinner-text-disd
Background of
disabled and read
only
.z-spinner .z-spinner-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;
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
Naming: .z-splitter-ver -btn-t:hover,
-btn-b:hover,
-btn-visi (IE Only)
Supported: V !
background-position
CSS Specification
.z-splitter-ver Background image
of splittable
background-image:url(${c:encodeURL('~./zul/img/splt/splt-v.png')}); background-position: top
center; font-size:0; max-height: 8px; height: 8px;
.z-splitter-ver-outer
.z-splitter-ver-outer-td
Background image
of non-splittable
background-image:url(${c:encodeURL('~./zul/img/splt/splt-v-ns.png')}); background-repeat:
repeat-x; max-height: 8px; height: 8px; background-position: bottom left;
.z-splitter-ver-ns Background
position of
non-splittable
background-image: none; background-position: none;
.z-splitter-ver-btn-t Button icon of top
side
width: 50px; min-height: 6px; height: 6px; background-image:
url(${c:encodeURL('~./zul/img/splt/colps-t.png')});
Default (Vertical)
141
.z-splitter-ver-btn-b Button icon of
bottom side
url(${c:encodeURL('~./zul/img/splt/colps-b.png')});
This is the Default (Horizontal) mold for Splitter.
Source
Splitter
[1]
Structure

Events
142
Naming: .z-splitter-hor -btn-l:hover,
-btn-r:hover,
-btn-visi (IE Only)
Supported: V !
background-position
CSS Specification
.z-splitter-hor Background image of
splittable
background-image:url(${c:encodeURL('~./zul/img/splt/splt-h.png')}); background-position: center left;
font-size:0; max-width: 8px; width: 8px;
.z-splitter-hor-outer Background image of
non-splittable
background-image:url(${c:encodeURL('~./zul/img/splt/splt-h-ns.png')}); background-repeat: repeat-y;
max-width: 8px; width: 8px; background-position: top right;
.z-splitter-hor-ns Background position
of non-splittable
background-image: none; background-position: none;
.z-splitter-hor-btn-l Button icon of left
side
url(${c:encodeURL('~./zul/img/splt/colps-l.png')});
.z-splitter-hor-btn-r Button icon of right
side
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
Naming: .z-splitter-os-ver -btn-t:hover,
-btn-b:hover,
-btn-visi (IE Only)
Supported: V !
background-position
CSS Specification
.z-splitter-os-ver Height font-size:0; max-height: 8px; height: 8px;
.z-splitter-os-ver-outer
.z-splitter-os-ver-outer-td
Background
image of
splittable
background-image:url(${c:encodeURL('~./zul/img/splt/splt-v.gif')}); background-repeat:
repeat-x; max-height: 8px; height: 8px; background-position: bottom left;
.z-splitter-os-ver-ns Styling of
non-splittable
font-size:0; max-height: 8px; height: 8px;
.z-splitter-os-ver-btn-t Button icon of top
side
url(${c:encodeURL('~./zul/img/splt/colps-t-os.gif')});
.z-splitter-os-ver-btn-b Button icon of
bottom side
url(${c:encodeURL('~./zul/img/splt/colps-b-os.gif')});
Default (OS-Horizontal)
145
This is the efault (OS-Horizontal) mold for Splitter.
Source
Splitter
[1]
Structure

Events
Naming: .z-splitter-os-hor -btn-l:hover,
-btn-r:hover,
-btn-visi (IE Only)
Supported: V !
background-position
146
CSS Specification
.z-splitter-os-hor Height font-size:0; max-width: 8px; width: 8px;
.z-splitter-os-hor-outer Background image
of splittable
background-image:url(${c:encodeURL('~./zul/img/splt/splt-h.gif')}); background-repeat: repeat-y;
max-width: 8px; width: 8px; background-position: top right;
.z-splitter-os-hor-ns Styling of
non-splittable
font-size:0; max-width: 8px; width: 8px;
.z-splitter-os-hor-btn-l Button icon of left
side
url(${c:encodeURL('~./zul/img/splt/colps-l-os.gif')});
.z-splitter-os-hor-btn-r Button icon of right
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
Naming: .z-tabbox
Supported: V
background-position
CSS Specification
.z-tabbox Overflow overflow: hidden; visibility: hidden;
Structure
149
Events
Naming: .z-tabs
Supported: V
Naming: .z-tabs-right-scroll,
.z-tabs-left-scroll
:hover
Supported: V V
background-position
CSS Specification
.z-tabs The tabs overflow: hidden; background: transparent none repeat scroll 0 0; border: 0; padding: 0; margin: 0; position:
relative;
.z-tabs-cnt The tabs'
background
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;
.z-tabs-header-scroll The space for
scroll button
margin-left: 18px; margin-right: 18px;
.z-tabs-header The whole tabs width: 100%; margin: 0px; position: relative; overflow: hidden; zoom: 1;
.z-tabs-left-scroll 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;
.z-tabs-right-scroll Scroll right
button
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;
150
Structure
Events
Naming: .z-tab :hover -seld -disd-seld -disd
Supported: V V V ! !
background-position
CSS Specification
151
.z-tab-hl Left of tab 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;
.z-tab-hr Right of tab background: transparent no-repeat scroll right -128px; background-image:
url(${c:encodeURL('~./zul/img/tab/tab-corner.png')}); padding-right: 10px; display: block;
.z-tab-hm Middle of tab 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')});
.z-tab .z-tab-text Color and font of tab color: #416AA3; cursor: pointer; font-style: normal; font-family: ${fontFamilyT}; font-size:
${fontSizeM}; font-size-adjust: none; padding:4px 0 4px; white-space: nowrap;
.z-tab-seld
.z-tab-text
Color and font of tab
when it's choiced
color: #0F3B82; cursor: default; font-weight: bold; font-style: normal; font-family: ${fontFamilyT};
font-size: ${fontSizeM}; white-space: nowrap; padding:4px 0 5px;
.z-tab-hm-close The space when tab
is closable
padding-right: 10px;
z-tab-close The close button
background and size
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
Naming: .z-tabpanels, .z-tabpanel
Supported: V
background-position
CSS Specification
.z-tabpanel The tabpanel padding: 5px; zoom: 1;
.z-tabpanel-cnt The content of tabpanel 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
Naming: .z-tabbox-ver
Supported: V
background-position
Default (Vertical)
154
CSS Specification
.z-tabbox-ver Overflow overflow: hidden; visibility: hidden;
Structure
Default (Vertical)
155
Events
Naming: .z-tabs-ver
Supported: V
Naming: .z-tabs-ver-right-scroll,
.z-tabs-ver-left-scroll
:hover
Supported: V V
background-position
CSS Specification
.z-tabs-ver The vertical tabs
background
overflow: hidden; float:left; background: transparent none repeat scroll 0 0; border: 0; padding:
0; margin: 0; position: relative;
.z-tabs-ver-scroll The border and
background of tabs
when scrolling is
enabled
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
.z-tabs-ver-header
The background of
vertical tabs' header
background: none; zoom: 1; overflow: hidden; position: relative;
.z-tabs-ver-scroll
.z-tabs-ver-header
The background of
vertical tabs' header
when scrolling is
enabled
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 The visible part of
tabs' content
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;
.z-tabs-ver-down-scroll The scroll down
button
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;
.z-tabs-ver-up-scroll The scroll up button 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;
Default (Vertical)
156
Structure
Events
Naming: .z-tab-ver :hover -seld -disd-seld -disd
Supported: V V V ! !
background-position
CSS Specification
Default (Vertical)
157
.z-tab-ver-hl The left of tab 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;
.z-tab-ver-hl
.z-tab-ver-hr
The right of tab padding-bottom: 10px; background: transparent no-repeat scroll -512px bottom; background-image:
url(${c:encodeURL('~./zul/img/tab/tab-v-corner.png')});
.z-tab-ver
.z-tab-ver-hm
The middle of tab 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;
.z-tab-ver
.z-tab-ver-text
Font and color of
tab's text
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;
.z-tab-ver-seld
.z-tab-ver-text
Font and color of
tab's text when
choiced
color: #0F3B82; cursor: default; font-weight: bold; white-space: nowrap;
.z-tab-ver-close The close button of
tab
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
Naming: .z-tabpanels-ver, .z-tabpanel-ver
Supported: V
background-position
CSS Specification
.z-tabbox-ver .z-tabpanels-ver The tabpanels border border-color: #7EAAC6; border-width: 1px; border-style: solid;
.z-tabbox-ver .z-tabpanel-ver The tabpanel border-left: none; padding: 5px; zoom: 1;
accordion
159
accordion
This is the accordion mold for Tabbox.
Source
Tabbox
[1]
Structure
Events
Naming: .z-tabbox-accordion,
.z-tabpanels-accordion,
.z-tabpanel-accordion-outer
Supported: V
background-position
accordion
160
CSS Specification
.z-tabbox-accordion Overflow overflow: hidden; visibility: hidden;
.z-tabpanel-accordion-outer Position position: relative;
Structure
Events
Naming: .z-tab-accordion -seld -disd-seld -disd
Supported: V ! ! !
background-position
Naming: .z-tab-accordion-close :hover
Supported: V V
background-position
accordion
161
CSS Specification
.z-tab-accordion-header The cursor
type
cursor: pointer; position: relative; zoom: 1;
.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
background: transparent no-repeat scroll 0 0; background-image:
url(${c:encodeURL('~./zul/img/tab/accd-hl.png')}); padding-left: 6px; zoom: 1;
.z-tab-accordion-hr Right
background
background: transparent no-repeat scroll right 0; background-image:
url(${c:encodeURL('~./zul/img/tab/accd-hr.png')}); padding-right: 6px; zoom: 1;
.z-tab-accordion-hm Middle
background
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;
.z-tab-accordion-text The header's
text of tab
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;
.z-tab-accordion-close The close
button of tab
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);
accordion-lite
162
accordion-lite
This is the accordion-lite mold for Tabbox.
Source
Tabbox
[1]
Structure
Events
Naming: .z-tabbox-accordion-lite,
.z-tabpanels-accordion-lite,
.z-tabpanel-accordion-lite-outer
Supported: V
background-position
CSS Specification
accordion-lite
163
.z-tabbox-accordion-lite Overflow overflow: hidden; visibility: hidden;
.z-tabpanels-accordion-lite Border border-top: 1px solid #99BBE8; border-right: 1px solid #99BBE8; border-left: 1px
solid #99BBE8; position: relative;
.z-tabpanel-accordion-lite-outer Position position: relative;
.z-tabbox-accordion-lite
.z-tabpanel-accordion-lite
Border border-bottom:1px solid #99BBE8; padding:5px; zoom: 1
Structure
Events
Naming: .z-tab-accordion-lite -seld -disd-seld -disd
Supported: V ! ! !
background-position
Naming: .z-tab-accordion-lite-close :hover
Supported: V V
background-position
accordion-lite
164
CSS Specification
.z-tab-accordion-lite-header Position overflow:hidden; zoom:1; cursor:pointer; position:relative; border: 1px solid #99BBE8;
border-top-width:0; border-right-width:0; border-left-width:0;
.z-tab-accordion-lite-text Font size cursor:pointer; color:#373737; font-family: ${fontFamilyT}; font-size: ${fontSizeM};
font-style:normal; font-variant:normal; line-height:15px; text-decoration:none; padding-right:30px;
.z-tab-accordion-lite-tl Top left
background
Zoom:1; padding-left:6px; line-height:0; display:block; text-decoration:none; text-decoration:none;
background:transparent url(${c:encodeURL('~./zul/img/tab2/accdlite-all.png')}) repeat-x scroll 0
-9px;
.z-tab-accordion-lite-tr Top right
background
padding-right:6px; display:block; background:transparent
url(${c:encodeURL('~./zul/img/tab2/accdlite-all.png')}) repeat-x scroll 0 -9px;
.z-tab-accordion-lite-tm Top middle
background
display:block; padding:4px 0 3px 0; overflow:hidden; background:transparent
url(${c:encodeURL('~./zul/img/tab2/accdlite-all.png')}) repeat-x scroll 0 -9px;
.z-tab-accordion-lite-close Background of
close icon
background-image: url(${c:encodeURL('~./zul/img/tab2/tab-close-off.png')});
background-repeat:no-repeat; cursor:pointer; height:16px; position:absolute; right:10px; top:3px;
width:17px; z-index:5;
Tablelayout
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
Naming: .z-tablelayout,
.z-tablechildren
Supported: V
background-position
}
CSS Specification
td.z-tablechildren Align 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
Naming: .z-textbox -focus -disd
Supported: V ! !
background-position
CSS Specification
Default
167
.z-textbox Font size and
background
solid #86A4BE; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
.z-textbox-text-invalid Invalid event background: #FFF url(${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')}) repeat-x 0 0; border:
1px solid #DD7870;
.z-textbox-readonly,
.z-textbox-text-disd
Disabled and
read-only
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
Naming: .z-timebox -over -btn-clk -focus -btn-over -disd
background-position
CSS Specification
.z-timebox-inp Background of
input element
solid #86A4BE; font-family: ${fontFamilyC};font-size: ${fontSizeM}; font-weight: normal;
.z-timebox-text-invalid Background of
invalidated
.z-timebox-readonly,
.z-timebox-text-disd
Background of
disabled and read
only
.z-timebox .z-timebox-btn 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 #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
Naming: .z-toolbar
Supported: V
background-position
CSS Specification
.z-toolbar Background
image
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;
.z-toolbar-body,
.z-toolbar-body span
Font size font-size: ${fontSizeS};
.z-toolbar a, .z-toolbar
a:visited, .z-toolbar
a:hover
Font size of
A tag
font-family: ${fontFamilyT}; font-size: ${fontSizeS}; font-weight: normal; color: black; background:
#D0DEF0; border: 1px solid #D0DEF0; text-decoration: none;
.z-toolbar-start Align to start float: left; clear: none;
.z-toolbar-center Align to
center
margin: 0 auto;
.z-toolbar-end Align to end float: right; clear: none;
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
Naming: .z-toolbar
Supported: V
background-position
CSS Specification
.z-toolbar Background
image
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;
.z-toolbar-body,
.z-toolbar-body span
Font size font-size: ${fontSizeS};
.z-toolbar a, .z-toolbar
a:visited, .z-toolbar
a:hover
Font size of
A tag
font-family: ${fontFamilyT}; font-size: ${fontSizeS}; font-weight: normal; color: black; background:
#D0DEF0; border: 1px solid #D0DEF0; text-decoration: none;
.z-toolbar-start Align to start float: left; clear: none;
.z-toolbar-center Align to
center
margin: 0 auto;
.z-toolbar-end Align to end float: right; clear: none;
Toolbarbutton
173
Toolbarbutton
Component Reference: Toolbarbutton
Toolbarbutton is composed of HTML Div tag.
Version History
5.0 January 2010 Change to use HTML Div.
Default
This is the Default mold for Toolbarbutton.
Source
Toolbarbutton
[1]
Structure
Default
174
Events
Naming: .z-toolbarbutton -over -disd
Supported: V V !
background-position
CSS Specification
.z-toolbarbutton-cnt Font size padding: 2px 2px; position: relative; zoom: 1; font-family: ${fontFamilyT}; font-size: ${fontSizeS};
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
Naming: .z-tree
Supported: V
background-position
CSS Specification
div.z-tree Background color background: #DAE7F6; border: 1px solid #7F9DB9; overflow:
hidden; zoom: 1;
div.z-tree-header, div.z-tree-header tr,
div.z-tree-footer
div.z-tree-body Background color of the
body
position: relative;
div.z-tree-footer Background color of the
footer
paging
This is the paging mold for Tree.
Source
Tree
[3]
Structure
paging
177
Events
Naming: .z-tree
Supported: V
background-position
CSS Specification
div.z- tree -pgi-b Border of bottom paging border-top: 1px solid #AAB; overflow: hidden;
div.z-tree-pgi-t Border of top paging border-bottom: 1px solid #AAB; overflow: hidden;
Treechildren
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
Naming: .z-treechildren
Supported: V
background-position
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
Naming: .z-treecols,
.z-treecol
Supported: V
background-position
CSS Specification
Default
181
div.z-tree-header
tr.z-treecols
Background image 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 size of the
content
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
Naming: .z-treefoot,
.z-treefooter
Supported: V
background-position
CSS Specification
div.z-tree-footer
td.z-treefooter
Font size cursor: pointer; padding: 0 2px; font-size: ${fontSizeM}; font-weight: normal; overflow:
hidden;
div.z-treefooter-cnt Font size of the
content
border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size: ${fontSizeM};
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
Naming: - - - - -
Supported: ! ! ! ! ! !
background-position
CSS Specification
tr.z-tree-row, tr.z-tree-row a,
tr.z-tree-row a:visited
Font size of treerow font-size: ${fontSizeM}; font-weight: normal; color: black; text-decoration:
none;
tr.z-tree-row td.z-tree-row-focus Background of focused
event
background-image: url(${c:encodeURL('~./zul/img/focusd.png')});
tr.z-tree-row-seld Background of selected
event
background: #bcd2ef; border: 1px solid #6f97d2;
tr.z-tree-row-over Background of hovered
event
background: #dae7f6;
tr.z-tree-row-over-seld Background of hovered
and selected event
background: #6eadff;
div.z-tree-body td.z-tree-cell Font size of treecell cursor: pointer; padding: 0 2px; font-size: ${fontSizeM}; font-weight:
normal; overflow: hidden;
div.z-tree-cell-cnt Font size of the content
of treecell
border: 0; margin: 0; padding: 0; font-family: ${fontFamilyC}; font-size:
Default
185
span.z-tree-ico, span.z-tree-line,
span.checkmark-spacer
Size of tree icon width: 18px; min-height: 18px; height: 100%; display:-moz-inline-box;
vertical-align:top; display:inline-block;
span.z-tree-root-open,
span.z-tree-tee-open,
span.z-tree-last-open,
span.z-tree-root-close,
span.z-tree-tee-close,
span.z-tree-last-close
Background image of
tree open and close
background-image: url(${c:encodeURL('~./zul/img/tree/tree_btn.gif')});
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
Naming: z-vlayout
Supported: V
background-position
Default
187
CSS Specification
.z-vlayout Overflow hidden
.z-vlayout-inner Position 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
Naming: .z-window-embedded
Supported: V
background-position
Naming: .z-window-embedded-close
.z-window-embedded-max
.z-window-embedded-maxd
.z-window-embedded-mid
-over
Supported: V V
background-position
Default (embedded)
189
CSS Specification
.z-window-embedded-tl Top Left background: transparent no-repeat 0 top; background-image:
url(${c:encodeURL('~./zul/img/wnd/wnd-corner.png')});
.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;
.z-window-embedded-header The color and
font size of the
header
overflow: hidden; zoom: 1; color: #222222; padding-bottom: 4px; font-family:
${fontFamilyC}; font-size: ${fontSizeM}; font-weight: normal;
.z-window-embedded-hl The left
background of
header
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 The right
background of
header
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 The middle
background of
header
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
window
margin: 0; padding: 3px; border: 1px solid #538BA2;
.z-window-embedded-cnt-noborder The content of the
window without
border
border: 0;overflow: hidden;zoom: 1;
.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
.z-window-embedded-max The maximize
button
.z-window-embedded-close The close button background-position: 0 -48px;
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-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-color:#B2A4F2;
}
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-color:#545E6B;
}
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
Naming: .z-window-pop
Supported: V
background-position
Naming: .z-window-pop-close
.z-window-pop-max
.z-window-pop-maxd
.z-window-pop-min
-over
Supported: V V
background-position
CSS Specification
.z-window-popup-tl Top Left background: transparent no-repeat 0 top; background-image:
url(${c:encodeURL('~./zul/img/wnd/wnd-pop-corner.png')});
.z-window-popup-tr Top Right background: transparent no-repeat right -10px; background-image:
url(${c:encodeURL('~./zul/img/wnd/wnd-pop-corner.png')});
.z-window-popup-header The color and font
size of the header
overflow: hidden; zoom: 1; color: #FFFFFF; padding-bottom: 4px; font-family:
.z-window-popup-hl The left background
of header
url(${c:encodeURL('~./zul/img/wnd/wnd-pop-hl.png')}); padding-left: 6px; zoom: 1;
.z-window-popup-hr The right background
of header
url(${c:encodeURL('~./zul/img/wnd/wnd-pop-hr.png')}); padding-right: 6px; zoom: 1;
.z-window-popup-hm The middle
background of header
url(${c:encodeURL('~./zul/img/wnd/wnd-pop-hm.png')}); overflow: hidden; zoom: 1;
.z-window-popup-cnt The content of the
window
margin: 0; padding: 2px; background: white; overflow: hidden; zoom: 1; border: 1px solid
#2c70a9;
.z-window-popup-cnt-noborder The content of the
window without
border
border: 0; overflow: hidden; zoom: 1; margin: 0; padding: 1px; background: white;
.z-window-popup-icon The background
image of the tool
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 The minimize button background-position: 0 0;
.z-window-popup-max The maximize button background-position: 0 -16px;
Default (popup)
193
.z-window-popup-close The close button background-position: 0 -48px;
Default (overlapped, highlighted, and modal)
This is the Default (overlapped, highlighted, and modal) mold for Window.
Source
Window
[1]
Structure
194
Events
Naming: .z-window-overlapped,
.z-window-modal,
.z-window-highlight
Supported: V
background-position
Naming: .z-window-*-close
.z-window-*-max
.z-window-*-maxd
.z-window-*-mid
-over
Supported: V V
background-position
CSS Specification
.z-window-overlapped-tl Top Left background: transparent no-repeat 0 top; background-image:
url(${c:encodeURL('~./zul/img/wnd/wnd-ol-corner.png')});
.z-window-overlapped-tr Top Right background: transparent no-repeat right -10px; background-image:
.z-window-overlapped-header The color and font
size of the header
overflow: hidden; zoom: 1; color: #222222; padding-bottom: 4px; font-family:
.z-window-overlapped-hl The left
background of
header
url(${c:encodeURL('~./zul/img/wnd/wnd-ol-hl.png')}); padding-left: 6px; zoom: 1;
.z-window-overlapped-hr The right
background of
header
url(${c:encodeURL('~./zul/img/wnd/wnd-ol-hr.png')}); padding-right: 6px; zoom: 1;
.z-window-overlapped-hm The middle
background of
header
url(${c:encodeURL('~./zul/img/wnd/wnd-ol-hm.png')}); overflow: hidden; zoom: 1;
.z-window-overlapped-cnt The content of the
window
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
.z-window-overlapped-cl Center left background: transparent repeat-y 0 0; background-image:
url(${c:encodeURL('~./zul/img/wnd/wnd-ol-clr.png')}); padding-left: 6px; zoom: 1;
.z-window-overlapped-cr Center right background: transparent repeat-y right 0; background-image:
url(${c:encodeURL('~./zul/img/wnd/wnd-ol-clr.png')}); padding-right: 6px; zoom: 1;
.z-window-overlapped-cm Center middle padding: 0; margin: 0; border: 1px solid #0B5CA0; background: #5EABDB;
.z-window-overlapped-bl Bottom left 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;
.z-window-overlapped-br Bottom right background: transparent no-repeat right bottom; background-image:
.z-window-overlapped-icon The background
image of the tool
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
.z-window-overlapped-max The maximize
button
.z-window-overlapped-close The close button background-position: 0 -48px;
Loading
196
Loading
This is the Default mold for Loading.
Source
Loading
[1]
Structure
Loading
Processing
Events
Naming:
Supported:
background-position
Loading
197
CSS Specification
.z-loading Background and
border
background-color: #6eadff; cursor: wait;
white-space: nowrap;
padding:3px;
border: 1px solid #83B5F7;
.z-loading-indicator Inner part and text background-color: #FFFFFF; color: #102B6D;
border:1px solid #83B5F7;
white-space: nowrap;
padding:6px;
.z-loading-icon The loading icon background: transparent no-repeat center; background-image:
url(${c:encodeURL('~./zk/img/progress2.gif')});
height: 16px;
width: 16px;
.z-loading Font size of the
content
font-family: ${fontFamilyT};
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
198
url(${c:encodeURL('~./zk/img/progress3.gif')});
}
</style>
</zk>
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, Jimmyshiau, 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
200
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: Benbai, 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
201
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
202
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
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:Calendar1.PNG Source: http://new.zkoss.org/index.php?title=File:Calendar1.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: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
204
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:Menuitem-in-menubar1.jpg Source: http://new.zkoss.org/index.php?title=File:Menuitem-in-menubar1.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: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
205
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-hor1.jpg Source: http://new.zkoss.org/index.php?title=File:Splitter-hor1.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-hor1.jpg Source: http://new.zkoss.org/index.php?title=File:Splitter-os-hor1.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: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-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
206
Image:Window-overlapped1.jpg Source: http://new.zkoss.org/index.php?title=File:Window-overlapped1.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

ZK 6.5.4 Style Guide PDF

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

ZK 6.5.4 Style Guide PDF

Caricato da

Copyright:

Formati disponibili

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

Potrebbero piacerti anche