JavaScript DHTML/YUI Library/Toggle Button

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

Different ways to create a Button that functions like an HTML checkbox from HTML markup

   <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>Checkbox 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">

Checkbox Buttons

This example demonstrates different ways to create a Button that functions like an HTML checkbox (<input type="checkbox"/>).

<script type="text/javascript"> 

   (function () {
     var Button = YAHOO.widget.Button;
       // "contentready" event handler for the "checkboxbuttonsfrommarkup" <fieldset>
       YAHOO.util.Event.onContentReady("checkboxbuttonsfrommarkup", function () {
           // Create Buttons using existing <input> elements as a data source
   
           var oCheckButton1 = new Button("checkbutton1", { label: "One" });
           var oCheckButton2 = new Button("checkbutton2", { label: "Two" });
           var oCheckButton3 = new Button("checkbutton3", { label: "Three" });
           var oCheckButton4 = new Button("checkbutton4", { label: "Four" });

           // Create Buttons using the YUI Button markup
           var oCheckButton5 = new Button("checkbutton5", { type: "checkbox", value: "1", checked: true });
           var oCheckButton6 = new Button("checkbutton6", { type: "checkbox", value: "2"});
           var oCheckButton7 = new Button("checkbutton7", { type: "checkbox", value: "3" });
           var oCheckButton8 = new Button("checkbutton8", { type: "checkbox", value: "4" });
       
       });

       // Create Buttons without using existing markup
       var oCheckButton9 = new Button({ type: "checkbox", label: "One", id: "checkbutton9", name: "checkboxfield3", value: "1", container: "checkboxbuttonsfromjavascript", checked: true });
       var oCheckButton10 = new Button({ type: "checkbox", label: "Two", id: "checkbutton10", name: "checkboxfield3", value: "2", container: "checkboxbuttonsfromjavascript" });
       var oCheckButton11 = new Button({ type: "checkbox", label: "Three", id: "checkbutton11", name: "checkboxfield3", value: "3", container: "checkboxbuttonsfromjavascript" });
       var oCheckButton12 = new Button({ type: "checkbox", label: "Four", id: "checkbutton12", name: "checkboxfield3", value: "4", container: "checkboxbuttonsfromjavascript" });
   }());

</script>

<form id="button-example-form" name="button-example-form" method="post"> 

   <fieldset id="checkboxbuttons">
       <legend>Checkbox Buttons</legend>
       <fieldset id="checkboxbuttonsfrommarkup">
           <legend>From Markup</legend>

               <input id="checkbutton1" type="checkbox" name="checkboxfield1" value="1" checked>
               <input id="checkbutton2" type="checkbox" name="checkboxfield1" value="2">
               <input id="checkbutton3" type="checkbox" name="checkboxfield1" value="3">
               <input id="checkbutton4" type="checkbox" name="checkboxfield1" value="4">

               <button type="button" name="checkboxfield2">One</button>
               <button type="button" name="checkboxfield2">Two</button>
               <button type="button" name="checkboxfield2">Three</button>
               <button type="button" name="checkboxfield2">Four</button>

       </fieldset>
       <fieldset id="checkboxbuttonsfromjavascript">
           <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>


Different ways to create a Button that functions like an HTML checkbox from Javascript

   <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>Checkbox 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">

Checkbox Buttons

This example demonstrates different ways to create a Button that functions like an HTML checkbox (<input type="checkbox"/>).

