Checkbox"

From Documentation
 
(38 intermediate revisions by 7 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 =
Line 23: Line 24:
 
</hbox>
 
</hbox>
 
<zscript> void doChecked() { fruit2.value = (apple.isChecked() ?
 
<zscript> void doChecked() { fruit2.value = (apple.isChecked() ?
apple.label+' ' : &quot;&quot;)  
+
apple.label+' ' : "")  
                     + (orange.isChecked() ? orange.label+' ' : &quot;&quot;)  
+
                     + (orange.isChecked() ? orange.label+' ' : "")  
                     + (banana.isChecked() ? banana.label+' ' : &quot;&quot;);
+
                     + (banana.isChecked() ? banana.label+' ' : "");
 
             }
 
             }
 
         </zscript>
 
         </zscript>
Line 31: Line 32:
 
</source>
 
</source>
  
=Supported events=
+
= Mold =
  
{| border="1" | width="100%"
+
{{versionSince| 8.6.0}} There are two additional molds for Checkbox: switch and toggle, you can customize the mold in css by overriding class.
! <center>Name</center>
+
<source lang="xml">
! <center>Event Type</center>
+
  <checkbox mold="switch" />
|-
+
  <checkbox mold="toggle" />
| <center><tt>onRightClick</tt></center>
+
</source>
|<javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>
+
 
 +
== switch ==
 +
Default:
 +
 
 +
[[File:Switch-off.png]] [[File:Switch-on.png]]
  
 +
Customized in CSS:
  
<tt>'''Description:''' Denotes user has right-clicked the component.</tt>
+
[[File:Switch-off-customized.png]] [[File:Switch-on-customized.png]]
 +
<source lang="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 ==
| <center><tt>onDoubleClick</tt></center>
+
Default:
| <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>
 
  
 +
[[File:Toggle-off.png]] [[File:Toggle-on.png]]
  
<tt>'''Description:''' Denotes user has double-clicked the component.</tt>
+
Customized in CSS:
  
|-
+
[[File:Toggle-off-customized.png]] [[File:Toggle-on-customized.png]]
| <center><tt>onFocus</tt></center>
+
<source language="css">
| <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
+
.z-checkbox-toggle-off > .z-checkbox-mold {
 +
background-color: red;
 +
}
 +
.z-checkbox-toggle-on > .z-checkbox-mold {
 +
background-color: green;
 +
}
 +
</source>
 +
 
 +
== tristate ==
 +
{{versionSince| 9.0.0}}
 +
Allowing users to set the indeterminate state, in addition to the checked and unchecked states. In tristate mold, when users click on the checkbox, it will switch between checked, unchecked and indeterminate states. This is different from the default mold which has only checked and unchecked states.
  
 +
[[File:Tristate.png]]
  
<tt>'''Description:''' Denotes when a component gets the focus.</tt>
+
<source lang="xml">
 +
<checkbox mold="tristate"></checkbox>
 +
</source>
  
|-
+
We provide a new API <code>getState()</code> return CHECKED, UNCHECKED or INDETERMINATE.
| <center><tt>onBlur</tt></center>
+
<source lang="java">
| <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
+
State state = checkbox.getState() // CHECKED, UNCHECKED or INDETERMINATE
 +
</source>
  
 +
= Indeterminate =
 +
{{versionSince| 8.6.0}}
  
<tt>Description: Denotes when a component loses the focus.</tt>
+
Indeterminate is a state that is neither checked nor unchecked.
  
|-
+
Note: changing <code>indeterminate</code> will not affect the <code>checked</code> value, but changing <code>checked</code> attribute will set <code>indeterminate</code> to <code>false</code>.
| <center>onCheck</center>
 
| <javadoc>org.zkoss.zk.ui.event.CheckEvent</javadoc>
 
  
<tt>Description: Denotes when a component loses the focus.</tt>
 
|}
 
  
=Supported Children=
+
<source lang="xml">
 +
    <checkbox indeterminate="true"/>
 +
</source>
  
*ALL
+
Display a checkbox like:
 +
[[File:Indeterminate.png]]
  
=Use cases=
+
=Supported Events=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
! Version !! Description !! Example Location
+
! <center>Name</center>
 +
! <center>Event Type</center>
 +
|-
 +
| <center><code>onFocus</code></center>
 +
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
 +
Denotes when a component gets the focus.
 +
|-
 +
| <center><code>onBlur</code></center>
 +
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
 +
Denotes when a component loses the focus.
 
|-
 
|-
| 5.0+
+
| <center>onCheck</center>
| &nbsp;
+
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.CheckEvent</javadoc>
| &nbsp;
+
Denotes when a component is checked or unchecked.
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/LabelImageElement#Supported_Events | LabelImageElement]]
 +
 +
=Supported Children=
 +
 +
*None
  
 
=Version History=
 
=Version History=
 
+
{{LastUpdated}}
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
| 5.0.2
+
| &nbsp;
| 5/12/2010
+
| &nbsp;
| Initialization
+
| &nbsp;
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 07:22, 4 June 2024

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+' ' : "") 
                     + (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:

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;
}

tristate

Since 9.0.0 Allowing users to set the indeterminate state, in addition to the checked and unchecked states. In tristate mold, when users click on the checkbox, it will switch between checked, unchecked and indeterminate states. This is different from the default mold which has only checked and unchecked states.

Tristate.png

<checkbox mold="tristate"></checkbox>

We provide a new API getState() return CHECKED, UNCHECKED or INDETERMINATE.

State state = checkbox.getState() // CHECKED, UNCHECKED or INDETERMINATE

Indeterminate

Since 8.6.0

Indeterminate is a state that is neither checked nor unchecked.

Note: changing indeterminate will not affect the checked value, but changing checked attribute will set indeterminate to false.


    <checkbox indeterminate="true"/>

Display a checkbox like: Indeterminate.png

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

Version History

Last Update : 2024/06/04


Version Date Content
     



Last Update : 2024/06/04

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