Button

Button
Prev	2. XUL Components	Next

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

Note:

The CSS source of Button from SVN

Mold: Default

Structure:

Overview

Events:

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

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

CSS Specification:

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

Example:

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

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

Mold: os

Structure:

Overview

Events:

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

CSS Specification:

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

Calendar

Calendar is stuck by Javascript.

Source:

The CSS source of Calendar from SVN

Mold: Default

Structure:

Overview

Events:

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

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

CSS Specification:

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

Prev	Up	Next
Box	Home	Caption