JavaScript DHTML/YUI Library/Button
Содержание
Create 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>Push 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; } .yui-button#pushbutton2 button, .yui-button#pushbutton5 button, .yui-button#pushbutton8 button { background: url(yui_2.7.0b-assets/button-assets/add.gif) center center no-repeat; text-indent: -4em; overflow: hidden; padding: 0 .75em; width: 2em; *margin-left: 4em; /* IE only */ *padding: 0 1.75em; /* IE only */ } .yui-button#pushbutton3 button, .yui-button#pushbutton6 button, .yui-button#pushbutton9 button { padding-left: 2em; background: url(yui_2.7.0b-assets/button-assets/add.gif) 10% 50% no-repeat; }
</style>
</head> <body class=" yui-skin-sam">
Push Buttons
This example demonstrates different ways to create a Push Button.
<script type="text/javascript">
YAHOO.example.init = function () { // "click" event handler for each Button instance function onButtonClick(p_oEvent) { YAHOO.log("You clicked button: " + this.get("id"), "info", "example1"); }
// "contentready" event handler for the "pushbuttonsfrommarkup" <fieldset> YAHOO.util.Event.onContentReady("pushbuttonsfrommarkup", function () { // Create Buttons using existing <input> elements as a data source var oPushButton1 = new YAHOO.widget.Button("pushbutton1"); oPushButton1.on("click", onButtonClick); var oPushButton2 = new YAHOO.widget.Button("pushbutton2", { onclick: { fn: onButtonClick } }); var oPushButton3 = new YAHOO.widget.Button("pushbutton3", { onclick: { fn: onButtonClick } });
// Create Buttons using the YUI Button markup var oPushButton4 = new YAHOO.widget.Button("pushbutton4"); oPushButton4.on("click", onButtonClick); var oPushButton5 = new YAHOO.widget.Button("pushbutton5", { onclick: { fn: onButtonClick } }); var oPushButton6 = new YAHOO.widget.Button("pushbutton6", { onclick: { fn: onButtonClick } }); });
// Create Buttons without using existing markup var oPushButton7 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton7", container:"pushbuttonsfromjavascript" }); oPushButton7.on("click", onButtonClick); var oPushButton8 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton8", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } }); var oPushButton9 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton9", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } }); } ();
</script> <form id="button-example-form" name="button-example-form" method="post">
<fieldset id="pushbuttons"> <legend>Push Buttons</legend> <fieldset id="pushbuttonsfrommarkup"> <legend>From Markup</legend>
<button type="button" id="pushbutton1" name="button1" value="Add">Add</button> <input type="button" id="pushbutton2" name="button2" value="Add"> <input type="button" id="pushbutton3" name="button3" value="Add">
</fieldset> <fieldset id="pushbuttonsfromjavascript"> <legend>From JavaScript</legend> </fieldset> </fieldset>
</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 anchor element
<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>Link 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-examples div { border: 2px groove #ccc; margin: .5em; padding: .5em; } #button-examples h2 { border: none; margin: 0 0 .5em 0; padding: 0; } #linkbutton2 a, #linkbutton5 a { background: url(yui_2.7.0b-assets/button-assets/yahoo.gif) center center no-repeat; text-indent: -5em; overflow: hidden; padding: 0 1em; *margin-left: 5em; /* IE only */ _padding: 0 2.25em; /* IE 6 and IE 7 (Quirks Mode) */ } #linkbutton3 a, #linkbutton6 a { padding-left: 2.25em; background: url(yui_2.7.0b-assets/button-assets/yahoo.gif) 10% 50% no-repeat; }
</style>
</head> <body class=" yui-skin-sam">
Link Buttons
This example demonstrates different ways to create a Button that functions like an HTML <a/>
element.
<script type="text/javascript">
YAHOO.example.init = function () {// "contentready" event handler for the "linkbuttonsfrommarkup"
YAHOO.util.Event.onContentReady("linkbuttonsfrommarkup", function() { // Create Buttons from existing markup var oLinkButton1 = new YAHOO.widget.Button("linkbutton1"); var oLinkButton2 = new YAHOO.widget.Button("linkbutton2"); var oLinkButton3 = new YAHOO.widget.Button("linkbutton3"); });
// Create Buttons without using existing markup var oLinkButton4 = new YAHOO.widget.Button({ type: "link", id: "linkbutton4", label: "Yahoo!", href: "http://www.yahoo.ru", container: "linkbuttonsfromjavascript" }); var oLinkButton5 = new YAHOO.widget.Button({ type: "link", id: "linkbutton5", label: "Yahoo!", href: "http://www.yahoo.ru", container: "linkbuttonsfromjavascript" }); var oLinkButton6 = new YAHOO.widget.Button({ type: "link", id: "linkbutton6", label: "Yahoo!", href: "http://www.yahoo.ru", container: "linkbuttonsfromjavascript" }); } ();
</script>
</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>
Icon 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>Push 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; } .yui-button#pushbutton2 button, .yui-button#pushbutton5 button, .yui-button#pushbutton8 button { background: url(yui_2.7.0b-assets/button-assets/add.gif) center center no-repeat; text-indent: -4em; overflow: hidden; padding: 0 .75em; width: 2em; *margin-left: 4em; /* IE only */ *padding: 0 1.75em; /* IE only */ } .yui-button#pushbutton3 button, .yui-button#pushbutton6 button, .yui-button#pushbutton9 button { padding-left: 2em; background: url(yui_2.7.0b-assets/button-assets/add.gif) 10% 50% no-repeat; }
</style>
</head> <body class=" yui-skin-sam">
Push Buttons
This example demonstrates different ways to create a Push Button.
<script type="text/javascript">
YAHOO.example.init = function () { // "click" event handler for each Button instance function onButtonClick(p_oEvent) { YAHOO.log("You clicked button: " + this.get("id"), "info", "example1"); }
// "contentready" event handler for the "pushbuttonsfrommarkup" <fieldset> YAHOO.util.Event.onContentReady("pushbuttonsfrommarkup", function () { // Create Buttons using existing <input> elements as a data source var oPushButton1 = new YAHOO.widget.Button("pushbutton1"); oPushButton1.on("click", onButtonClick); var oPushButton2 = new YAHOO.widget.Button("pushbutton2", { onclick: { fn: onButtonClick } }); var oPushButton3 = new YAHOO.widget.Button("pushbutton3", { onclick: { fn: onButtonClick } });
// Create Buttons using the YUI Button markup var oPushButton4 = new YAHOO.widget.Button("pushbutton4"); oPushButton4.on("click", onButtonClick); var oPushButton5 = new YAHOO.widget.Button("pushbutton5", { onclick: { fn: onButtonClick } }); var oPushButton6 = new YAHOO.widget.Button("pushbutton6", { onclick: { fn: onButtonClick } }); });
// Create Buttons without using existing markup var oPushButton7 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton7", container:"pushbuttonsfromjavascript" }); oPushButton7.on("click", onButtonClick); var oPushButton8 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton8", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } }); var oPushButton9 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton9", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } }); } ();
</script> <form id="button-example-form" name="button-example-form" method="post">
<fieldset id="pushbuttons"> <legend>Push Buttons</legend> <fieldset id="pushbuttonsfrommarkup"> <legend>From Markup</legend>
<button type="button" id="pushbutton1" name="button1" value="Add">Add</button> <input type="button" id="pushbutton2" name="button2" value="Add"> <input type="button" id="pushbutton3" name="button3" value="Add">
</fieldset> <fieldset id="pushbuttonsfromjavascript"> <legend>From JavaScript</legend> </fieldset> </fieldset>
</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>
Mark form button to a fancy 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>Push 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; } .yui-button#pushbutton2 button, .yui-button#pushbutton5 button, .yui-button#pushbutton8 button { background: url(yui_2.7.0b-assets/button-assets/add.gif) center center no-repeat; text-indent: -4em; overflow: hidden; padding: 0 .75em; width: 2em; *margin-left: 4em; /* IE only */ *padding: 0 1.75em; /* IE only */ } .yui-button#pushbutton3 button, .yui-button#pushbutton6 button, .yui-button#pushbutton9 button { padding-left: 2em; background: url(yui_2.7.0b-assets/button-assets/add.gif) 10% 50% no-repeat; }
</style>
</head> <body class=" yui-skin-sam">
Push Buttons
This example demonstrates different ways to create a Push Button.
<script type="text/javascript">
YAHOO.example.init = function () { // "click" event handler for each Button instance function onButtonClick(p_oEvent) { YAHOO.log("You clicked button: " + this.get("id"), "info", "example1"); }
// "contentready" event handler for the "pushbuttonsfrommarkup" <fieldset> YAHOO.util.Event.onContentReady("pushbuttonsfrommarkup", function () { // Create Buttons using existing <input> elements as a data source var oPushButton1 = new YAHOO.widget.Button("pushbutton1"); oPushButton1.on("click", onButtonClick); var oPushButton2 = new YAHOO.widget.Button("pushbutton2", { onclick: { fn: onButtonClick } }); var oPushButton3 = new YAHOO.widget.Button("pushbutton3", { onclick: { fn: onButtonClick } });
// Create Buttons using the YUI Button markup var oPushButton4 = new YAHOO.widget.Button("pushbutton4"); oPushButton4.on("click", onButtonClick); var oPushButton5 = new YAHOO.widget.Button("pushbutton5", { onclick: { fn: onButtonClick } }); var oPushButton6 = new YAHOO.widget.Button("pushbutton6", { onclick: { fn: onButtonClick } }); });
// Create Buttons without using existing markup var oPushButton7 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton7", container:"pushbuttonsfromjavascript" }); oPushButton7.on("click", onButtonClick); var oPushButton8 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton8", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } }); var oPushButton9 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton9", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } }); } ();
</script> <form id="button-example-form" name="button-example-form" method="post">
<fieldset id="pushbuttons"> <legend>Push Buttons</legend> <fieldset id="pushbuttonsfrommarkup"> <legend>From Markup</legend>
<button type="button" id="pushbutton1" name="button1" value="Add">Add</button> <input type="button" id="pushbutton2" name="button2" value="Add"> <input type="button" id="pushbutton3" name="button3" value="Add">
</fieldset> <fieldset id="pushbuttonsfromjavascript"> <legend>From JavaScript</legend> </fieldset> </fieldset>
</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>
Mix icon and text on a 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>Push 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; } .yui-button#pushbutton2 button, .yui-button#pushbutton5 button, .yui-button#pushbutton8 button { background: url(yui_2.7.0b-assets/button-assets/add.gif) center center no-repeat; text-indent: -4em; overflow: hidden; padding: 0 .75em; width: 2em; *margin-left: 4em; /* IE only */ *padding: 0 1.75em; /* IE only */ } .yui-button#pushbutton3 button, .yui-button#pushbutton6 button, .yui-button#pushbutton9 button { padding-left: 2em; background: url(yui_2.7.0b-assets/button-assets/add.gif) 10% 50% no-repeat; }
</style>
</head> <body class=" yui-skin-sam">
Push Buttons
This example demonstrates different ways to create a Push Button.
<script type="text/javascript">
YAHOO.example.init = function () { // "click" event handler for each Button instance function onButtonClick(p_oEvent) { YAHOO.log("You clicked button: " + this.get("id"), "info", "example1"); }
// "contentready" event handler for the "pushbuttonsfrommarkup" <fieldset> YAHOO.util.Event.onContentReady("pushbuttonsfrommarkup", function () { // Create Buttons using existing <input> elements as a data source var oPushButton1 = new YAHOO.widget.Button("pushbutton1"); oPushButton1.on("click", onButtonClick); var oPushButton2 = new YAHOO.widget.Button("pushbutton2", { onclick: { fn: onButtonClick } }); var oPushButton3 = new YAHOO.widget.Button("pushbutton3", { onclick: { fn: onButtonClick } });
// Create Buttons using the YUI Button markup var oPushButton4 = new YAHOO.widget.Button("pushbutton4"); oPushButton4.on("click", onButtonClick); var oPushButton5 = new YAHOO.widget.Button("pushbutton5", { onclick: { fn: onButtonClick } }); var oPushButton6 = new YAHOO.widget.Button("pushbutton6", { onclick: { fn: onButtonClick } }); });
// Create Buttons without using existing markup var oPushButton7 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton7", container:"pushbuttonsfromjavascript" }); oPushButton7.on("click", onButtonClick); var oPushButton8 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton8", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } }); var oPushButton9 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton9", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } }); } ();
</script> <form id="button-example-form" name="button-example-form" method="post">
<fieldset id="pushbuttons"> <legend>Push Buttons</legend> <fieldset id="pushbuttonsfrommarkup"> <legend>From Markup</legend>
<button type="button" id="pushbutton1" name="button1" value="Add">Add</button> <input type="button" id="pushbutton2" name="button2" value="Add"> <input type="button" id="pushbutton3" name="button3" value="Add">
</fieldset> <fieldset id="pushbuttonsfromjavascript"> <legend>From JavaScript</legend> </fieldset> </fieldset>
</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>
Skin a Button instance to create a glossy, glass-like effect with a glowing background reminiscent of Aqua buttons found in Mac OS X.
<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>Glowing Button</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/menu/assets/skins/sam/menu.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/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.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">
.yui-button { border-width: 1px 0; border-style: solid; border-color: #004d89; margin: auto .25em; /* Give the Button instance a transparent background image that provides a glossy, glass-like look. Since the background image is transparent, it can apply the glass effect the Button instance regardless of its background color. */ background: url(yui_2.7.0b-assets/button-assets/gloss.png) repeat-x left center; } .ie6 { /* Make background image transparent IE 6 using the AlphaImageLoader. */ background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="yui_2.7.0b-assets/button-assets/gloss.png", sizingMethod = "scale"); } .yui-button .first-child { border-width: 0 1px; border-style: solid; border-color: #004d89; margin: 0 -1px; /* Using negative margins for rounded corners won"t work in IE 6 and IE 7 (Quirks Mode Only), so set the "margin" property to "0" for those browsers. */ _margin: 0; } .yui-button button, .yui-button a { padding: 0 10px; font-size: 93%; /* 12px */ line-height: 2; /* ~24px */ *line-height: 1.7; /* For IE */ min-height: 2em; /* For Gecko */ *min-height: auto; /* For IE */ color: #fff; border: solid 1px #599acd; } .yui-button#ok-button { background-color: #004d89; }
</style>
</head> <body class=" ">
Glowing Button
This example demonstrates how to skin a Button instance to create a glossy, glass-like effect with a glowing background reminiscent of Aqua buttons found in Mac OS X.
<script type="text/javascript">
YAHOO.util.Event.onContentReady("buttoncontainer", function () { // Create a new Button instance var oButton = new YAHOO.widget.Button({ id: "ok-button", label: "OK", container: "buttoncontainer" });
/* Begin animating the Button instance"s background color once it is appended to its containing element. */ oButton.on("appendTo", function () { /* Apply a special CSS class to be able to target IE 6 specifically in the CSS. */ if (YAHOO.env.ua.ie == 6) { oButton.addClass("ie6"); } // Create a new ColorAnim instance var oButtonAnim = new YAHOO.util.ColorAnim("ok-button", { backgroundColor: { to: "#b1ddff" } }); /* Restart the color animation each time the target color has been applied. */ oButtonAnim.onComplete.subscribe(function () { this.attributes.backgroundColor.to = (this.attributes.backgroundColor.to == "#b1ddff") ? "#016bbd" : "#b1ddff"; this.animate(); }); oButtonAnim.animate(); }); });
</script>
</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>
Text 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>Push 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; } .yui-button#pushbutton2 button, .yui-button#pushbutton5 button, .yui-button#pushbutton8 button { background: url(yui_2.7.0b-assets/button-assets/add.gif) center center no-repeat; text-indent: -4em; overflow: hidden; padding: 0 .75em; width: 2em; *margin-left: 4em; /* IE only */ *padding: 0 1.75em; /* IE only */ } .yui-button#pushbutton3 button, .yui-button#pushbutton6 button, .yui-button#pushbutton9 button { padding-left: 2em; background: url(yui_2.7.0b-assets/button-assets/add.gif) 10% 50% no-repeat; }
</style>
</head> <body class=" yui-skin-sam">
Push Buttons
This example demonstrates different ways to create a Push Button.
<script type="text/javascript">
YAHOO.example.init = function () { // "click" event handler for each Button instance function onButtonClick(p_oEvent) { YAHOO.log("You clicked button: " + this.get("id"), "info", "example1"); }
// "contentready" event handler for the "pushbuttonsfrommarkup" <fieldset> YAHOO.util.Event.onContentReady("pushbuttonsfrommarkup", function () { // Create Buttons using existing <input> elements as a data source var oPushButton1 = new YAHOO.widget.Button("pushbutton1"); oPushButton1.on("click", onButtonClick); var oPushButton2 = new YAHOO.widget.Button("pushbutton2", { onclick: { fn: onButtonClick } }); var oPushButton3 = new YAHOO.widget.Button("pushbutton3", { onclick: { fn: onButtonClick } });
// Create Buttons using the YUI Button markup var oPushButton4 = new YAHOO.widget.Button("pushbutton4"); oPushButton4.on("click", onButtonClick); var oPushButton5 = new YAHOO.widget.Button("pushbutton5", { onclick: { fn: onButtonClick } }); var oPushButton6 = new YAHOO.widget.Button("pushbutton6", { onclick: { fn: onButtonClick } }); });
// Create Buttons without using existing markup var oPushButton7 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton7", container:"pushbuttonsfromjavascript" }); oPushButton7.on("click", onButtonClick); var oPushButton8 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton8", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } }); var oPushButton9 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton9", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } }); } ();
</script> <form id="button-example-form" name="button-example-form" method="post">
<fieldset id="pushbuttons"> <legend>Push Buttons</legend> <fieldset id="pushbuttonsfrommarkup"> <legend>From Markup</legend>
<button type="button" id="pushbutton1" name="button1" value="Add">Add</button> <input type="button" id="pushbutton2" name="button2" value="Add"> <input type="button" id="pushbutton3" name="button3" value="Add">
</fieldset> <fieldset id="pushbuttonsfromjavascript"> <legend>From JavaScript</legend> </fieldset> </fieldset>
</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>
Use button to trigger an animation
<source lang="html4strict">
<html>
<head>
<title>Chaining Animations Using onComplete
</title>
<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/animation/animation-min.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">
#animator { background-color:#003366; color:#fff; height:15em; width: 15em; position:relative; margin:1em; padding:1em; }
</style> </head> <body class=" yui-skin-sam">
<a href="#" title="Click here to begin the chained animations.">Click here to begin the chained animations.</a>
This element will animate position and then color when you click the button.
<script language="javascript"> //Setup the example once the animator div is present //in the DOM. YAHOO.util.Event.onAvailable("animator", function() {
//This is the first animation; this one will //fire when the button is clicked. var move = new YAHOO.util.Anim("animator", { left: {from:0, to:75} }, 1); //This is the second animation; it will fire //when the first animation is complete. var changeColor = new YAHOO.util.ColorAnim("animator", { backgroundColor: {from:"#003366", to:"#ff0000"} }, 1); //Here"s the chaining glue: We subscribe to the //first animation"s onComplete event, and in //our handler we animate the second animation: move.onComplete.subscribe(function() { changeColor.animate(); }); //Here we set up our YUI Button and subcribe to //its click event. When clicked, it will //animate the first animation: var startAnim = new YAHOO.widget.Button("startAnim"); startAnim.subscribe("click", function() { //reset the color value to the start so that //the animation can be run multiple times: YAHOO.util.Dom.setStyle("animator", "backgroundColor", "#003366"); move.animate(); }); changeColor.onStart.subscribe(function() { }); changeColor.onTween.subscribe(function(s, o) { }); changeColor.onComplete.subscribe(function(s, o) { });
}); </script> </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>