Checkbox"
From Documentation
Charlesqiu (talk | contribs) |
|||
(21 intermediate revisions by 4 users not shown) | |||
Line 3: | Line 3: | ||
= Checkbox = | = Checkbox = | ||
− | *Demonstration: [http://www.zkoss.org/zkdemo/ | + | *Demonstration: [http://www.zkoss.org/zkdemo/input/checkbox Checkbox] |
*Java API: <javadoc>org.zkoss.zul.Checkbox</javadoc> | *Java API: <javadoc>org.zkoss.zul.Checkbox</javadoc> | ||
*JavaScript API: <javadoc directory="jsdoc">zul.wgt.Checkbox</javadoc> | *JavaScript API: <javadoc directory="jsdoc">zul.wgt.Checkbox</javadoc> | ||
+ | *Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Checkbox | Checkbox]] | ||
= Employment/Purpose = | = Employment/Purpose = | ||
Line 31: | Line 32: | ||
</source> | </source> | ||
− | = | + | = Mold = |
− | + | [ Since 8.6.0 ] | |
− | + | ||
− | + | There are two additional molds for Checkbox: switch and toggle, you can customize the mold in css by overriding class. | |
− | + | <source language="xml"> | |
− | + | <checkbox mold="switch" /> | |
− | + | <checkbox mold="toggle" /> | |
+ | </source> | ||
+ | |||
+ | == switch == | ||
+ | Default: | ||
+ | |||
+ | [[File:Switch-off.png]] [[File:Switch-on.png]] | ||
+ | |||
+ | Customized in CSS: | ||
+ | [[File:Switch-off-customized.png]] [[File:Switch-on-customized.png]] | ||
+ | <source language="css"> | ||
+ | .z-checkbox-switch-off > .z-checkbox-mold { | ||
+ | background-color: red; | ||
+ | } | ||
+ | .z-checkbox-switch-on > .z-checkbox-mold { | ||
+ | background-color: green; | ||
+ | } | ||
+ | .z-checkbox-switch-off > .z-checkbox-mold:before { | ||
+ | background-color: black; | ||
+ | } | ||
+ | .z-checkbox-switch-on > .z-checkbox-mold:before { | ||
+ | background-color: white; | ||
+ | } | ||
+ | </source> | ||
− | + | == toggle == | |
+ | Default: | ||
− | + | [[File:Toggle-off.png]] [[File:Toggle-on.png]] | |
− | |||
− | |||
+ | Customized in CSS: | ||
− | < | + | [[File:Toggle-off-customized.png]] [[File:Toggle-on-customized.png]] |
+ | <source language="css"> | ||
+ | .z-checkbox-toggle-off > .z-checkbox-mold { | ||
+ | background-color: red; | ||
+ | } | ||
+ | .z-checkbox-toggle-on > .z-checkbox-mold { | ||
+ | background-color: green; | ||
+ | } | ||
+ | </source> | ||
− | + | = Indeterminate = | |
− | + | [ Since 8.6.0 ] | |
− | |||
+ | Indeterminate is a state that is neither checked nor unchecked. | ||
− | + | Note: changing indeterminate will not affect checked state, but changing checked will set indeterminate to false. | |
− | + | [[File:Indeterminate.png]] | |
− | |||
− | |||
+ | <source language="xml"> | ||
+ | <checkbox indeterminate="true"/> | ||
+ | </source> | ||
− | + | =Supported Events= | |
+ | {| border="1" | width="100%" | ||
+ | ! <center>Name</center> | ||
+ | ! <center>Event Type</center> | ||
+ | |- | ||
+ | | <center><tt>onFocus</tt></center> | ||
+ | | '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc> | ||
+ | Denotes when a component gets the focus. | ||
+ | |- | ||
+ | | <center><tt>onBlur</tt></center> | ||
+ | | '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc> | ||
+ | Denotes when a component loses the focus. | ||
|- | |- | ||
| <center>onCheck</center> | | <center>onCheck</center> | ||
− | | <javadoc>org.zkoss.zk.ui.event.CheckEvent</javadoc> | + | | '''Event:''' <javadoc>org.zkoss.zk.ui.event.CheckEvent</javadoc> |
− | + | Denotes when a component is checked or unchecked. | |
− | |||
|} | |} | ||
+ | *Inherited Supported Events: [[ZK_Component_Reference/Base_Components/LabelImageElement#Supported_Events | LabelImageElement]] | ||
=Supported Children= | =Supported Children= | ||
− | * | + | *None |
− | =Use | + | =Use Cases= |
{| border='1px' | width="100%" | {| border='1px' | width="100%" | ||
! Version !! Description !! Example Location | ! Version !! Description !! Example Location | ||
|- | |- | ||
− | | | + | | |
| | | | ||
| | | | ||
Line 86: | Line 130: | ||
=Version History= | =Version History= | ||
− | + | {{LastUpdated}} | |
{| border='1px' | width="100%" | {| border='1px' | width="100%" | ||
! Version !! Date !! Content | ! Version !! Date !! Content | ||
|- | |- | ||
− | | | + | | |
− | | | + | | |
− | | | + | | |
|} | |} | ||
{{ZKComponentReferencePageFooter}} | {{ZKComponentReferencePageFooter}} |
Revision as of 07:54, 29 October 2018
Checkbox
Employment/Purpose
A checkbox.
Example
<window title="Checkbox demo" border="normal" width="350px">
<checkbox id="apple" label="Apple" onCheck="doChecked()" />
<checkbox id="orange" label="Orange" onCheck="doChecked()" />
<checkbox id="banana" label="Banana" onCheck="doChecked()" />
<hbox>
You have selected :
<label id="fruit2" />
</hbox>
<zscript> void doChecked() { fruit2.value = (apple.isChecked() ?
apple.label+' ' : "")
+ (orange.isChecked() ? orange.label+' ' : "")
+ (banana.isChecked() ? banana.label+' ' : "");
}
</zscript>
</window>
Mold
[ Since 8.6.0 ]
There are two additional molds for Checkbox: switch and toggle, you can customize the mold in css by overriding class.
<checkbox mold="switch" />
<checkbox mold="toggle" />
switch
Default:
Customized in CSS:
.z-checkbox-switch-off > .z-checkbox-mold {
background-color: red;
}
.z-checkbox-switch-on > .z-checkbox-mold {
background-color: green;
}
.z-checkbox-switch-off > .z-checkbox-mold:before {
background-color: black;
}
.z-checkbox-switch-on > .z-checkbox-mold:before {
background-color: white;
}
toggle
Default:
Customized in CSS:
.z-checkbox-toggle-off > .z-checkbox-mold {
background-color: red;
}
.z-checkbox-toggle-on > .z-checkbox-mold {
background-color: green;
}
Indeterminate
[ Since 8.6.0 ]
Indeterminate is a state that is neither checked nor unchecked.
Note: changing indeterminate will not affect checked state, but changing checked will set indeterminate to false.
<checkbox indeterminate="true"/>
Supported Events
Event: Event
Denotes when a component gets the focus. | |
Event: Event
Denotes when a component loses the focus. | |
Event: CheckEvent
Denotes when a component is checked or unchecked. |
- Inherited Supported Events: LabelImageElement
Supported Children
*None
Use Cases
Version | Description | Example Location |
---|---|---|
Version History
Version | Date | Content |
---|---|---|