JavaScript DHTML/YUI Library/Radio Button

Материал из Web эксперт
Версия от 10:29, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

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>
               <input id="radio1" type="radio" name="radiofield1" value="Radio 1" checked>
               <input id="radio2" type="radio" name="radiofield1" value="Radio 2">
               <input id="radio3" type="radio" name="radiofield1" value="Radio 3">
               <input id="radio4" type="radio" name="radiofield1" value="Radio 4">
               <button type="button" name="radiofield2" value="Radio 5">Radio 5</button>
               <button type="button" name="radiofield2" value="Radio 6">Radio 6</button>
               <button type="button" name="radiofield2" value="Radio 7">Radio 7</button>
               <button type="button" name="radiofield2" value="Radio 8">Radio 8</button>
       </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>