Checkbox"
From Documentation
Charlesqiu (talk | contribs) |
|||
(27 intermediate revisions by 5 users not shown) | |||
Line 3: | Line 3: | ||
= Checkbox = | = Checkbox = | ||
− | *Demonstration: | + | *Demonstration: [http://www.zkoss.org/zkdemo/input/checkbox Checkbox] |
− | *Java API: <javadoc>org.zkoss.zul. | + | *Java API: <javadoc>org.zkoss.zul.Checkbox</javadoc> |
− | *JavaScript API: <javadoc directory="jsdoc">zul. | + | *JavaScript API: <javadoc directory="jsdoc">zul.wgt.Checkbox</javadoc> |
+ | *Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Checkbox | Checkbox]] | ||
= Employment/Purpose = | = Employment/Purpose = | ||
− | + | A checkbox. | |
− | |||
+ | = Example = | ||
+ | [[Image:ZKComRef_Checkbox_Example.png]] | ||
+ | |||
+ | <source lang="xml" > | ||
+ | <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> | ||
+ | </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 | + | =Supported Events= |
{| border="1" | width="100%" | {| border="1" | width="100%" | ||
Line 25: | Line 101: | ||
! <center>Event Type</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> | ||
+ | | '''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 44: | 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 |
---|---|---|