This example demonstrates different ways to create a Button that functions like an HTML radio button (
The ButtonGroup class creates a set of Buttons that are mutually exclusive; checking one button in the group will uncheck all others in the group. The ButtonGroup class is defined by
YAHOO.widget.ButtonGroup and a ButtonGroup's root HTML element is a
A ButtonGroup can be instantiated three different ways:
A ButtonGroup can be created from a set of existing
<input type="radio"/> elements:
To instantiate a ButtonGroup from existing HTML, pass the id of the ButtonGroup's
<div/> element as the first argument to the ButtonGroup constructor and any additional configuration attributes as the second argument via an object literal. The ButtonGroup will automatically search its child nodes for HTML radio buttons (
<input type="radio"/>) and use those elements to create instances of YAHOO.widget.Button of type "radio."
Alternatively, each Button in a ButtonGroup can be defined using the YUI Button HTML: An element with a class of "yui-button" and "yui-radio-button" containing a element with a class of "first-child" containing a
To instantiate a ButtonGroup using the Button Control HTML, pass the id of the ButtonGroup's root element (the element with the classes "yui-buttongroup" and "yui-radio-button" applied) as the first argument to constructor and any additional configuration attributes as the second argument via an object literal.
To build a ButtonGroup with no existing HTML, pass a set of configuration attributes as a single argument to the ButtonGroup constructor using an object literal. Add buttons to the ButtonGroup via the
In most cases, it is necessary to specify the ButtonGroup's id and container (the HTML element that the ButtonGroup should be appended to once created). If an id is not specified for the ButtonGroup, one will be generated using the
generateId method of the Dom utility.
Note: Logging and debugging is currently turned off for this example.