<script type="text/javascript"> 

   (function () {
     var Button = YAHOO.widget.Button;
       // "contentready" event handler for the "checkboxbuttonsfrommarkup" <fieldset>
       YAHOO.util.Event.onContentReady("checkboxbuttonsfrommarkup", function () {
           // Create Buttons using existing <input> elements as a data source
   
           var oCheckButton1 = new Button("checkbutton1", { label: "One" });
           var oCheckButton2 = new Button("checkbutton2", { label: "Two" });
           var oCheckButton3 = new Button("checkbutton3", { label: "Three" });
           var oCheckButton4 = new Button("checkbutton4", { label: "Four" });

           // Create Buttons using the YUI Button markup
           var oCheckButton5 = new Button("checkbutton5", { type: "checkbox", value: "1", checked: true });
           var oCheckButton6 = new Button("checkbutton6", { type: "checkbox", value: "2"});
           var oCheckButton7 = new Button("checkbutton7", { type: "checkbox", value: "3" });
           var oCheckButton8 = new Button("checkbutton8", { type: "checkbox", value: "4" });
       
       });

       // Create Buttons without using existing markup
       var oCheckButton9 = new Button({ type: "checkbox", label: "One", id: "checkbutton9", name: "checkboxfield3", value: "1", container: "checkboxbuttonsfromjavascript", checked: true });
       var oCheckButton10 = new Button({ type: "checkbox", label: "Two", id: "checkbutton10", name: "checkboxfield3", value: "2", container: "checkboxbuttonsfromjavascript" });
       var oCheckButton11 = new Button({ type: "checkbox", label: "Three", id: "checkbutton11", name: "checkboxfield3", value: "3", container: "checkboxbuttonsfromjavascript" });
       var oCheckButton12 = new Button({ type: "checkbox", label: "Four", id: "checkbutton12", name: "checkboxfield3", value: "4", container: "checkboxbuttonsfromjavascript" });
   }());

</script>

<form id="button-example-form" name="button-example-form" method="post"> 

   <fieldset id="checkboxbuttons">
       <legend>Checkbox Buttons</legend>
       <fieldset id="checkboxbuttonsfrommarkup">
           <legend>From Markup</legend>

               <input id="checkbutton1" type="checkbox" name="checkboxfield1" value="1" checked>
               <input id="checkbutton2" type="checkbox" name="checkboxfield1" value="2">
               <input id="checkbutton3" type="checkbox" name="checkboxfield1" value="3">
               <input id="checkbutton4" type="checkbox" name="checkboxfield1" value="4">

               <button type="button" name="checkboxfield2">One</button>
               <button type="button" name="checkboxfield2">Two</button>
               <button type="button" name="checkboxfield2">Three</button>
               <button type="button" name="checkboxfield2">Four</button>

       </fieldset>
       <fieldset id="checkboxbuttonsfromjavascript">
           <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>


Three-state button (toggle button) from HTML markup

   <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>Checkbox 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">

Checkbox Buttons

This example demonstrates different ways to create a Button that functions like an HTML checkbox (<input type="checkbox"/>).

<script type="text/javascript"> 

   (function () {
     var Button = YAHOO.widget.Button;
       // "contentready" event handler for the "checkboxbuttonsfrommarkup" <fieldset>
       YAHOO.util.Event.onContentReady("checkboxbuttonsfrommarkup", function () {
           // Create Buttons using existing <input> elements as a data source
   
           var oCheckButton1 = new Button("checkbutton1", { label: "One" });
           var oCheckButton2 = new Button("checkbutton2", { label: "Two" });
           var oCheckButton3 = new Button("checkbutton3", { label: "Three" });
           var oCheckButton4 = new Button("checkbutton4", { label: "Four" });

           // Create Buttons using the YUI Button markup
           var oCheckButton5 = new Button("checkbutton5", { type: "checkbox", value: "1", checked: true });
           var oCheckButton6 = new Button("checkbutton6", { type: "checkbox", value: "2"});
           var oCheckButton7 = new Button("checkbutton7", { type: "checkbox", value: "3" });
           var oCheckButton8 = new Button("checkbutton8", { type: "checkbox", value: "4" });
       
       });

       // Create Buttons without using existing markup
       var oCheckButton9 = new Button({ type: "checkbox", label: "One", id: "checkbutton9", name: "checkboxfield3", value: "1", container: "checkboxbuttonsfromjavascript", checked: true });
       var oCheckButton10 = new Button({ type: "checkbox", label: "Two", id: "checkbutton10", name: "checkboxfield3", value: "2", container: "checkboxbuttonsfromjavascript" });
       var oCheckButton11 = new Button({ type: "checkbox", label: "Three", id: "checkbutton11", name: "checkboxfield3", value: "3", container: "checkboxbuttonsfromjavascript" });
       var oCheckButton12 = new Button({ type: "checkbox", label: "Four", id: "checkbutton12", name: "checkboxfield3", value: "4", container: "checkboxbuttonsfromjavascript" });
   }());

</script>

<form id="button-example-form" name="button-example-form" method="post"> 

   <fieldset id="checkboxbuttons">
       <legend>Checkbox Buttons</legend>
       <fieldset id="checkboxbuttonsfrommarkup">
           <legend>From Markup</legend>

               <input id="checkbutton1" type="checkbox" name="checkboxfield1" value="1" checked>
               <input id="checkbutton2" type="checkbox" name="checkboxfield1" value="2">
               <input id="checkbutton3" type="checkbox" name="checkboxfield1" value="3">
               <input id="checkbutton4" type="checkbox" name="checkboxfield1" value="4">

               <button type="button" name="checkboxfield2">One</button>
               <button type="button" name="checkboxfield2">Two</button>
               <button type="button" name="checkboxfield2">Three</button>
               <button type="button" name="checkboxfield2">Four</button>

       </fieldset>
       <fieldset id="checkboxbuttonsfromjavascript">
           <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>


Three-state button (toggle button) from Javascript

   <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>Checkbox 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">

Checkbox Buttons

This example demonstrates different ways to create a Button that functions like an HTML checkbox (<input type="checkbox"/>).

<script type="text/javascript"> 

   (function () {
     var Button = YAHOO.widget.Button;
       // "contentready" event handler for the "checkboxbuttonsfrommarkup" <fieldset>
       YAHOO.util.Event.onContentReady("checkboxbuttonsfrommarkup", function () {
           // Create Buttons using existing <input> elements as a data source
   
           var oCheckButton1 = new Button("checkbutton1", { label: "One" });
           var oCheckButton2 = new Button("checkbutton2", { label: "Two" });
           var oCheckButton3 = new Button("checkbutton3", { label: "Three" });
           var oCheckButton4 = new Button("checkbutton4", { label: "Four" });

           // Create Buttons using the YUI Button markup
           var oCheckButton5 = new Button("checkbutton5", { type: "checkbox", value: "1", checked: true });
           var oCheckButton6 = new Button("checkbutton6", { type: "checkbox", value: "2"});
           var oCheckButton7 = new Button("checkbutton7", { type: "checkbox", value: "3" });
           var oCheckButton8 = new Button("checkbutton8", { type: "checkbox", value: "4" });
       
       });

       // Create Buttons without using existing markup
       var oCheckButton9 = new Button({ type: "checkbox", label: "One", id: "checkbutton9", name: "checkboxfield3", value: "1", container: "checkboxbuttonsfromjavascript", checked: true });
       var oCheckButton10 = new Button({ type: "checkbox", label: "Two", id: "checkbutton10", name: "checkboxfield3", value: "2", container: "checkboxbuttonsfromjavascript" });
       var oCheckButton11 = new Button({ type: "checkbox", label: "Three", id: "checkbutton11", name: "checkboxfield3", value: "3", container: "checkboxbuttonsfromjavascript" });
       var oCheckButton12 = new Button({ type: "checkbox", label: "Four", id: "checkbutton12", name: "checkboxfield3", value: "4", container: "checkboxbuttonsfromjavascript" });
   }());

</script>

<form id="button-example-form" name="button-example-form" method="post"> 

   <fieldset id="checkboxbuttons">
       <legend>Checkbox Buttons</legend>
       <fieldset id="checkboxbuttonsfrommarkup">
           <legend>From Markup</legend>

               <input id="checkbutton1" type="checkbox" name="checkboxfield1" value="1" checked>
               <input id="checkbutton2" type="checkbox" name="checkboxfield1" value="2">
               <input id="checkbutton3" type="checkbox" name="checkboxfield1" value="3">
               <input id="checkbutton4" type="checkbox" name="checkboxfield1" value="4">

               <button type="button" name="checkboxfield2">One</button>
               <button type="button" name="checkboxfield2">Two</button>
               <button type="button" name="checkboxfield2">Three</button>
               <button type="button" name="checkboxfield2">Four</button>

       </fieldset>
       <fieldset id="checkboxbuttonsfromjavascript">
           <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>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/YUI_Library/Toggle_Button&oldid=4075»