Checkbox"

From Documentation
m (Created page with 'init')
 
(28 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
init
+
{{ZKComponentReferencePageHeader}}
 +
 
 +
= Checkbox =
 +
 
 +
*Demonstration: [http://www.zkoss.org/zkdemo/input/checkbox Checkbox]
 +
*Java API: <javadoc>org.zkoss.zul.Checkbox</javadoc>
 +
*JavaScript API: <javadoc directory="jsdoc">zul.wgt.Checkbox</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Checkbox | Checkbox]]
 +
 
 +
= 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+' ' : &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:
 +
 
 +
[[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>
 +
| '''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=
 +
 
 +
*None
 +
 
 +
=Use Cases=
 +
 
 +
{| border='1px' | width="100%"
 +
! Version !! Description !! Example Location
 +
|-
 +
| &nbsp;
 +
| &nbsp;
 +
| &nbsp;
 +
|}
 +
 
 +
=Version History=
 +
{{LastUpdated}}
 +
{| border='1px' | width="100%"
 +
! Version !! Date !! Content
 +
|-
 +
| &nbsp;
 +
| &nbsp;
 +
| &nbsp;
 +
|}
 +
 
 +
{{ZKComponentReferencePageFooter}}

Revision as of 07:54, 29 October 2018


DocumentationZK Component ReferenceInputCheckbox
Checkbox

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.


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Component_Reference/Input/Checkbox&oldid=48440"