Checkbox"

From Documentation
(26 intermediate revisions by 5 users not shown)
Line 3: Line 3:
 
= Checkbox =
 
= Checkbox =
  
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#f7 Checkbox]
+
*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 =
Space is a Separator with the orient default to "horizontal".
+
A checkbox.
In other words, <space> is equivalent to <separator orient="horizontal">
 
  
 +
= 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+' ' : &quot;&quot;)
 +
                    + (orange.isChecked() ? orange.label+' ' : &quot;&quot;)
 +
                    + (banana.isChecked() ? banana.label+' ' : &quot;&quot;);
 +
            }
 +
        </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:
  
= Example =
+
[[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=
+
=Supported Events=
  
 
{| border="1" | width="100%"
 
{| border="1" | width="100%"
Line 25: Line 101:
 
! <center>Event Type</center>
 
! <center>Event Type</center>
 
|-
 
|-
| None
+
| <center><tt>onFocus</tt></center>
| None
+
| '''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=
  
  *ALL
+
  *None
  
=Use cases=
+
=Use Cases=
  
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
| 5.0+
+
| &nbsp;
 
| &nbsp;
 
| &nbsp;
 
| &nbsp;
 
| &nbsp;
Line 44: Line 130:
  
 
=Version History=
 
=Version History=
 
+
{{LastUpdated}}
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
| 5.x.x
+
| &nbsp;
| x/x/20xx
+
| &nbsp;
| Initialization
+
| &nbsp;
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Revision as of 07:54, 29 October 2018

Checkbox

Employment/Purpose

A checkbox.

Example

ZKComRef Checkbox Example.png

<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+' ' : &quot;&quot;) 
                     + (orange.isChecked() ? orange.label+' ' : &quot;&quot;) 
                     + (banana.isChecked() ? banana.label+' ' : &quot;&quot;);
             }
         </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:

Switch-off.png Switch-on.png

Customized in CSS:

Switch-off-customized.png Switch-on-customized.png

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

Toggle-off.png Toggle-on.png

Customized in CSS:

Toggle-off-customized.png Toggle-on-customized.png

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

Indeterminate.png

    <checkbox indeterminate="true"/>

Supported Events

Name
Event Type
onFocus
Event: Event

Denotes when a component gets the focus.

onBlur
Event: Event

Denotes when a component loses the focus.

onCheck
Event: CheckEvent

Denotes when a component is checked or unchecked.

Supported Children

*None

Use Cases

Version Description Example Location
     

Version History

Last Update : 2018/10/29


Version Date Content
     



Last Update : 2018/10/29

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.