JavaScript DHTML/YUI Library/Toggle Button — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 13:02, 26 мая 2010
Содержание
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">
</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">
</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">
</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">
</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>