JavaScript DHTML/YUI Library/Radio Button
Different ways to create a Button that functions like an HTML radio button
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Radio Buttons</title> <style type="text/css"> /*margin and padding on body element
can introduce errors in determining element position and are not recommended; we turn them off as a foundation for YUI CSS treatments. */
body {
margin:0; padding:0;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script>
<style type="text/css">
#button-example-form fieldset, #button-example-form fieldset div { border: 2px groove #ccc; margin: .5em; padding: .5em; } #button-example-form-postdata { border: dashed 1px #666; background-color: #ccc; padding: 1em; } #button-example-form-postdata h2 { margin: 0 0 .5em 0; padding: 0; border: none; }
</style>
</head> <body class=" yui-skin-sam">
Radio Buttons
This example demonstrates different ways to create a Button that functions like an HTML radio button (<input type="radio"/>
).
<script type="text/javascript">
(function () { var ButtonGroup = YAHOO.widget.ButtonGroup;
// "checkedButtonChange" event handler for each ButtonGroup instance var onCheckedButtonChange = function (p_oEvent) { if(p_oEvent.prevValue) { YAHOO.log(p_oEvent.prevValue.get("name"), "info", "example4"); } if(p_oEvent.newValue) { YAHOO.log(p_oEvent.newValue.get("name"), "info", "example4"); } };
// "contentready" event handler for the "radiobuttonsfrommarkup" <fieldset> YAHOO.util.Event.onContentReady("radiobuttonsfrommarkup", function () { var oButtonGroup1 = new ButtonGroup("buttongroup1"); oButtonGroup1.on("checkedButtonChange", onCheckedButtonChange); var oButtonGroup2 = new ButtonGroup("buttongroup2"); oButtonGroup2.on("checkedButtonChange", onCheckedButtonChange); });
// Create a ButtonGroup without using existing markup var oButtonGroup3 = new ButtonGroup({ id: "buttongroup3", name: "radiofield3", container: "radiobuttonsfromjavascript", usearia: true }); oButtonGroup3.addButtons([ { label: "Radio 9", value: "Radio 9", checked: true }, { label: "Radio 10", value: "Radio 10" }, { label: "Radio 11", value: "Radio 11" }, { label: "Radio 12", value: "Radio 12" } ]); oButtonGroup3.on("checkedButtonChange", onCheckedButtonChange); }());
</script>
<form id="button-example-form" name="button-example-form" method="post">
<fieldset id="radiobuttons"> <legend>Radio Buttons</legend> <fieldset id="radiobuttonsfrommarkup"> <legend>From Markup</legend>
</fieldset> <fieldset id="radiobuttonsfromjavascript"> <legend>From JavaScript</legend> </fieldset> </fieldset>
<input type="reset" name="resetbutton" value="Reset Form"> <input type="submit" name="submitbutton" value="Submit Form">
</form>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>