preparing for 2.6 yui upgrade
This commit is contained in:
JT Smith
parent
eea207b3ec
commit
a041e93da8
1632 changed files with 0 additions and 812103 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 974 B |
Binary file not shown.
|
Before Width: | Height: | Size: 892 B |
Binary file not shown.
|
Before Width: | Height: | Size: 176 B |
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 141 B |
Binary file not shown.
|
Before Width: | Height: | Size: 612 B |
Binary file not shown.
|
Before Width: | Height: | Size: 175 B |
File diff suppressed because one or more lines are too long
|
|
@ -1,157 +0,0 @@
|
|||
<!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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<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(../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(../button/assets/add.gif) 10% 50% no-repeat;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Push Buttons</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates different ways to create a Push Button.</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<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" action="#">
|
||||
|
||||
<fieldset id="pushbuttons">
|
||||
<legend>Push Buttons</legend>
|
||||
|
||||
<fieldset id="pushbuttonsfrommarkup">
|
||||
<legend>From Markup</legend>
|
||||
|
||||
<div>
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span id="pushbutton4" class="yui-button yui-push-button"><span class="first-child"><input type="button" name="button4" value="Add"></span></span>
|
||||
<span id="pushbutton5" class="yui-button yui-push-button"><em class="first-child"><button type="button" name="button5">Add</button></em></span>
|
||||
<span id="pushbutton6" class="yui-button yui-push-button"><strong class="first-child"><button type="button" name="button6">Add</button></strong></span>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="pushbuttonsfromjavascript">
|
||||
<legend>From JavaScript</legend>
|
||||
</fieldset>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,126 +0,0 @@
|
|||
<!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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<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(../button/assets/yahoo.gif) center center no-repeat;
|
||||
text-indent: -5em;
|
||||
overflow: hidden;
|
||||
padding: 0 1em;
|
||||
*margin-left: 5em; /* IE only */
|
||||
_padding: 0 2em; /* IE < 7 only */
|
||||
|
||||
}
|
||||
|
||||
#linkbutton3 a,
|
||||
#linkbutton6 a {
|
||||
|
||||
padding-left: 2.25em;
|
||||
background: url(../button/assets/yahoo.gif) 10% 50% no-repeat;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Link Buttons</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates different ways to create a Button that functions like an HTML <code><a/></code> element.</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.init = function () {
|
||||
|
||||
// "contentready" event handler for the "linkbuttonsfrommarkup" <div>
|
||||
|
||||
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.com", container: "linkbuttonsfromjavascript" });
|
||||
var oLinkButton5 = new YAHOO.widget.Button({ type: "link", id: "linkbutton5", label: "Yahoo!", href: "http://www.yahoo.com", container: "linkbuttonsfromjavascript" });
|
||||
var oLinkButton6 = new YAHOO.widget.Button({ type: "link", id: "linkbutton6", label: "Yahoo!", href: "http://www.yahoo.com", container: "linkbuttonsfromjavascript" });
|
||||
|
||||
} ();
|
||||
|
||||
</script>
|
||||
|
||||
<div id="button-examples">
|
||||
|
||||
<div id="linkbuttonsfrommarkup">
|
||||
<h2>From Markup</h2>
|
||||
|
||||
<a id="linkbutton1" href="http://www.yahoo.com">Yahoo!</a>
|
||||
<span id="linkbutton2" class="yui-button yui-link-button"><span class="first-child"><a href="http://www.yahoo.com">Yahoo!</a></span></span>
|
||||
<span id="linkbutton3" class="yui-button yui-link-button"><em class="first-child"><a href="http://www.yahoo.com">Yahoo!</a></em></span>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="linkbuttonsfromjavascript">
|
||||
<h2>From JavaScript</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,146 +0,0 @@
|
|||
<!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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<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>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Checkbox Buttons</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates different ways to create a Button that functions like an HTML checkbox (<code><input type="checkbox"/></code>).</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.init = function () {
|
||||
|
||||
// "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 YAHOO.widget.Button("checkbutton1", { label: "One" });
|
||||
var oCheckButton2 = new YAHOO.widget.Button("checkbutton2", { label: "Two" });
|
||||
var oCheckButton3 = new YAHOO.widget.Button("checkbutton3", { label: "Three" });
|
||||
var oCheckButton4 = new YAHOO.widget.Button("checkbutton4", { label: "Four" });
|
||||
|
||||
|
||||
// Create Buttons using the YUI Button markup
|
||||
|
||||
var oCheckButton5 = new YAHOO.widget.Button("checkbutton5", { type: "checkbox", value: "1", checked: true });
|
||||
var oCheckButton6 = new YAHOO.widget.Button("checkbutton6", { type: "checkbox", value: "2"});
|
||||
var oCheckButton7 = new YAHOO.widget.Button("checkbutton7", { type: "checkbox", value: "3" });
|
||||
var oCheckButton8 = new YAHOO.widget.Button("checkbutton8", { type: "checkbox", value: "4" });
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Create Buttons without using existing markup
|
||||
|
||||
var oCheckButton9 = new YAHOO.widget.Button({ type: "checkbox", label: "One", id: "checkbutton9", name: "checkboxfield3", value: "1", container: "checkboxbuttonsfromjavascript", checked: true });
|
||||
var oCheckButton10 = new YAHOO.widget.Button({ type: "checkbox", label: "Two", id: "checkbutton10", name: "checkboxfield3", value: "2", container: "checkboxbuttonsfromjavascript" });
|
||||
var oCheckButton11 = new YAHOO.widget.Button({ type: "checkbox", label: "Three", id: "checkbutton11", name: "checkboxfield3", value: "3", container: "checkboxbuttonsfromjavascript" });
|
||||
var oCheckButton12 = new YAHOO.widget.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" action="#">
|
||||
|
||||
<fieldset id="checkboxbuttons">
|
||||
<legend>Checkbox Buttons</legend>
|
||||
|
||||
<fieldset id="checkboxbuttonsfrommarkup">
|
||||
<legend>From Markup</legend>
|
||||
|
||||
<div>
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span id="checkbutton5" class="yui-button yui-checkbox-button"><span class="first-child"><button type="button" name="checkboxfield2">One</button></span></span>
|
||||
<span id="checkbutton6" class="yui-button yui-checkbox-button"><span class="first-child"><button type="button" name="checkboxfield2">Two</button></span></span>
|
||||
<span id="checkbutton7" class="yui-button yui-checkbox-button"><span class="first-child"><button type="button" name="checkboxfield2">Three</button></span></span>
|
||||
<span id="checkbutton8" class="yui-button yui-checkbox-button"><span class="first-child"><button type="button" name="checkboxfield2">Four</button></span></span>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="checkboxbuttonsfromjavascript">
|
||||
<legend>From JavaScript</legend>
|
||||
</fieldset>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<div>
|
||||
<input type="reset" name="resetbutton" value="Reset Form">
|
||||
<input type="submit" name="submitbutton" value="Submit Form">
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,165 +0,0 @@
|
|||
<!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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<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>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Radio Buttons</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates different ways to create a Button that functions like an HTML radio button (<code><input type="radio"/></code>).</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.init = function () {
|
||||
|
||||
// "checkedButtonChange" event handler for each ButtonGroup instance
|
||||
|
||||
function onCheckedButtonChange(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 YAHOO.widget.ButtonGroup("buttongroup1");
|
||||
oButtonGroup1.on("checkedButtonChange", onCheckedButtonChange);
|
||||
|
||||
var oButtonGroup2 = new YAHOO.widget.ButtonGroup("buttongroup2");
|
||||
oButtonGroup2.on("checkedButtonChange", onCheckedButtonChange);
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Create a ButtonGroup without using existing markup
|
||||
|
||||
var oButtonGroup3 = new YAHOO.widget.ButtonGroup({ id: "buttongroup3", name: "radiofield3", container: "radiobuttonsfromjavascript" });
|
||||
|
||||
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" action="#">
|
||||
|
||||
<fieldset id="radiobuttons">
|
||||
<legend>Radio Buttons</legend>
|
||||
|
||||
<fieldset id="radiobuttonsfrommarkup">
|
||||
<legend>From Markup</legend>
|
||||
|
||||
<div id="buttongroup1" class="yui-buttongroup">
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<div id="buttongroup2" class="yui-buttongroup">
|
||||
<span id="radio5" class="yui-button yui-radio-button yui-button-checked"><span class="first-child"><button type="button" name="radiofield2" value="Radio 5">Radio 5</button></span></span>
|
||||
<span id="radio6" class="yui-button yui-radio-button"><span class="first-child"><button type="button" name="radiofield2" value="Radio 6">Radio 6</button></span></span>
|
||||
<span id="radio7" class="yui-button yui-radio-button"><span class="first-child"><button type="button" name="radiofield2" value="Radio 7">Radio 7</button></span></span>
|
||||
<span id="radio8" class="yui-button yui-radio-button"><span class="first-child"><button type="button" name="radiofield2" value="Radio 8">Radio 8</button></span></span>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="radiobuttonsfromjavascript">
|
||||
<legend>From JavaScript</legend>
|
||||
</fieldset>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<div>
|
||||
<input type="reset" name="resetbutton" value="Reset Form">
|
||||
<input type="submit" name="submitbutton" value="Submit Form">
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,172 +0,0 @@
|
|||
<!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>Submit 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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<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>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Submit Buttons</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates different ways to create a Button that functions like an HTML submit button (<code><input type="submit"/></code> and <code><button type="submit"/></code>).</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.init = function () {
|
||||
|
||||
// "contentready" event handler for the "submitbuttonsfrommarkup" <fieldset>
|
||||
|
||||
YAHOO.util.Event.onContentReady("submitbuttonsfrommarkup", function () {
|
||||
|
||||
// Create a Button using an existing <input> element as a data source
|
||||
|
||||
var oSubmitButton1 = new YAHOO.widget.Button("submitbutton1", { value: "submitbutton1value" });
|
||||
|
||||
// Create a Button using an existing <button> element as a data source
|
||||
|
||||
var oSubmitButton2 = new YAHOO.widget.Button("submitbutton2");
|
||||
|
||||
// Create a Button using the YUI Button markup
|
||||
|
||||
var oSubmitButton3 = new YAHOO.widget.Button("submitbutton3", { value: "submitbutton3value" });
|
||||
|
||||
var oSubmitButton4 = new YAHOO.widget.Button("submitbutton4", { type: "submit", value: "submitbutton4value" });
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Create a Button without using existing markup
|
||||
|
||||
var oSubmitButton5 = new YAHOO.widget.Button({ type: "submit", label: "Submit Form", id: "submitbutton5", name: "submitbutton5", value: "submitbutton5value", container: "submitbuttonsfromjavascript" });
|
||||
|
||||
function onExampleSubmit(p_oEvent) {
|
||||
|
||||
var bSubmit = window.confirm("Are you sure you want to submit this form?");
|
||||
|
||||
if(!bSubmit) {
|
||||
|
||||
YAHOO.util.Event.preventDefault(p_oEvent);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
|
||||
|
||||
} ();
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
|
||||
<fieldset>
|
||||
<legend>Info</legend>
|
||||
|
||||
<label for="firstname">First Name: </label><input type="text" id="firstname" name="firstname" value="">
|
||||
<label for="lastname">Last Name: </label><input type="text" id="lastname" name="lastname" value="">
|
||||
|
||||
<div>
|
||||
<label for="male">Gender: </label>
|
||||
|
||||
<label for="male">Male </label>
|
||||
<input type="radio" id="male" name="gender" value="male" checked>
|
||||
|
||||
<label for="female">Female </label>
|
||||
<input type="radio" id="female" name="gender" value="female">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="month">Birthday: </label>
|
||||
<select id="month" name="month"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select>
|
||||
<select name="day"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
|
||||
<input type="text" name="year" value="">
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="submitbuttons">
|
||||
<legend>Submit Buttons</legend>
|
||||
|
||||
<fieldset id="submitbuttonsfrommarkup">
|
||||
<legend>From Markup</legend>
|
||||
|
||||
<div>
|
||||
<input id="submitbutton1" type="submit" name="submitfield1" value="Submit Form">
|
||||
<button id="submitbutton2" type="submit" name="submitfield2" value="submitfield2value">Submit Form</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span id="submitbutton3" class="yui-button yui-submit-button"><span class="first-child"><input type="submit" name="submitfield3" value="Submit Form"></span></span>
|
||||
<span id="submitbutton4" class="yui-button yui-submit-button"><span class="first-child"><button type="button" name="submitfield4">Submit Form</button></span></span>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="submitbuttonsfromjavascript">
|
||||
<legend>From JavaScript</legend>
|
||||
</fieldset>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,142 +0,0 @@
|
|||
<!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>Reset 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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
|
||||
#button-example-form fieldset,
|
||||
#button-example-form fieldset div {
|
||||
|
||||
border: 2px groove #ccc;
|
||||
margin: .5em;
|
||||
padding: .5em;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Reset Buttons</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates different ways to create a Button that functions like an HTML reset button (<code><input type="reset"/></code> and <code><button type="reset"/></code>).</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.init = function () {
|
||||
|
||||
// "contentready" event handler for the "resetbuttonsfrommarkup" <fieldset>
|
||||
|
||||
YAHOO.util.Event.onContentReady("resetbuttonsfrommarkup", function () {
|
||||
|
||||
// Create a Button using an existing <input> element as a data source
|
||||
|
||||
var oResetButton1 = new YAHOO.widget.Button("resetbutton1");
|
||||
|
||||
// Create a Button using an existing <button> element as a data source
|
||||
|
||||
var oResetButton2 = new YAHOO.widget.Button("resetbutton2");
|
||||
|
||||
|
||||
// Create a Button using the YUI Button markup
|
||||
|
||||
var oResetButton3 = new YAHOO.widget.Button("resetbutton3");
|
||||
|
||||
var oResetButton4 = new YAHOO.widget.Button("resetbutton4", { type: "reset" });
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Create a Button without using existing markup
|
||||
|
||||
var oResetButton5 = new YAHOO.widget.Button({ type: "reset", label: "Reset Form", id: "resetfield5", container: "resetbuttonsfromjavascript" });
|
||||
|
||||
} ();
|
||||
|
||||
</script>
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
|
||||
<fieldset>
|
||||
<legend>Info</legend>
|
||||
|
||||
<label for="firstname">First Name: </label><input type="text" id="firstname" name="firstname" value="">
|
||||
<label for="lastname">Last Name: </label><input type="text" id="lastname" name="lastname" value="">
|
||||
|
||||
<div>
|
||||
<label for="male">Gender: </label>
|
||||
|
||||
<label for="male">Male </label>
|
||||
<input type="radio" id="male" name="gender" value="male" checked>
|
||||
|
||||
<label for="female">Female </label>
|
||||
<input type="radio" id="female" name="gender" value="female">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="month">Birthday: </label>
|
||||
<select id="month" name="month"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select>
|
||||
<select name="day"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option></select>
|
||||
<input type="text" name="year" value="">
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="resetbuttons">
|
||||
<legend>Reset Buttons</legend>
|
||||
|
||||
<fieldset id="resetbuttonsfrommarkup">
|
||||
<legend>From Markup</legend>
|
||||
|
||||
<div>
|
||||
<input id="resetbutton1" type="reset" name="resetfield1" value="Reset Form">
|
||||
<button id="resetbutton2" type="reset" name="resetfield2">Reset Form</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span id="resetbutton3" class="yui-button yui-reset-button"><span class="first-child"><input type="reset" name="resetfield3" value="Reset Form"></span></span>
|
||||
<span id="resetbutton4" class="yui-button yui-reset-button"><span class="first-child"><button type="button" name="resetfield4">Reset Form</button></span></span>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="resetbuttonsfromjavascript">
|
||||
<legend>From JavaScript</legend>
|
||||
</fieldset>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,234 +0,0 @@
|
|||
<!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>Menu 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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
|
||||
/*
|
||||
Set the "zoom" property to "normal" since it is set to "1" by the
|
||||
".example-container .bd" rule in yui.css and this causes a Menu
|
||||
instance's width to expand to 100% of the browser viewport.
|
||||
*/
|
||||
|
||||
div.yuimenu .bd {
|
||||
|
||||
zoom: normal;
|
||||
|
||||
}
|
||||
|
||||
#button-example-form fieldset {
|
||||
|
||||
border: 2px groove #ccc;
|
||||
margin: .5em;
|
||||
padding: .5em;
|
||||
|
||||
}
|
||||
|
||||
#menubutton3menu,
|
||||
#menubutton5menu {
|
||||
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
border: solid 1px #000;
|
||||
padding: .5em;
|
||||
background-color: #ccc;
|
||||
|
||||
}
|
||||
|
||||
#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>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Menu Buttons</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates different ways to create a Menu Button.</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.init = function () {
|
||||
|
||||
// "contentready" event handler for the "menubuttonsfrommarkup" <fieldset>
|
||||
|
||||
YAHOO.util.Event.onContentReady("menubuttonsfrommarkup", function () {
|
||||
|
||||
// Create a Button using an existing <input> element as a data source
|
||||
|
||||
var oMenuButton1 = new YAHOO.widget.Button("menubutton1", { type: "menu", menu: "menubutton1select" });
|
||||
|
||||
var oMenuButton2 = new YAHOO.widget.Button("menubutton2", { type: "menu", menu: "menubutton2select" });
|
||||
|
||||
|
||||
// Create a Button using an existing <input> element and a YAHOO.widget.Overlay instance as its menu
|
||||
|
||||
var oMenuButton3 = new YAHOO.widget.Button("menubutton3", { type: "menu", menu: "menubutton3menu" });
|
||||
|
||||
});
|
||||
|
||||
|
||||
// "click" event handler for each item in the Button's menu
|
||||
|
||||
function onMenuItemClick(p_sType, p_aArgs, p_oItem) {
|
||||
|
||||
oMenuButton4.set("label", p_oItem.cfg.getProperty("text"));
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Create a Button without using existing markup
|
||||
|
||||
// Create an array of YAHOO.widget.MenuItem configuration properties
|
||||
|
||||
var aMenuButton4Menu = [
|
||||
|
||||
{ text: "one", value: 1, onclick: { fn: onMenuItemClick } },
|
||||
{ text: "two", value: 2, onclick: { fn: onMenuItemClick } },
|
||||
{ text: "three", value: 3, onclick: { fn: onMenuItemClick } }
|
||||
|
||||
];
|
||||
|
||||
/*
|
||||
Instantiate a Menu Button using the array of YAHOO.widget.MenuItem
|
||||
configuration properties as the value for the "menu" configuration
|
||||
attribute.
|
||||
*/
|
||||
|
||||
var oMenuButton4 = new YAHOO.widget.Button({ type: "menu", label: "one", name: "mymenubutton", menu: aMenuButton4Menu, container: "menubuttonsfromjavascript" });
|
||||
|
||||
|
||||
/*
|
||||
Search for an element to place the Menu Button into via the
|
||||
Event utilities "onContentReady" method
|
||||
*/
|
||||
|
||||
YAHOO.util.Event.onContentReady("menubuttonsfromjavascript", function () {
|
||||
|
||||
// Instantiate an Overlay instance
|
||||
|
||||
var oOverlay = new YAHOO.widget.Overlay("menubutton5menu", { visible: false });
|
||||
|
||||
oOverlay.setBody("Menu Button 5 Menu");
|
||||
|
||||
// Instantiate a Menu Button
|
||||
|
||||
var oMenuButton5 = new YAHOO.widget.Button({ type: "menu", label: "Menu Button 5", menu: oOverlay });
|
||||
|
||||
/*
|
||||
Append the Menu Button and Overlay to the element with the id
|
||||
of "menubuttonsfromjavascript"
|
||||
*/
|
||||
|
||||
oMenuButton5.appendTo(this);
|
||||
|
||||
oOverlay.render(this);
|
||||
|
||||
});
|
||||
|
||||
|
||||
function onExampleSubmit(p_oEvent) {
|
||||
|
||||
var bSubmit = window.confirm("Are you sure you want to submit this form?");
|
||||
|
||||
if(!bSubmit) {
|
||||
|
||||
YAHOO.util.Event.preventDefault(p_oEvent);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
|
||||
|
||||
} ();
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
|
||||
<fieldset id="menubuttons">
|
||||
<legend>Menu Buttons</legend>
|
||||
|
||||
<fieldset id="menubuttonsfrommarkup">
|
||||
<legend>From Markup</legend>
|
||||
|
||||
<input type="submit" id="menubutton1" name="menubutton1_button" value="Menu Button 1">
|
||||
<select id="menubutton1select" name="menubutton1select">
|
||||
<option value="0">One</option>
|
||||
<option value="1">Two</option>
|
||||
<option value="2">Three</option>
|
||||
</select>
|
||||
|
||||
|
||||
<input type="button" id="menubutton2" name="menubutton2_button" value="Menu Button 2">
|
||||
<select id="menubutton2select" name="menubutton2select">
|
||||
<option value="0">One</option>
|
||||
<option value="1">Two</option>
|
||||
<option value="2">Three</option>
|
||||
</select>
|
||||
|
||||
<input type="button" id="menubutton3" name="menubutton3_button" value="Menu Button 3">
|
||||
<div id="menubutton3menu" class="yui-overlay">
|
||||
<div class="bd">Menu Button 3 Menu</div>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="menubuttonsfromjavascript">
|
||||
<legend>From JavaScript</legend>
|
||||
</fieldset>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,222 +0,0 @@
|
|||
<!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>Split 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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
|
||||
/*
|
||||
Set the "zoom" property to "normal" since it is set to "1" by the
|
||||
".example-container .bd" rule in yui.css and this causes a Menu
|
||||
instance's width to expand to 100% of the browser viewport.
|
||||
*/
|
||||
|
||||
div.yuimenu .bd {
|
||||
|
||||
zoom: normal;
|
||||
|
||||
}
|
||||
|
||||
#button-example-form fieldset {
|
||||
|
||||
border: 2px groove #ccc;
|
||||
margin: .5em;
|
||||
padding: .5em;
|
||||
|
||||
}
|
||||
|
||||
#splitbutton3menu,
|
||||
#splitbutton5menu {
|
||||
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
border: solid 1px #000;
|
||||
padding: .5em;
|
||||
background-color: #ccc;
|
||||
|
||||
}
|
||||
|
||||
#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>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Split Buttons</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates different ways to create a Split Button.</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.init = function () {
|
||||
|
||||
// "contentready" event handler for the "splitbuttonsfrommarkup" <fieldset>
|
||||
|
||||
YAHOO.util.Event.onContentReady("splitbuttonsfrommarkup", function () {
|
||||
|
||||
// Create a Button using an existing <input> element as a data source
|
||||
|
||||
var oSplitButton1 = new YAHOO.widget.Button("splitbutton1", { type: "split", menu: "splitbutton1select" });
|
||||
|
||||
var oSplitButton2 = new YAHOO.widget.Button("splitbutton2", { type: "split", menu: "splitbutton2select" });
|
||||
|
||||
// Create a Button using an existing <input> element and a YAHOO.widget.Overlay instance as its menu
|
||||
|
||||
var oSplitButton3 = new YAHOO.widget.Button("splitbutton3", { type: "split", menu: "splitbutton3menu" });
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Create a Button without using existing markup
|
||||
|
||||
// Create an array of YAHOO.widget.MenuItem configuration properties
|
||||
|
||||
var aSplitButton4Menu = [
|
||||
|
||||
{ text: "one", value: 1 },
|
||||
{ text: "two", value: 2 },
|
||||
{ text: "three", value: 3 }
|
||||
|
||||
];
|
||||
|
||||
/*
|
||||
Instantiate a Split Button using the array of YAHOO.widget.MenuItem
|
||||
configuration properties as the value for the "menu" configuration
|
||||
attribute.
|
||||
*/
|
||||
|
||||
var oSplitButton4 = new YAHOO.widget.Button({ type: "split", label: "Split Button 4", name: "splitbutton3", menu: aSplitButton4Menu, container: "splitbuttonsfromjavascript" });
|
||||
|
||||
/*
|
||||
Search for an element to place the Split Button into via the
|
||||
Event utilities "onContentReady" method
|
||||
*/
|
||||
|
||||
YAHOO.util.Event.onContentReady("splitbuttonsfromjavascript", function () {
|
||||
|
||||
// Instantiate an Overlay instance
|
||||
|
||||
var oOverlay = new YAHOO.widget.Overlay("splitbutton5menu", { visible: false });
|
||||
|
||||
oOverlay.setBody("Split Button 5 Menu");
|
||||
|
||||
|
||||
// Instantiate a Split Button
|
||||
|
||||
var oSplitButton5 = new YAHOO.widget.Button({ type: "split", label: "Split Button 5", menu: oOverlay });
|
||||
|
||||
/*
|
||||
Append the Split Button and Overlay to the element with the id
|
||||
of "splitbuttonsfromjavascript"
|
||||
*/
|
||||
|
||||
oSplitButton5.appendTo(this);
|
||||
|
||||
oOverlay.render(this);
|
||||
|
||||
});
|
||||
|
||||
|
||||
function onExampleSubmit(p_oEvent) {
|
||||
|
||||
var bSubmit = window.confirm("Are you sure you want to submit this form?");
|
||||
|
||||
if(!bSubmit) {
|
||||
|
||||
YAHOO.util.Event.preventDefault(p_oEvent);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
|
||||
|
||||
} ();
|
||||
|
||||
</script>
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
|
||||
<fieldset id="splitbuttons">
|
||||
<legend>Split Buttons</legend>
|
||||
|
||||
<fieldset id="splitbuttonsfrommarkup">
|
||||
<legend>From Markup</legend>
|
||||
|
||||
<input type="submit" id="splitbutton1" name="splitbutton1_button" value="Split Button 1">
|
||||
<select id="splitbutton1select" name="splitbutton1select" multiple>
|
||||
<option value="0">One</option>
|
||||
<option value="1">Two</option>
|
||||
<option value="2">Three</option>
|
||||
</select>
|
||||
|
||||
<input type="button" id="splitbutton2" name="splitbutton2_button" value="Split Button 2">
|
||||
<select id="splitbutton2select" name="splitbutton2select">
|
||||
<option value="0">One</option>
|
||||
<option value="1">Two</option>
|
||||
<option value="2">Three</option>
|
||||
</select>
|
||||
|
||||
<input type="button" id="splitbutton3" name="splitbutton3_button" value="Split Button 3">
|
||||
<div id="splitbutton3menu" class="yui-overlay">
|
||||
<div class="bd">Split Button 3 Menu</div>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="splitbuttonsfromjavascript">
|
||||
<legend>From JavaScript</legend>
|
||||
</fieldset>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,252 +0,0 @@
|
|||
<!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>Calendar Menu 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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/calendar/assets/skins/sam/calendar.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/calendar/calendar-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
|
||||
/*
|
||||
Set the "zoom" property to "normal" since it is set to "1" by the
|
||||
".example-container .bd" rule in yui.css and this causes a Menu
|
||||
instance's width to expand to 100% of the browser viewport.
|
||||
*/
|
||||
|
||||
div.yuimenu .bd {
|
||||
|
||||
zoom: normal;
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
Restore default padding of 10px for the calendar containtainer
|
||||
that is overridden by the ".example-container .bd .bd" rule
|
||||
in yui.css.
|
||||
*/
|
||||
|
||||
#calendarcontainer {
|
||||
|
||||
padding:10px;
|
||||
|
||||
}
|
||||
|
||||
#calendarmenu {
|
||||
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
|
||||
#calendarpicker button {
|
||||
|
||||
background: url(../button/assets/calendar_icon.gif) center center no-repeat;
|
||||
text-align: left;
|
||||
text-indent: -10em;
|
||||
overflow: hidden;
|
||||
*margin-left: 10em; /* For IE */
|
||||
*padding: 0 3em; /* For IE */
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
#month-field,
|
||||
#day-field {
|
||||
|
||||
width: 2em;
|
||||
|
||||
}
|
||||
|
||||
#year-field {
|
||||
|
||||
width: 3em;
|
||||
|
||||
}
|
||||
|
||||
#datefields {
|
||||
|
||||
border: solid 1px #666;
|
||||
padding: .5em;
|
||||
|
||||
}
|
||||
|
||||
#calendarpicker {
|
||||
|
||||
vertical-align: baseline;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Calendar Menu Button</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>
|
||||
This example demonstrates how to create a Menu Button whose Menu instance displays a Calendar.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.util.Event.onDOMReady(function () {
|
||||
|
||||
function onButtonClick() {
|
||||
|
||||
/*
|
||||
Create an empty body element for the Overlay instance in order
|
||||
to reserve space to render the Calendar instance into.
|
||||
*/
|
||||
|
||||
oCalendarMenu.setBody(" ");
|
||||
|
||||
oCalendarMenu.body.id = "calendarcontainer";
|
||||
|
||||
|
||||
// Render the Overlay instance into the Button's parent element
|
||||
|
||||
oCalendarMenu.render(this.get("container"));
|
||||
|
||||
|
||||
// Align the Overlay to the Button instance
|
||||
|
||||
oCalendarMenu.align();
|
||||
|
||||
|
||||
/*
|
||||
Create a Calendar instance and render it into the body
|
||||
element of the Overlay.
|
||||
*/
|
||||
|
||||
var oCalendar = new YAHOO.widget.Calendar("buttoncalendar", oCalendarMenu.body.id);
|
||||
|
||||
oCalendar.render();
|
||||
|
||||
|
||||
/*
|
||||
Subscribe to the Calendar instance's "changePage" event to
|
||||
keep the Overlay visible when either the previous or next page
|
||||
controls are clicked.
|
||||
*/
|
||||
|
||||
oCalendar.changePageEvent.subscribe(function () {
|
||||
|
||||
window.setTimeout(function () {
|
||||
|
||||
oCalendarMenu.show();
|
||||
|
||||
}, 0);
|
||||
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
Subscribe to the Calendar instance's "select" event to
|
||||
update the month, day, year form fields when the user
|
||||
selects a date.
|
||||
*/
|
||||
|
||||
oCalendar.selectEvent.subscribe(function (p_sType, p_aArgs) {
|
||||
|
||||
var aDate;
|
||||
|
||||
if (p_aArgs) {
|
||||
|
||||
aDate = p_aArgs[0][0];
|
||||
|
||||
YAHOO.util.Dom.get("month-field").value = aDate[1];
|
||||
YAHOO.util.Dom.get("day-field").value = aDate[2];
|
||||
YAHOO.util.Dom.get("year-field").value = aDate[0];
|
||||
|
||||
}
|
||||
|
||||
oCalendarMenu.hide();
|
||||
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
Unsubscribe from the "click" event so that this code is
|
||||
only executed once
|
||||
*/
|
||||
|
||||
this.unsubscribe("click", onButtonClick);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Create an Overlay instance to house the Calendar instance
|
||||
|
||||
var oCalendarMenu = new YAHOO.widget.Overlay("calendarmenu");
|
||||
|
||||
|
||||
// Create a Button instance of type "menu"
|
||||
|
||||
var oButton = new YAHOO.widget.Button({
|
||||
type: "menu",
|
||||
id: "calendarpicker",
|
||||
label: "Choose A Date",
|
||||
menu: oCalendarMenu,
|
||||
container: "datefields" });
|
||||
|
||||
|
||||
/*
|
||||
Add a "click" event listener that will render the Overlay, and
|
||||
instantiate the Calendar the first time the Button instance is
|
||||
clicked.
|
||||
*/
|
||||
|
||||
oButton.on("click", onButtonClick);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<div>
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
|
||||
<fieldset id="datefields">
|
||||
|
||||
<legend>Date</legend>
|
||||
|
||||
<label for="month-field">Month: </label> <input id="month-field" type="text" name="month">
|
||||
<label for="day-field">Day:</label> <input id="day-field" type="text" name="day">
|
||||
<label for="year-field">Year: </label> <input id="year-field" type="text" name="year">
|
||||
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,338 +0,0 @@
|
|||
<!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>Calendar Menu 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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/calendar/assets/skins/sam/calendar.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/calendar/calendar-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
|
||||
/*
|
||||
Set the "zoom" property to "normal" since it is set to "1" by the
|
||||
".example-container .bd" rule in yui.css and this causes a Menu
|
||||
instance's width to expand to 100% of the browser viewport.
|
||||
*/
|
||||
|
||||
div.yuimenu .bd {
|
||||
|
||||
zoom: normal;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#calendarmenu {
|
||||
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Restore default padding of 10px for the calendar containtainer
|
||||
that is overridden by the ".example-container .bd .bd" rule
|
||||
in yui.css.
|
||||
*/
|
||||
|
||||
#calendarcontainer {
|
||||
|
||||
padding:10px;
|
||||
|
||||
}
|
||||
|
||||
#personalinfo {
|
||||
|
||||
border: solid 1px #666;
|
||||
padding: .5em;
|
||||
|
||||
}
|
||||
|
||||
#calendarpicker {
|
||||
|
||||
vertical-align: baseline;
|
||||
|
||||
}
|
||||
|
||||
div.field {
|
||||
|
||||
padding: .25em;
|
||||
|
||||
}
|
||||
|
||||
input#year {
|
||||
|
||||
width: 4em;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Calendar Menu Button</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>
|
||||
This example demonstrates how to create a Menu Button whose Menu displays a
|
||||
Calendar. Selecting a date from the Calendar updates the label of the Button
|
||||
to reflect the currently selected date.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.util.Event.onContentReady("datefields", function () {
|
||||
|
||||
function onButtonClick() {
|
||||
|
||||
/*
|
||||
Create an empty body element for the Overlay instance in order
|
||||
to reserve space to render the Calendar instance into.
|
||||
*/
|
||||
|
||||
oCalendarMenu.setBody(" ");
|
||||
|
||||
oCalendarMenu.body.id = "calendarcontainer";
|
||||
|
||||
|
||||
// Render the Overlay instance into the Button's parent element
|
||||
|
||||
oCalendarMenu.render(this.get("container"));
|
||||
|
||||
|
||||
// Align the Overlay to the Button instance
|
||||
|
||||
oCalendarMenu.align();
|
||||
|
||||
|
||||
/*
|
||||
Create a Calendar instance and render it into the body
|
||||
element of the Overlay.
|
||||
*/
|
||||
|
||||
var oCalendar = new YAHOO.widget.Calendar("buttoncalendar", oCalendarMenu.body.id);
|
||||
|
||||
oCalendar.render();
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Subscribe to the Calendar instance's "changePage" event to
|
||||
keep the Overlay visible when either the previous or next page
|
||||
controls are clicked.
|
||||
*/
|
||||
|
||||
oCalendar.changePageEvent.subscribe(function () {
|
||||
|
||||
window.setTimeout(function () {
|
||||
|
||||
oCalendarMenu.show();
|
||||
|
||||
}, 0);
|
||||
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
Subscribe to the Calendar instance's "select" event to
|
||||
update the Button instance's label when the user
|
||||
selects a date.
|
||||
*/
|
||||
|
||||
oCalendar.selectEvent.subscribe(function (p_sType, p_aArgs) {
|
||||
|
||||
var aDate,
|
||||
nMonth,
|
||||
nDay,
|
||||
nYear;
|
||||
|
||||
if (p_aArgs) {
|
||||
|
||||
aDate = p_aArgs[0][0];
|
||||
|
||||
nMonth = aDate[1];
|
||||
nDay = aDate[2];
|
||||
nYear = aDate[0];
|
||||
|
||||
oButton.set("label", (nMonth + "/" + nDay + "/" + nYear));
|
||||
|
||||
|
||||
// Sync the Calendar instance's selected date with the date form fields
|
||||
|
||||
YAHOO.util.Dom.get("month").selectedIndex = (nMonth - 1);
|
||||
YAHOO.util.Dom.get("day").selectedIndex = (nDay - 1);
|
||||
YAHOO.util.Dom.get("year").value = nYear;
|
||||
|
||||
}
|
||||
|
||||
oCalendarMenu.hide();
|
||||
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
Unsubscribe from the "click" event so that this code is
|
||||
only executed once
|
||||
*/
|
||||
|
||||
this.unsubscribe("click", onButtonClick);
|
||||
|
||||
}
|
||||
|
||||
|
||||
var oDateFields = YAHOO.util.Dom.get("datefields");
|
||||
oMonthField = YAHOO.util.Dom.get("month"),
|
||||
oDayField = YAHOO.util.Dom.get("day"),
|
||||
oYearField = YAHOO.util.Dom.get("year");
|
||||
|
||||
|
||||
/*
|
||||
Hide the form fields used for the date so that they can be replaced by the
|
||||
calendar button.
|
||||
*/
|
||||
|
||||
oMonthField.style.display = "none";
|
||||
oDayField.style.display = "none";
|
||||
oYearField.style.display = "none";
|
||||
|
||||
|
||||
// Create a Overlay instance to house the Calendar instance
|
||||
|
||||
var oCalendarMenu = new YAHOO.widget.Overlay("calendarmenu");
|
||||
|
||||
|
||||
// Create a Button instance of type "menu"
|
||||
|
||||
var oButton = new YAHOO.widget.Button({
|
||||
type: "menu",
|
||||
id: "calendarpicker",
|
||||
label: "Choose A Date",
|
||||
menu: oCalendarMenu,
|
||||
container: oDateFields });
|
||||
|
||||
|
||||
/*
|
||||
Add a listener for the "click" event. This listener will be
|
||||
used to defer the creation the Calendar instance until the
|
||||
first time the Button's Overlay instance is requested to be displayed
|
||||
by the user.
|
||||
*/
|
||||
|
||||
oButton.on("click", onButtonClick);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
|
||||
<fieldset id="personalinfo">
|
||||
|
||||
<legend>Personal Information</legend>
|
||||
|
||||
<div class="field">
|
||||
<label for="firstname">First Name: </label>
|
||||
<input type="text" id="firstname" name="firstname" value="">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="lastname">Last Name: </label>
|
||||
<input type="text" id="lastname" name="lastname" value="">
|
||||
</div>
|
||||
|
||||
<div class="field" id="datefields">
|
||||
|
||||
<label for="month">Birthday: </label>
|
||||
|
||||
<select id="month" name="month">
|
||||
<option value="01">01</option>
|
||||
<option value="02">02</option>
|
||||
<option value="03">03</option>
|
||||
<option value="04">04</option>
|
||||
<option value="05">05</option>
|
||||
<option value="06">06</option>
|
||||
<option value="07">07</option>
|
||||
<option value="08">08</option>
|
||||
<option value="09">09</option>
|
||||
<option value="10">10</option>
|
||||
<option value="11">11</option>
|
||||
<option value="12">12</option>
|
||||
</select>
|
||||
|
||||
<select id="day" name="day">
|
||||
<option value="01">01</option>
|
||||
<option value="02">02</option>
|
||||
<option value="03">03</option>
|
||||
<option value="04">04</option>
|
||||
<option value="05">05</option>
|
||||
<option value="06">06</option>
|
||||
<option value="07">07</option>
|
||||
<option value="08">08</option>
|
||||
<option value="09">09</option>
|
||||
<option value="10">10</option>
|
||||
<option value="11">11</option>
|
||||
<option value="12">12</option>
|
||||
<option value="13">13</option>
|
||||
<option value="14">14</option>
|
||||
<option value="15">15</option>
|
||||
<option value="16">16</option>
|
||||
<option value="17">17</option>
|
||||
<option value="18">18</option>
|
||||
<option value="19">19</option>
|
||||
<option value="20">20</option>
|
||||
<option value="21">21</option>
|
||||
<option value="22">22</option>
|
||||
<option value="23">23</option>
|
||||
<option value="24">24</option>
|
||||
<option value="25">25</option>
|
||||
<option value="26">26</option>
|
||||
<option value="27">27</option>
|
||||
<option value="28">28</option>
|
||||
<option value="29">29</option>
|
||||
<option value="30">30</option>
|
||||
<option value="31">31</option>
|
||||
</select>
|
||||
|
||||
<input type="text" id="year" name="year" value="">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
|
||||
<input type="submit" id="submit-button" name="submit-button" value="Submit Form">
|
||||
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,280 +0,0 @@
|
|||
<!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>Color Picker 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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/colorpicker/assets/skins/sam/colorpicker.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/slider/slider-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/colorpicker/colorpicker-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
|
||||
/*
|
||||
Set the "zoom" property to "normal" since it is set to "1" by the
|
||||
".example-container .bd" rule in yui.css and this causes a Menu
|
||||
instance's width to expand to 100% of the browser viewport.
|
||||
*/
|
||||
|
||||
div.yuimenu .bd {
|
||||
|
||||
zoom: normal;
|
||||
|
||||
}
|
||||
|
||||
#button-container {
|
||||
|
||||
padding: .5em;
|
||||
|
||||
}
|
||||
|
||||
#color-picker-button {
|
||||
|
||||
vertical-align: baseline;
|
||||
|
||||
}
|
||||
|
||||
#color-picker-button button {
|
||||
|
||||
outline: none; /* Safari */
|
||||
line-height: 1.5;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Style the Button instance's label as a square whose background color
|
||||
represents the current value of the ColorPicker instance.
|
||||
*/
|
||||
|
||||
#current-color {
|
||||
|
||||
display: block;
|
||||
display: inline-block;
|
||||
*display: block; /* For IE */
|
||||
margin-top: .5em;
|
||||
*margin: .25em 0; /* For IE */
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
overflow: hidden;
|
||||
text-indent: 1em;
|
||||
background-color: #fff;
|
||||
white-space: nowrap;
|
||||
border: solid 1px #000;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Hide default colors for the ColorPicker instance. */
|
||||
|
||||
#color-picker-container .yui-picker-controls,
|
||||
#color-picker-container .yui-picker-swatch,
|
||||
#color-picker-container .yui-picker-websafe-swatch {
|
||||
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Size the body element of the Menu instance to match the dimensions of
|
||||
the ColorPicker instance.
|
||||
*/
|
||||
|
||||
#color-picker-menu .bd {
|
||||
|
||||
width: 220px;
|
||||
height: 190px;
|
||||
|
||||
}
|
||||
|
||||
#photo {
|
||||
|
||||
background: #fff url(../button/assets/ggbridge.png) top left no-repeat;
|
||||
|
||||
/*
|
||||
Hide the alpha PNG from IE 6 and make the background image transparent via the use of
|
||||
the AlphaImageLoader that is applied by the filter property.
|
||||
*/
|
||||
|
||||
_background-image: none;
|
||||
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../button/assets/ggbridge.png', sizingMethod='image');;
|
||||
|
||||
border: solid 1px #000;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
|
||||
_width: 398px; /* For IE 6 */
|
||||
_height: 298px; /* For IE 6 */
|
||||
|
||||
}
|
||||
|
||||
#button-container {
|
||||
|
||||
border-top: solid 1px #000;
|
||||
padding: .5em .25em;
|
||||
margin-top: .5em;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Color Picker Button</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>
|
||||
This example demonstrates how to render a Color Picker into the Menu of a Split Button.
|
||||
Use the Color Picker Button below to create a duotone by selecting the background color
|
||||
that should be applied to the image.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.util.Event.onContentReady("button-container", function () {
|
||||
|
||||
function onButtonOption() {
|
||||
|
||||
/*
|
||||
Create an empty body element for the Menu instance in order to
|
||||
reserve space to render the ColorPicker instance into.
|
||||
*/
|
||||
|
||||
oColorPickerMenu.setBody(" ");
|
||||
|
||||
oColorPickerMenu.body.id = "color-picker-container";
|
||||
|
||||
|
||||
|
||||
// Render the Menu into the Button instance's parent element
|
||||
|
||||
oColorPickerMenu.render(this.get("container"));
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Create a new ColorPicker instance, placing it inside the body
|
||||
element of the Menu instance.
|
||||
*/
|
||||
|
||||
var oColorPicker = new YAHOO.widget.ColorPicker(oColorPickerMenu.body.id, {
|
||||
showcontrols: false,
|
||||
images: {
|
||||
PICKER_THUMB: "../../build/colorpicker/assets/picker_thumb.png",
|
||||
HUE_THUMB: "../../build/colorpicker/assets/hue_thumb.png"
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Align the Menu to its Button
|
||||
|
||||
oColorPickerMenu.align();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Add a listener for the ColorPicker instance's "rgbChange" event
|
||||
to update the background color and text of the Button's
|
||||
label to reflect the change in the value of the ColorPicker.
|
||||
*/
|
||||
|
||||
oColorPicker.on("rgbChange", function (p_oEvent) {
|
||||
|
||||
var sColor = "#" + this.get("hex");
|
||||
|
||||
oButton.set("value", sColor);
|
||||
|
||||
YAHOO.util.Dom.setStyle("current-color", "backgroundColor", sColor);
|
||||
YAHOO.util.Dom.get("current-color").innerHTML = "Current color is " + sColor;
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Remove this event listener so that this code runs only once
|
||||
|
||||
this.unsubscribe("option", onButtonOption);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Create a Menu instance to house the ColorPicker instance
|
||||
|
||||
var oColorPickerMenu = new YAHOO.widget.Menu("color-picker-menu");
|
||||
|
||||
|
||||
// Create a Button instance of type "split"
|
||||
|
||||
var oButton = new YAHOO.widget.Button({
|
||||
type: "split",
|
||||
id: "color-picker-button",
|
||||
label: "<em id=\"current-color\">Current color is #FFFFFF.</em>",
|
||||
menu: oColorPickerMenu,
|
||||
container: this });
|
||||
|
||||
|
||||
/*
|
||||
Add a listener for the "option" event. This listener will be
|
||||
used to defer the creation the ColorPicker instance until the
|
||||
first time the Button's Menu instance is requested to be displayed
|
||||
by the user.
|
||||
*/
|
||||
|
||||
oButton.on("option", onButtonOption);
|
||||
|
||||
|
||||
/*
|
||||
Add a listener for the "click" event. This listener will be used to apply the
|
||||
the background color to the photo.
|
||||
*/
|
||||
|
||||
oButton.on("click", function () {
|
||||
|
||||
YAHOO.util.Dom.setStyle("photo", "backgroundColor", this.get("value"));
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<div id="photo"></div>
|
||||
<div id="button-container"><label for="color-picker-button">Background Color: </label></div>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,173 +0,0 @@
|
|||
<!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>Fixed Width Menu 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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
|
||||
/*
|
||||
Set the "zoom" property to "normal" since it is set to "1" by the
|
||||
".example-container .bd" rule in yui.css and this causes a Menu
|
||||
instance's width to expand to 100% of the browser viewport.
|
||||
*/
|
||||
|
||||
div.yuimenu .bd {
|
||||
|
||||
zoom: normal;
|
||||
|
||||
}
|
||||
|
||||
#categorybutton button {
|
||||
|
||||
/*
|
||||
Suppress the focus outline since Safari will outline even the
|
||||
text that is clipped by the application of the "overflow" property
|
||||
in the follow style rule.
|
||||
*/
|
||||
|
||||
outline: none;
|
||||
|
||||
}
|
||||
|
||||
#categorybutton button em {
|
||||
|
||||
font-style: normal;
|
||||
display: block;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
|
||||
/* Restrict the width of the label to 10em. */
|
||||
|
||||
width: 10em;
|
||||
|
||||
/* Hide the overflow if the text label exceeds 10em in width. */
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
/*
|
||||
IE and Safari support the ability to add ellipsis when the text
|
||||
label exceeds 10em in width.
|
||||
*/
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Fixed Width Menu Button</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>
|
||||
This example demonstrates how to create a Menu Button whose text label has a
|
||||
fixed width. The behavior of this widget is similar to an HTML
|
||||
<code><select></code> element in that its label hides any overflow
|
||||
when updated to represent the selected menu item.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.init = function () {
|
||||
|
||||
// Click event handler for the Button instance
|
||||
|
||||
function onMenuClick(p_sType, p_aArgs) {
|
||||
|
||||
// The MenuItem instance that was clicked
|
||||
|
||||
var oMenuItem = p_aArgs[1];
|
||||
|
||||
if (oMenuItem) {
|
||||
|
||||
/*
|
||||
Set the Button's "label" attribute to the value of the
|
||||
"text" configuration property of the MenuItem that was
|
||||
the target of the "click" event.
|
||||
*/
|
||||
|
||||
oButton.set("label", ("<em>" + oMenuItem.cfg.getProperty("text") + "</em>"));
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Create an array of name and value pairs that serve as the data
|
||||
source for the Button instance's menu.
|
||||
*/
|
||||
|
||||
var aCategories = [
|
||||
|
||||
{ text: "Category 1", value: "one" },
|
||||
{ text: "Category 2", value: "two" },
|
||||
{ text: "Category 3", value: "three" },
|
||||
{ text: "A Really, Really Long Category 4", value: "four" }
|
||||
|
||||
];
|
||||
|
||||
|
||||
/*
|
||||
Create a Button instance, wrapping the text label in an <EM>
|
||||
tag that will be given a fixed width of 10em.
|
||||
*/
|
||||
|
||||
var oButton = new YAHOO.widget.Button({
|
||||
type: "menu",
|
||||
id:"categorybutton",
|
||||
label: "<em>Select a Category</em>",
|
||||
menu: aCategories,
|
||||
container: "buttoncontainer" });
|
||||
|
||||
/*
|
||||
Subscribe to the Menu instance's "click" event once the Button
|
||||
instance is appended to its specified container.s
|
||||
*/
|
||||
|
||||
oButton.on("appendTo", function () {
|
||||
|
||||
oButton.getMenu().subscribe("click", onMenuClick);
|
||||
|
||||
});
|
||||
|
||||
} ();
|
||||
|
||||
</script>
|
||||
|
||||
<div id="buttoncontainer"></div>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,174 +0,0 @@
|
|||
<!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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<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(../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='../button/assets/gloss.png', sizingMethod = 'scale');
|
||||
|
||||
}
|
||||
|
||||
.yui-button .first-child {
|
||||
|
||||
border-width: 0 1px;
|
||||
border-style: solid;
|
||||
border-color: #004d89;
|
||||
margin: 0 -1px;
|
||||
|
||||
/*
|
||||
The following is necessary to get negative margins working in IE.s
|
||||
*/
|
||||
|
||||
*position: relative;
|
||||
*left: -1px;
|
||||
|
||||
}
|
||||
|
||||
.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>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" ">
|
||||
|
||||
<h1>Glowing Button</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<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>
|
||||
|
||||
<div id="buttoncontainer"></div>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,353 +0,0 @@
|
|||
<!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>Slider 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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/slider/slider-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<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;
|
||||
|
||||
}
|
||||
|
||||
#example {
|
||||
|
||||
padding: 1em;
|
||||
|
||||
}
|
||||
|
||||
#photo {
|
||||
|
||||
border: solid 1px #000;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Set the "zoom" property to "normal" since it is set to "1" by the
|
||||
".example-container .bd" rule in yui.css and this causes a Menu
|
||||
instance's width to expand to 100% of the browser viewport.
|
||||
*/
|
||||
|
||||
div.yuimenu .bd {
|
||||
|
||||
zoom: normal;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Style the <div> element containing the Button instance */
|
||||
|
||||
#opacitycontrols {
|
||||
|
||||
border-top: solid 1px #000;
|
||||
padding: .5em .25em;
|
||||
margin-top: .5em;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Style the Slider instance */
|
||||
|
||||
#slider-bg {
|
||||
|
||||
position: relative;
|
||||
background: url(../button/assets/bg-fader.gif) 7px 12px no-repeat;
|
||||
height: 28px;
|
||||
width: 217px;
|
||||
|
||||
}
|
||||
|
||||
#slider-thumb {
|
||||
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Give the <em> element wrapping the Button instance's text label a
|
||||
fixed width so that the Button doesn't grow or shrink as the
|
||||
text label is updated.
|
||||
*/
|
||||
|
||||
#opacitybutton-currentopactiy {
|
||||
|
||||
width: 3em;
|
||||
font-style: normal;
|
||||
display: block;
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
|
||||
#opacitybutton {
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Slider Button</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>
|
||||
This example demonstrates how to combine a Split Button with a Slider to
|
||||
create an opacity slider button, similar to that found in Adobe Photoshop.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
(function() {
|
||||
|
||||
var Event = YAHOO.util.Event;
|
||||
|
||||
|
||||
Event.onContentReady("example", function () {
|
||||
|
||||
var Dom = YAHOO.util.Dom,
|
||||
oSlider;
|
||||
|
||||
|
||||
/*
|
||||
Create a <div> element to house a Button instance and its
|
||||
corresponding <label> element.
|
||||
*/
|
||||
|
||||
var oDIV = document.createElement("div")
|
||||
|
||||
oDIV.id = "opacitycontrols";
|
||||
oDIV.innerHTML = "<label for=\"opacitybutton-button\">Opacity:</label>";
|
||||
|
||||
Dom.get("example").appendChild(oDIV);
|
||||
|
||||
|
||||
/*
|
||||
Create a Menu instance whose body element will house a
|
||||
Slider instance.
|
||||
*/
|
||||
|
||||
var oOpacityMenu = new YAHOO.widget.Menu("opacitymenu", { width: "220px" });
|
||||
|
||||
|
||||
/*
|
||||
Create a new Button instance, wrapping the label in an
|
||||
<em> element. The <em> element will be used to give the
|
||||
Button instance a fixed width to prevent it from growing
|
||||
and shrinking as the text label is updated.
|
||||
*/
|
||||
|
||||
var oButton = new YAHOO.widget.Button({
|
||||
type: "menu",
|
||||
id: "opacitybutton",
|
||||
label: "<em id=\"opacitybutton-currentopactiy\">100%</em>",
|
||||
menu: oOpacityMenu,
|
||||
container: oDIV });
|
||||
|
||||
|
||||
/*
|
||||
Maintain a reference to the <em> element inside the label
|
||||
so that its text can easily be updated in response to the firing
|
||||
of the Slider instance's "change" event.
|
||||
*/
|
||||
|
||||
var oCurrentOpacity = Dom.get("opacitybutton-currentopactiy");
|
||||
|
||||
|
||||
/*
|
||||
Give the Button instance's <button> element an id so that
|
||||
clicking its corresponding <label> element will result in the
|
||||
Button instance receiving focus.
|
||||
*/
|
||||
|
||||
var oHTMLButton = oButton.get("element").getElementsByTagName("button")[0];
|
||||
|
||||
oHTMLButton.id = "opacitybutton-button";
|
||||
|
||||
|
||||
function onButtonClick() {
|
||||
|
||||
// Add Slider markup to the Menu instance's body element
|
||||
|
||||
oOpacityMenu.setBody("<div id=\"slider-bg\" tabindex=\"1\" title=\"Slider\"><div id=\"slider-thumb\"><img src=\"../button/assets/thumb-n.gif\"></div></div>");
|
||||
|
||||
|
||||
/*
|
||||
Render the Menu instance into the element specified as the
|
||||
Button instance's container
|
||||
*/
|
||||
|
||||
oOpacityMenu.render(this.get("container"));
|
||||
|
||||
|
||||
// Align the Menu instance to its corresponding Button
|
||||
|
||||
oOpacityMenu.align();
|
||||
|
||||
|
||||
/*
|
||||
Unsubscribe the listener from the "click" event so that
|
||||
this code runs only once.
|
||||
*/
|
||||
|
||||
this.unsubscribe("click", onButtonClick);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Subscribe to the Button instance's "click" event to render the
|
||||
Button instance's menu the first time it is made visible.
|
||||
*/
|
||||
|
||||
oButton.on("click", onButtonClick);
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Add a "render" event handler to the Menu instance that
|
||||
will instantiate the Slider.
|
||||
*/
|
||||
|
||||
oOpacityMenu.subscribe("render", function () {
|
||||
|
||||
// Instantiate the Slider
|
||||
|
||||
oSlider = YAHOO.widget.Slider.getHorizSlider("slider-bg", "slider-thumb", 0, 200, 1);
|
||||
|
||||
|
||||
// Set the initial value of the Slider instance
|
||||
|
||||
oSlider.setValue(200, true);
|
||||
|
||||
|
||||
// Maintain a reference to the Slider instance's root element
|
||||
|
||||
var oSliderEl = Dom.get("slider-bg");
|
||||
|
||||
|
||||
// Subscribe to the Slider instance's "change" event
|
||||
|
||||
oSlider.subscribe("change", function() {
|
||||
|
||||
/*
|
||||
Divide the pixel offset in half to get a value between
|
||||
0 and 100 - used to convey the current opacity via the
|
||||
Button instance's label.
|
||||
*/
|
||||
|
||||
var nValue = (Math.round(oSlider.getValue() * .5)),
|
||||
|
||||
/*
|
||||
Divide by 100 in order to set provide a compatible
|
||||
value for the CSS "opacity" property.
|
||||
*/
|
||||
|
||||
nOpacity = (nValue * .01);
|
||||
|
||||
|
||||
/*
|
||||
Update the title attribute of the Slider instance's
|
||||
root element. This helps assistive technology to
|
||||
communicate the state change.
|
||||
*/
|
||||
|
||||
oSliderEl.title = "slider value = " + nOpacity;
|
||||
|
||||
|
||||
// Set the opacity of the photo
|
||||
|
||||
Dom.setStyle("photo", "opacity", nOpacity);
|
||||
|
||||
|
||||
// Update the text label of the Button instance
|
||||
|
||||
oCurrentOpacity.innerHTML = (nValue + "%");
|
||||
|
||||
});
|
||||
|
||||
|
||||
function focusSlider() {
|
||||
|
||||
if ((YAHOO.env.ua.ie || YAHOO.env.ua.gecko) && oSliderEl) {
|
||||
|
||||
window.setTimeout(function () {
|
||||
|
||||
oSliderEl.focus();
|
||||
|
||||
}, 0);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Focus the Slider instance
|
||||
|
||||
focusSlider();
|
||||
|
||||
|
||||
// Focus the Slider instance each time it is made visible
|
||||
|
||||
oOpacityMenu.subscribe("show", focusSlider);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
|
||||
<div id="example"><a href="http://www.flickr.com/photos/toddlr/477993821/" title="Photo Sharing"><img id="photo" src="http://farm1.static.flickr.com/198/477993821_0079194851.jpg" width="500" height="375" alt="Ella - A Shih Tzu + Maltese Mix Puppy"></a></div>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue