Radio"

From Documentation
m ((via JWB))
 
(7 intermediate revisions by 4 users not shown)
Line 3: Line 3:
 
= Radio =
 
= Radio =
  
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#f7 Radio]
+
*Demonstration: [http://www.zkoss.org/zkdemo/input/radio_button Radio]
 
*Java API: <javadoc>org.zkoss.zul.Radio</javadoc>
 
*Java API: <javadoc>org.zkoss.zul.Radio</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.wgt.Radio</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.wgt.Radio</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Radio | Radio]]
  
 
= Employment/Purpose =
 
= Employment/Purpose =
  
A <tt>radio</tt> button is a component that can be turned on and off. Radio buttons are grouped together in a group, called <tt>radiogroup</tt>. Only one radio button with the same group may be selected at a time.
+
A <code>radio</code> button is a component that can be turned on and off. Radio buttons are grouped together in a group, called <code>radiogroup</code>. Only one radio button with the same group may be selected at a time.
  
 
= Example =
 
= Example =
Line 16: Line 17:
  
 
<source lang="xml" >
 
<source lang="xml" >
<window title="Radiobox &amp; Radio Demo">
+
    <vlayout>
<vbox>
+
        <radiogroup onCheck="fruit.value = self.selectedItem.label">
<radiogroup onCheck="fruit.value = self.selectedItem.label">
+
            <radio label="Apple"/>
<radio label="Apple" />
+
            <radio label="Orange"/>
<radio label="Orange" />
+
            <radio label="Banana"/>
<radio label="Banana" />
+
        </radiogroup>
</radiogroup>
+
        You have selected :
You have selected :
+
        <label id="fruit" style="color:red"/>
<label id="fruit" style="color:red" />
+
    </vlayout>
</vbox>
 
</window>
 
 
</source>
 
</source>
  
=Supported events=
+
=Supported Events=
  
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
 
|-
 
|-
| <center><tt>onFocus</tt></center>
+
| None
| <javadoc>org.zkoss.zk.ui.event.Event</javadoc>
+
| None
 
 
 
 
<tt>'''Description:''' Denotes when a component gets the focus.</tt>
 
 
 
|-
 
| <center><tt>onBlur</tt></center>
 
| <javadoc>org.zkoss.zk.ui.even.Event</javadoc>
 
 
 
 
 
<tt>Description: Denotes when a component loses the focus.</tt>
 
 
 
|-
 
| <center><tt>onCheck</tt></center>
 
| <javadoc>org.zkoss.zk.ui.event.CheckEvent</javadoc>
 
 
 
<tt>Description: Denotes when a component loses the focus.</tt>
 
 
 
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Input/Checkbox#Supported_Events | Checkbox]]
  
 
=Supported Children=
 
=Supported Children=
Line 60: Line 43:
 
  *NONE
 
  *NONE
  
=Use cases=
+
=Use Cases=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
| 5.0+
+
| 3.6
| &nbsp;
+
| Radio buttons with Listitems
| &nbsp;
+
| [http://www.zkoss.org/forum/listComment/3867 http://www.zkoss.org/forum/listComment/3867]
 +
|-
 +
| 3.6
 +
| Radiogroup radio's in seperate table/grid rows
 +
| [http://www.zkoss.org/forum/listComment/9002 http://www.zkoss.org/forum/listComment/9002]
 
|}
 
|}
 +
 +
See also: [[ZK_Component_Reference/Input/Radiogroup#Use_Cases | Radiogroup]]
  
 
=Version History=
 
=Version History=
 
+
{{LastUpdated}}
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
| 5.0.1
+
| &nbsp;
| 4/27/2010
+
| &nbsp;
| Initialization
+
| &nbsp;
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 10:42, 12 January 2022

Radio

Employment/Purpose

A radio button is a component that can be turned on and off. Radio buttons are grouped together in a group, called radiogroup. Only one radio button with the same group may be selected at a time.

Example

ZKComRef radio.png

    <vlayout>
        <radiogroup onCheck="fruit.value = self.selectedItem.label">
            <radio label="Apple"/>
            <radio label="Orange"/>
            <radio label="Banana"/>
        </radiogroup>
        You have selected :
        <label id="fruit" style="color:red"/>
    </vlayout>

Supported Events

Name
Event Type
None None

Supported Children

*NONE

Use Cases

Version Description Example Location
3.6 Radio buttons with Listitems http://www.zkoss.org/forum/listComment/3867
3.6 Radiogroup radio's in seperate table/grid rows http://www.zkoss.org/forum/listComment/9002

See also: Radiogroup

Version History

Last Update : 2022/01/12


Version Date Content
     



Last Update : 2022/01/12

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