Radio"

From Documentation
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 =
Line 16: Line 17:
  
 
<source lang="xml" >
 
<source lang="xml" >
<window title="Radiobox &amp; Radio Demo">
+
<window title="Radiobox &amp; Radio Demo" width="200px" border="normal">
<vbox>
+
    <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" />
</vbox>
+
    </vbox>
 
</window>
 
</window>
 
</source>
 
</source>
  
=Supported events=
+
=Supported Events=
  
 
{| border="1" | width="100%"
 
{| border="1" | width="100%"
Line 35: Line 36:
 
! <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 45:
 
  *NONE
 
  *NONE
  
=Use cases=
+
=Use Cases=
  
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
Line 74: Line 59:
 
|}
 
|}
  
See also: [[ZK_Component_Reference/Input/Radiogroup#Use_cases | Radiogroup]]
+
See also: [[ZK_Component_Reference/Input/Radiogroup#Use_Cases | Radiogroup]]
  
 
=Version History=
 
=Version History=
 
+
{{LastUpdated}}
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content

Revision as of 09:41, 19 November 2010

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

<window title="Radiobox &amp; Radio Demo" width="200px" border="normal">
    <vbox>
        <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" />
    </vbox>
</window>

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 : 2010/11/19


Version Date Content
     



Last Update : 2010/11/19

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