update YUI to 2.8.0r4
This commit is contained in:
Graham Knop
parent
27f474ec64
commit
2d28e0c0ba
2007 changed files with 344487 additions and 210070 deletions
|
|
@ -1 +1 @@
|
|||
(function(){var H=YAHOO.lang,R=YAHOO.env.ua,O=YAHOO.widget.Button.prototype,C=O.initAttributes,M=YAHOO.widget.ButtonGroup.prototype,S=M.initAttributes,G=M.addButton,V=(R.gecko&&R.gecko>=1.9)||(R.ie&&R.ie>=8),N="aria-",W="usearia",K="checked",E="type",h="menu",a="split",I="haspopup",b="render",T="radio",Z="checkbox",e="role",c="checkedChange",X="presentation",F="element",Q="radiogroup",U="checkedButtonChange",L="appendTo",D="labelledby",g="describedby",f="id";if(V){O.RADIO_DEFAULT_TITLE="";O.RADIO_CHECKED_TITLE="";O.CHECKBOX_DEFAULT_TITLE="";O.CHECKBOX_CHECKED_TITLE="";}var d=function(i,j){i.setAttribute(e,j);};var Y=function(i,k,j){i.setAttribute((N+k),j);};var A=function(k,i,j){this.cfg.setProperty(W,true);this.cfg.setProperty(D,j.get(f));};var B=function(){this._menu.subscribe(b,A,this);};var P=function(i){Y(this._button,K,i.newValue);};H.augmentObject(O,{_setUseARIA:function(j){var k=this.get(E),i=this._button;if(j){switch(k){case h:case a:Y(i,I,true);this.on(L,B);break;case T:case Z:d(i,k);Y(i,K,this.get(K));this.on(c,P);break;}}},initAttributes:function(i){this.setAttributeConfig(W,{value:i.usearia||V,validator:H.isBoolean,writeOnce:true,method:this._setUseARIA});C.apply(this,arguments);if(V){this.set(W,true);}}},"initAttributes","_setUseARIA");var J=function(j){var i=j.prevValue;if(i){i._button.tabIndex=-1;}j.newValue._button.tabIndex=0;};H.augmentObject(M,{addButton:function(k){var l=G.call(this,k),j,i;if(this.get(W)){l.set(W,true);j=l._button;i=j.parentNode;d(i,X);d(i.parentNode,X);j.tabIndex=l.get(K)?0:-1;}return l;},_setUseARIA:function(i){if(i){d(this.get(F),Q);this.on(U,J);}},_setLabelledBy:function(i){if(this.get(W)){Y(this.get(F),D,i);}},_setDescribedBy:function(i){if(this.get(W)){Y(this.get(F),g,i);}},initAttributes:function(i){this.setAttributeConfig(W,{value:i.usearia||V,validator:H.isBoolean,writeOnce:true,method:this._setUseARIA});this.setAttributeConfig(D,{value:i.labelledby,validator:H.isString,method:this._setLabelledBy});this.setAttributeConfig(g,{value:i.describedby,validator:H.isString,method:this._setDescribedBy});S.apply(this,arguments);if(V){this.set(W,true);}}},"initAttributes","_setUseARIA","_setLabelledBy","_setDescribedBy","addButton");}());
|
||||
(function(){var H=YAHOO.lang,R=YAHOO.env.ua,O=YAHOO.widget.Button.prototype,C=O.initAttributes,M=YAHOO.widget.ButtonGroup.prototype,S=M.initAttributes,G=M.addButton,V=(R.gecko&&R.gecko>=1.9)||(R.ie&&R.ie>=8),N="aria-",W="usearia",K="checked",E="type",h="menu",a="split",I="haspopup",b="render",T="radio",Z="checkbox",e="role",c="checkedChange",X="presentation",F="element",Q="radiogroup",U="checkedButtonChange",L="appendTo",D="labelledby",g="describedby",f="id";if(V){O.RADIO_DEFAULT_TITLE="";O.RADIO_CHECKED_TITLE="";O.CHECKBOX_DEFAULT_TITLE="";O.CHECKBOX_CHECKED_TITLE="";}var d=function(i,j){i.setAttribute(e,j);};var Y=function(i,k,j){i.setAttribute((N+k),j);};var A=function(k,i,j){this.cfg.setProperty(W,true);this.cfg.setProperty(D,j.get(f));};var B=function(){this._menu.subscribe(b,A,this);};var P=function(i){Y(this._button,K,i.newValue);};H.augmentObject(O,{_setUseARIA:function(j){var k=this.get(E),i=this._button;if(j){switch(k){case h:case a:Y(i,I,true);this.on(L,B);break;case T:case Z:d(i,k);Y(i,K,this.get(K));this.on(c,P);break;}}},initAttributes:function(i){this.setAttributeConfig(W,{value:i.usearia||V,validator:H.isBoolean,writeOnce:true,method:this._setUseARIA});C.apply(this,arguments);if(V){this.set(W,true);}}},"initAttributes","_setUseARIA");var J=function(j){var i=j.prevValue;if(i){i._button.tabIndex=-1;}j.newValue._button.tabIndex=0;};H.augmentObject(M,{addButton:function(k){var l=G.call(this,k),j,i;if(this.get(W)){l.set(W,true);j=l._button;i=j.parentNode;d(i,X);d(i.parentNode,X);j.tabIndex=l.get(K)?0:-1;}return l;},_setUseARIA:function(i){if(i){d(this.get(F),Q);this.on(U,J);}},_setLabelledBy:function(i){if(this.get(W)){Y(this.get(F),D,i);}},_setDescribedBy:function(i){if(this.get(W)){Y(this.get(F),g,i);}},initAttributes:function(i){this.setAttributeConfig(W,{value:i.usearia||V,validator:H.isBoolean,writeOnce:true,method:this._setUseARIA});this.setAttributeConfig(D,{value:i.labelledby,validator:H.isString,method:this._setLabelledBy});this.setAttributeConfig(g,{value:i.describedby,validator:H.isString,method:this._setDescribedBy});S.apply(this,arguments);if(V){this.set(W,true);}}},"initAttributes","_setUseARIA","_setLabelledBy","_setDescribedBy","addButton");}());YAHOO.register("buttonariaplugin",YAHOO.widget.Button,{version:"@VERSION@",build:"@BUILD@"});
|
||||
|
|
@ -288,4 +288,5 @@
|
|||
}, "initAttributes", "_setUseARIA", "_setLabelledBy", "_setDescribedBy", "addButton");
|
||||
|
||||
|
||||
}());
|
||||
}());
|
||||
YAHOO.register("buttonariaplugin", YAHOO.widget.Button, {version: "@VERSION@", build: "@BUILD@"});
|
||||
|
|
|
|||
BIN
www/extras/yui/examples/button/assets/checkbox.png
Normal file
BIN
www/extras/yui/examples/button/assets/checkbox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -19,7 +21,7 @@ body {
|
|||
<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/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -63,7 +65,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Push Buttons</h1>
|
||||
|
|
@ -123,7 +125,7 @@ body {
|
|||
|
||||
</script>
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset id="pushbuttons">
|
||||
<legend>Push Buttons</legend>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -19,7 +21,7 @@ body {
|
|||
<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/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -67,7 +69,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Link Buttons</h1>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -19,7 +21,7 @@ body {
|
|||
<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/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -56,7 +58,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Checkbox Buttons</h1>
|
||||
|
|
@ -70,7 +72,7 @@ body {
|
|||
<script type="text/javascript">
|
||||
|
||||
(function () {
|
||||
|
||||
|
||||
var Button = YAHOO.widget.Button;
|
||||
|
||||
// "contentready" event handler for the "checkboxbuttonsfrommarkup" <fieldset>
|
||||
|
|
@ -90,7 +92,7 @@ body {
|
|||
var oCheckButton5 = new Button("checkbutton5", { type: "checkbox", value: "1", checked: true });
|
||||
var oCheckButton6 = new Button("checkbutton6", { type: "checkbox", value: "2"});
|
||||
var oCheckButton7 = new Button("checkbutton7", { type: "checkbox", value: "3" });
|
||||
var oCheckButton8 = new Button("checkbutton8", { type: "checkbox", value: "4" });
|
||||
var oCheckButton8 = new Button("checkbutton8", { type: "checkbox", value: "4" });
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -107,7 +109,7 @@ body {
|
|||
</script>
|
||||
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset id="checkboxbuttons">
|
||||
<legend>Checkbox Buttons</legend>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -19,7 +21,7 @@ body {
|
|||
<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/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -56,7 +58,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Radio Buttons</h1>
|
||||
|
|
@ -127,7 +129,7 @@ body {
|
|||
</script>
|
||||
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset id="radiobuttons">
|
||||
<legend>Radio Buttons</legend>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -19,7 +21,7 @@ body {
|
|||
<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/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -56,7 +58,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Submit Buttons</h1>
|
||||
|
|
@ -115,7 +117,7 @@ body {
|
|||
</script>
|
||||
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset>
|
||||
<legend>Info</legend>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -19,7 +21,7 @@ body {
|
|||
<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/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -40,7 +42,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Reset Buttons</h1>
|
||||
|
|
@ -85,7 +87,7 @@ body {
|
|||
|
||||
</script>
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset>
|
||||
<legend>Info</legend>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -22,7 +24,7 @@ body {
|
|||
<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/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -50,7 +52,7 @@ body {
|
|||
}
|
||||
|
||||
#menubutton3menu,
|
||||
#menubutton5menu {
|
||||
#menubutton4menu {
|
||||
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
|
|
@ -81,118 +83,207 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Menu Buttons</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates different ways to create a Menu Button.</p>
|
||||
<p>This example demonstrates different ways to create and use 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>
|
||||
|
||||
// "contentready" event handler for the "menubuttonsfrommarkup" <fieldset>
|
||||
YAHOO.util.Event.onContentReady("menubuttonsfrommarkup", function () {
|
||||
|
||||
YAHOO.util.Event.onContentReady("menubuttonsfrommarkup", function () {
|
||||
// Create a Button using an existing <input> and <select> element.
|
||||
// Because the "type" attribute of the <input> element was set to
|
||||
// "submit" - clicking on any MenuItem in the Button's Menu will
|
||||
// automatically submit the Button's parent <form>.
|
||||
|
||||
// Create a Button using an existing <input> element as a data source
|
||||
var oMenuButton1 = new YAHOO.widget.Button("menubutton1",
|
||||
{ type: "menu", menu: "menubutton1select" });
|
||||
|
||||
|
||||
var oMenuButton1 = new YAHOO.widget.Button("menubutton1", { type: "menu", menu: "menubutton1select" });
|
||||
// "render" event handler for the Button's Menu
|
||||
|
||||
var oMenuButton2 = new YAHOO.widget.Button("menubutton2", { type: "menu", menu: "menubutton2select" });
|
||||
var onMenuRender = function (p_sType, p_aArgs) {
|
||||
|
||||
this.addItems([
|
||||
|
||||
{ text: "Four", value: 4 },
|
||||
{ text: "Five", value: 5 }
|
||||
|
||||
]);
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Create a Button using an existing <input> element and a YAHOO.widget.Overlay instance as its menu
|
||||
// Add some additional MenuItems to the Button's Menu once it has
|
||||
// been rendered
|
||||
|
||||
oMenuButton1.getMenu().subscribe("render", onMenuRender);
|
||||
|
||||
|
||||
var oMenuButton3 = new YAHOO.widget.Button("menubutton3", { type: "menu", menu: "menubutton3menu" });
|
||||
|
||||
});
|
||||
// "submit" event handler for the <form>
|
||||
|
||||
var onExampleSubmit = function(p_oEvent) {
|
||||
|
||||
var bSubmit =
|
||||
window.confirm("Are you sure you want to submit the form?");
|
||||
|
||||
if(!bSubmit) {
|
||||
YAHOO.util.Event.preventDefault(p_oEvent);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
// "click" event handler for each item in the Button's menu
|
||||
// Add a "submit" event handler to the <form> to confirm that
|
||||
// clicking on one of the MenuItems in the Button's Menu
|
||||
// submits the <form>.
|
||||
|
||||
function onMenuItemClick(p_sType, p_aArgs, p_oItem) {
|
||||
|
||||
oMenuButton4.set("label", p_oItem.cfg.getProperty("text"));
|
||||
|
||||
}
|
||||
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
|
||||
|
||||
|
||||
// Create a Button without using existing markup
|
||||
// Create a Button using an existing <input> and <select> element
|
||||
|
||||
// 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" });
|
||||
var oMenuButton2 = new YAHOO.widget.Button("menubutton2",
|
||||
{ type: "menu", menu: "menubutton2select" });
|
||||
|
||||
|
||||
/*
|
||||
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);
|
||||
// "click" event listener for the second Button's Menu instance
|
||||
|
||||
oOverlay.render(this);
|
||||
|
||||
});
|
||||
var onMenuClick = function (p_sType, p_aArgs) {
|
||||
|
||||
var oEvent = p_aArgs[0], // DOM event
|
||||
|
||||
oMenuItem = p_aArgs[1]; // MenuItem instance that was the
|
||||
// target of the event
|
||||
|
||||
if (oMenuItem) {
|
||||
YAHOO.log("[MenuItem Properties] text: " +
|
||||
oMenuItem.cfg.getProperty("text") + ", value: " +
|
||||
oMenuItem.value);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
function onExampleSubmit(p_oEvent) {
|
||||
// Add a "click" event listener for the Button's Menu
|
||||
|
||||
var bSubmit = window.confirm("Are you sure you want to submit this form?");
|
||||
oMenuButton2.getMenu().subscribe("click", onMenuClick);
|
||||
|
||||
if(!bSubmit) {
|
||||
|
||||
YAHOO.util.Event.preventDefault(p_oEvent);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
// Create a Button using an existing <input> element and a
|
||||
// YAHOO.widget.Overlay instance as its menu
|
||||
|
||||
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
|
||||
var oMenuButton3 = new YAHOO.widget.Button("menubutton3",
|
||||
{ type: "menu", menu: "menubutton3menu" });
|
||||
|
||||
} ();
|
||||
|
||||
// "click" event listener for the third Button's
|
||||
// menu (Overlay instance)
|
||||
|
||||
var onOverlayClick = function (p_oEvent) {
|
||||
|
||||
YAHOO.log("You clicked the Button's menu.");
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Add a "click" event listener to the Button's menu (Overlay instance)
|
||||
|
||||
YAHOO.util.Event.on(oMenuButton3.getMenu().element,
|
||||
"click", onOverlayClick);
|
||||
|
||||
|
||||
// "show" event listener for the third Button's menu (Overlay instance)
|
||||
|
||||
var onOverlayShow = function (p_sType, p_aArgs) {
|
||||
|
||||
YAHOO.log("The Button's menu is now visible.");
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Add a listener for the Button's "show" event
|
||||
|
||||
oMenuButton3.getMenu().subscribe("show", onOverlayShow);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Search for an element to place the Menu Button into via the
|
||||
// Event utility's "onContentReady" method
|
||||
|
||||
YAHOO.util.Event.onContentReady("menubuttonsfromjavascript", function () {
|
||||
|
||||
// Create two Buttons without using existing markup
|
||||
|
||||
|
||||
// Instantiate an Overlay instance
|
||||
|
||||
var oOverlay = new YAHOO.widget.Overlay("menubutton4menu",
|
||||
{ visible: false });
|
||||
|
||||
oOverlay.setBody("Menu Button 4 Menu");
|
||||
|
||||
|
||||
// Instantiate a Menu Button
|
||||
|
||||
var oMenuButton4 = new YAHOO.widget.Button({ type: "menu",
|
||||
label: "Menu Button 4",
|
||||
menu: oOverlay,
|
||||
container: this });
|
||||
|
||||
|
||||
// "click" event handler for each item in the Button's menu
|
||||
|
||||
var onMenuItemClick = function (p_sType, p_aArgs, p_oItem) {
|
||||
|
||||
var sText = p_oItem.cfg.getProperty("text");
|
||||
|
||||
YAHOO.log("[MenuItem Properties] text: " + sText + ", value: " +
|
||||
p_oItem.value);
|
||||
|
||||
oMenuButton5.set("label", sText);
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Create an array of YAHOO.widget.MenuItem configuration properties
|
||||
|
||||
var aMenuButton5Menu = [
|
||||
|
||||
{ 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 oMenuButton5 = new YAHOO.widget.Button({ type: "menu",
|
||||
label: "One",
|
||||
name: "mymenubutton",
|
||||
menu: aMenuButton5Menu,
|
||||
container: this });
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset id="menubuttons">
|
||||
<legend>Menu Buttons</legend>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -22,7 +24,7 @@ body {
|
|||
<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/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -50,7 +52,7 @@ body {
|
|||
}
|
||||
|
||||
#splitbutton3menu,
|
||||
#splitbutton5menu {
|
||||
#splitbutton4menu {
|
||||
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
|
|
@ -81,107 +83,172 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Split Buttons</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates different ways to create a Split Button.</p>
|
||||
<p>This example demonstrates different ways to create and use 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>
|
||||
|
||||
// "contentready" event handler for the "splitbuttonsfrommarkup" <fieldset>
|
||||
YAHOO.util.Event.onContentReady("splitbuttonsfrommarkup", function () {
|
||||
|
||||
YAHOO.util.Event.onContentReady("splitbuttonsfrommarkup", function () {
|
||||
// Create a Button using an existing <input> and <select> element.
|
||||
// Because the "type" attribute of the <input> element was set to
|
||||
// "submit" - clicking on any MenuItem in the Button's Menu will
|
||||
// automatically submit the Button's parent <form>.
|
||||
|
||||
// Create a Button using an existing <input> element as a data source
|
||||
var oSplitButton1 = new YAHOO.widget.Button("splitbutton1", { type: "split", menu: "splitbutton1select" });
|
||||
|
||||
var oSplitButton1 = new YAHOO.widget.Button("splitbutton1", { type: "split", menu: "splitbutton1select" });
|
||||
// "render" event handler for the Button's Menu
|
||||
|
||||
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" });
|
||||
|
||||
});
|
||||
var onMenuRender = function (p_sType, p_aArgs) {
|
||||
|
||||
this.addItems([
|
||||
|
||||
{ text: "Four", value: 4 },
|
||||
{ text: "Five", value: 5 }
|
||||
|
||||
]);
|
||||
|
||||
};
|
||||
|
||||
// Add some additional MenuItems to the Button's Menu once it has been rendered
|
||||
|
||||
oSplitButton1.getMenu().subscribe("render", onMenuRender);
|
||||
|
||||
// "submit" event handler for the <form>
|
||||
|
||||
var onExampleSubmit = function (p_oEvent) {
|
||||
|
||||
var bSubmit = window.confirm("Are you sure you want to submit this form?");
|
||||
|
||||
if(!bSubmit) {
|
||||
YAHOO.util.Event.preventDefault(p_oEvent);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// Add a "submit" event handler to the <form> to confirm that
|
||||
// clicking on one of the MenuItems in the Button's Menu
|
||||
// submits the <form>.
|
||||
|
||||
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
|
||||
|
||||
|
||||
// Create a Button without using existing markup
|
||||
|
||||
// Create an array of YAHOO.widget.MenuItem configuration properties
|
||||
// "click" event handler for the Button - called when the user clicks
|
||||
// on the Button's text label, not when the user clicks on the area
|
||||
// of the Button that displays the Button's Menu.
|
||||
|
||||
var aSplitButton4Menu = [
|
||||
|
||||
{ text: "one", value: 1 },
|
||||
{ text: "two", value: 2 },
|
||||
{ text: "three", value: 3 }
|
||||
|
||||
];
|
||||
var onButtonClick = function () {
|
||||
|
||||
YAHOO.log("You clicked the Button.");
|
||||
|
||||
};
|
||||
|
||||
/*
|
||||
Instantiate a Split Button using the array of YAHOO.widget.MenuItem
|
||||
configuration properties as the value for the "menu" configuration
|
||||
attribute.
|
||||
*/
|
||||
// Create a Button using an existing <input> and <select> element
|
||||
|
||||
var oSplitButton4 = new YAHOO.widget.Button({ type: "split", label: "Split Button 4", name: "splitbutton3", menu: aSplitButton4Menu, container: "splitbuttonsfromjavascript" });
|
||||
var oSplitButton2 = new YAHOO.widget.Button("splitbutton2", { type: "split", menu: "splitbutton2select", onclick: { fn: onButtonClick } });
|
||||
|
||||
/*
|
||||
Search for an element to place the Split Button into via the
|
||||
Event utilities "onContentReady" method
|
||||
*/
|
||||
// Click event listener for the second Button's Menu instance
|
||||
|
||||
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");
|
||||
var onMenuClick = function (p_sType, p_aArgs) {
|
||||
|
||||
var oEvent = p_aArgs[0], // DOM event
|
||||
oMenuItem = p_aArgs[1]; // MenuItem instance that was the target of the event
|
||||
|
||||
if (oMenuItem) {
|
||||
YAHOO.log("[MenuItem Properties] text: " + oMenuItem.cfg.getProperty("text") + ", value: " + oMenuItem.value);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// Add a "click" event listener for the Button's Menu
|
||||
|
||||
oSplitButton2.getMenu().subscribe("click", onMenuClick);
|
||||
|
||||
// "option" event listener - called when the user clicks on the
|
||||
// area of the Button that displays its Menu.
|
||||
|
||||
var onOption = function () {
|
||||
|
||||
YAHOO.log("You clicked the Split Button's option area.");
|
||||
|
||||
};
|
||||
|
||||
// Add a listener for the Button's "option" event
|
||||
|
||||
oSplitButton2.on("option", onOption);
|
||||
|
||||
|
||||
|
||||
// Create a Button using an existing <input> element and an Overlay instance as its menu
|
||||
|
||||
var oSplitButton3 = new YAHOO.widget.Button("splitbutton3", { type: "split", menu: "splitbutton3menu" });
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Instantiate a Split Button
|
||||
|
||||
var oSplitButton5 = new YAHOO.widget.Button({ type: "split", label: "Split Button 5", menu: oOverlay });
|
||||
// Search for an element to place the Split Button into via the
|
||||
// Event Utility's "onContentReady" method
|
||||
|
||||
/*
|
||||
Append the Split Button and Overlay to the element with the id
|
||||
of "splitbuttonsfromjavascript"
|
||||
*/
|
||||
YAHOO.util.Event.onContentReady("splitbuttonsfromjavascript", function () {
|
||||
|
||||
oSplitButton5.appendTo(this);
|
||||
|
||||
oOverlay.render(this);
|
||||
|
||||
});
|
||||
// Create two Buttons without using existing markup
|
||||
|
||||
|
||||
function onExampleSubmit(p_oEvent) {
|
||||
// Instantiate an Overlay instance
|
||||
|
||||
var bSubmit = window.confirm("Are you sure you want to submit this form?");
|
||||
var oOverlay = new YAHOO.widget.Overlay("splitbutton4menu", { visible: false });
|
||||
|
||||
if(!bSubmit) {
|
||||
|
||||
YAHOO.util.Event.preventDefault(p_oEvent);
|
||||
|
||||
}
|
||||
oOverlay.setBody("Split Button 4 Menu");
|
||||
|
||||
}
|
||||
// Instantiate a Split Button
|
||||
|
||||
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
|
||||
var oSplitButton4 = new YAHOO.widget.Button({ type: "split", label: "Split Button 4", menu: oOverlay, container: this });
|
||||
|
||||
|
||||
|
||||
// "click" event handler for each item in the Button's Menu
|
||||
|
||||
var onMenuItemClick = function (p_sType, p_aArgs, p_oItem) {
|
||||
|
||||
var sText = p_oItem.cfg.getProperty("text");
|
||||
|
||||
YAHOO.log("[MenuItem Properties] text: " + sText + ", value: " + p_oItem.value);
|
||||
|
||||
};
|
||||
|
||||
// Create an array of YAHOO.widget.MenuItem configuration properties
|
||||
|
||||
var aSplitButton5Menu = [
|
||||
|
||||
{ text: "One", value: 1, onclick: { fn: onMenuItemClick } },
|
||||
{ text: "Two", value: 2, onclick: { fn: onMenuItemClick } },
|
||||
{ text: "Three", value: 3, onclick: { fn: onMenuItemClick } }
|
||||
|
||||
];
|
||||
|
||||
// Instantiate a Split Button using the array of YAHOO.widget.MenuItem
|
||||
// configuration properties as the value for the "menu"
|
||||
// configuration attribute.
|
||||
|
||||
var oSplitButton5 = new YAHOO.widget.Button({ type: "split", label: "Split Button 5", name: "splitbutton5", menu: aSplitButton5Menu, container: this });
|
||||
|
||||
} ();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset id="splitbuttons">
|
||||
<legend>Split Buttons</legend>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>Simple Calendar Menu Button</title>
|
||||
|
||||
|
|
@ -22,7 +24,7 @@ body {
|
|||
<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/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -102,7 +104,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Simple Calendar Menu Button</h1>
|
||||
|
|
@ -278,7 +280,7 @@ This example demonstrates how to create a Menu Button whose Menu instance displa
|
|||
|
||||
<div>
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset id="datefields">
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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 with Date on Button Face</title>
|
||||
|
||||
|
|
@ -22,7 +24,7 @@ body {
|
|||
<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/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -91,7 +93,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Calendar Menu Button with Date on Button Face</h1>
|
||||
|
|
@ -294,7 +296,7 @@ to reflect the currently selected date.
|
|||
|
||||
</script>
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset id="personalinfo">
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -24,7 +26,7 @@ body {
|
|||
<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/element/element-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>
|
||||
|
|
@ -146,7 +148,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Color Picker Button</h1>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -22,7 +24,7 @@ body {
|
|||
<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/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -83,7 +85,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Fixed Width Menu Button</h1>
|
||||
|
|
@ -101,35 +103,10 @@ when updated to represent the selected menu item.
|
|||
|
||||
<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.
|
||||
*/
|
||||
YAHOO.util.Event.onAvailable("buttoncontainer", function () {
|
||||
|
||||
// Create an array of name and value pairs that serve as the data
|
||||
// source for the Button instance's menu.
|
||||
|
||||
var aCategories = [
|
||||
|
||||
|
|
@ -141,10 +118,8 @@ when updated to represent the selected menu item.
|
|||
];
|
||||
|
||||
|
||||
/*
|
||||
Create a Button instance, wrapping the text label in an <EM>
|
||||
tag that will be given a fixed width of 10em.
|
||||
*/
|
||||
// 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",
|
||||
|
|
@ -153,19 +128,28 @@ when updated to represent the selected menu item.
|
|||
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);
|
||||
// "selectedMenuItemChange" event handler for a Button that will set
|
||||
// the Button's "label" attribute to the value of the "text"
|
||||
// configuration property of the MenuItem that was clicked.
|
||||
|
||||
var onSelectedMenuItemChange = function (event) {
|
||||
|
||||
var oMenuItem = event.newValue;
|
||||
|
||||
this.set("label", ("<em class=\"yui-button-label\">" +
|
||||
oMenuItem.cfg.getProperty("text") + "</em>"));
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Register a "selectedMenuItemChange" event handler that will sync the
|
||||
// Button's "label" attribute to the MenuItem that was clicked.
|
||||
|
||||
oButton.on("selectedMenuItemChange", onSelectedMenuItemChange);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
} ();
|
||||
|
||||
</script>
|
||||
|
||||
<div id="buttoncontainer"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -23,7 +25,7 @@ body {
|
|||
<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/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -62,12 +64,12 @@ body {
|
|||
border-color: #004d89;
|
||||
margin: 0 -1px;
|
||||
|
||||
/*
|
||||
The following is necessary to get negative margins working in IE.s
|
||||
*/
|
||||
|
||||
*position: relative;
|
||||
*left: -1px;
|
||||
/*
|
||||
Using negative margins for rounded corners won't work in IE 6 and
|
||||
IE 7 (Quirks Mode Only), so set the "margin" property to "0" for
|
||||
those browsers.
|
||||
*/
|
||||
_margin: 0;
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>
|
||||
|
||||
|
|
@ -25,7 +27,7 @@ body {
|
|||
<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/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -110,7 +112,7 @@ body {
|
|||
text label is updated.
|
||||
*/
|
||||
|
||||
#opacitybutton-currentopactiy {
|
||||
#opacitybutton-currentopacity {
|
||||
|
||||
width: 3em;
|
||||
font-style: normal;
|
||||
|
|
@ -126,11 +128,12 @@ body {
|
|||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Slider Button</h1>
|
||||
|
|
@ -189,7 +192,7 @@ create an opacity slider button, similar to that found in Adobe Photoshop.
|
|||
var oButton = new YAHOO.widget.Button({
|
||||
type: "menu",
|
||||
id: "opacitybutton",
|
||||
label: "<em id=\"opacitybutton-currentopactiy\">100%</em>",
|
||||
label: "<em id=\"opacitybutton-currentopacity\">100%</em>",
|
||||
menu: oOpacityMenu,
|
||||
container: "opacitycontrols" });
|
||||
|
||||
|
|
@ -217,7 +220,7 @@ create an opacity slider button, similar to that found in Adobe Photoshop.
|
|||
|
||||
oOpacityMenu.render(this.get("container"));
|
||||
|
||||
oCurrentOpacity = Dom.get("opacitybutton-currentopactiy");
|
||||
oCurrentOpacity = Dom.get("opacitybutton-currentopacity");
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -282,7 +285,7 @@ create an opacity slider button, similar to that found in Adobe Photoshop.
|
|||
communicate the state change.
|
||||
*/
|
||||
|
||||
oSliderEl.title = "slider value = " + nOpacity;
|
||||
oSliderEl.title = "slider value = " + Math.round(nOpacity);
|
||||
|
||||
|
||||
|
||||
|
|
@ -341,6 +344,7 @@ create an opacity slider button, similar to that found in Adobe Photoshop.
|
|||
</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>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!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>Using the Button ARIA Plugin</title>
|
||||
|
||||
|
|
@ -22,7 +24,7 @@ body {
|
|||
<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/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -55,7 +57,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Using the Button ARIA Plugin</h1>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
931
www/extras/yui/examples/button/button-menu-select.html
Normal file
931
www/extras/yui/examples/button/button-menu-select.html
Normal file
File diff suppressed because one or more lines are too long
489
www/extras/yui/examples/button/button-menu-select_clean.html
Normal file
489
www/extras/yui/examples/button/button-menu-select_clean.html
Normal file
|
|
@ -0,0 +1,489 @@
|
|||
<!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>Using A Menu Button To Replace A <select> Element</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-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">
|
||||
|
||||
/* Style the <fieldset> since the Reset CSS removes the default style. */
|
||||
#button-example-form fieldset {
|
||||
|
||||
border: 2px groove #ccc;
|
||||
margin: .5em;
|
||||
padding: .5em;
|
||||
|
||||
}
|
||||
|
||||
pre {
|
||||
border: solid 1px #000;
|
||||
background-color: #ccc;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.yui-menu-button em.yui-button-label {
|
||||
|
||||
font-style: normal;
|
||||
display: block;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
|
||||
/* Restrict the width of the label to 5em. */
|
||||
width: 5em;
|
||||
|
||||
/* Hide the overflow if the text label exceeds 5em in width. */
|
||||
overflow: hidden;
|
||||
|
||||
/*
|
||||
IE, Safari and Opera support the ability to add ellipsis when the text
|
||||
label exceeds 10em in width.
|
||||
*/
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
|
||||
}
|
||||
|
||||
li.yui-button-selectedmenuitem {
|
||||
background: url(../button/assets/checkbox.png) left center no-repeat;
|
||||
}
|
||||
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Using A Menu Button To Replace A <select> Element</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>
|
||||
This example illustrates how to use Button to mimic the behavior of an
|
||||
HTML <code><select></code> element.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.util.Event.onDOMReady(function () {
|
||||
|
||||
var Button = YAHOO.widget.Button;
|
||||
|
||||
|
||||
// "render" event handler for a Button's Menu - responsible for setting
|
||||
// the default value for the Button's "selectedMenuItem" attribute.
|
||||
|
||||
var onMenuRender = function (type, args, button) {
|
||||
|
||||
button.set("selectedMenuItem", this.getItem(0));
|
||||
|
||||
};
|
||||
|
||||
|
||||
// "selectedMenuItemChange" event handler for a Button that will set
|
||||
// the Button's "label" attribute to the value of the "text"
|
||||
// configuration property of the MenuItem that was clicked.
|
||||
|
||||
var onSelectedMenuItemChange = function (event) {
|
||||
|
||||
var oMenuItem = event.newValue;
|
||||
|
||||
this.set("label", ("<em class=\"yui-button-label\">" +
|
||||
oMenuItem.cfg.getProperty("text") + "</em>"));
|
||||
|
||||
};
|
||||
|
||||
|
||||
// "submit" event handler for a Button's parent form - repsonsible for
|
||||
// rendering a Menu that was to be lazy loaded, but never clicked on,
|
||||
// and therefore never rendered.
|
||||
|
||||
var onFormSubmit = function (event, button) {
|
||||
|
||||
var oMenuItem = button.get("selectedMenuItem"),
|
||||
UA = YAHOO.env.ua,
|
||||
oEvent,
|
||||
oMenu;
|
||||
|
||||
if (!oMenuItem) {
|
||||
|
||||
// Pause submission of the form until the Button's Menu
|
||||
// is rendered
|
||||
YAHOO.util.Event.preventDefault(event);
|
||||
|
||||
oMenu = button.getMenu();
|
||||
|
||||
oMenu.addItems(oMenu.itemData);
|
||||
|
||||
oMenu.subscribe("render", function () {
|
||||
|
||||
var bSubmitForm;
|
||||
|
||||
if (UA.ie) {
|
||||
bSubmitForm = this.fireEvent("onsubmit");
|
||||
}
|
||||
else { // Gecko, Opera, and Safari
|
||||
|
||||
oEvent = document.createEvent("HTMLEvents");
|
||||
oEvent.initEvent("submit", true, true);
|
||||
bSubmitForm = this.dispatchEvent(oEvent);
|
||||
|
||||
}
|
||||
|
||||
// In IE and Safari, dispatching a "submit" event to a form
|
||||
// WILL cause the form's "submit" event to fire, but WILL
|
||||
// NOT submit the form. Therefore, we need to call the
|
||||
// "submit" method as well.
|
||||
|
||||
if ((UA.ie || UA.webkit) && bSubmitForm) {
|
||||
this.submit();
|
||||
}
|
||||
|
||||
}, this, true);
|
||||
|
||||
oMenu.render(oMenu.cfg.getProperty("container"));
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
var oMenuButton1 = new Button({
|
||||
id: "menubutton-1",
|
||||
name: "menubutton-1",
|
||||
label: "<em class=\"yui-button-label\">Option 1</em>",
|
||||
type: "menu",
|
||||
menu: "select-1",
|
||||
container: "select-1-container"
|
||||
});
|
||||
|
||||
// Register a "selectedMenuItemChange" event handler that will sync the
|
||||
// Button's "label" attribute to the MenuItem that was clicked.
|
||||
|
||||
oMenuButton1.on("selectedMenuItemChange", onSelectedMenuItemChange);
|
||||
|
||||
|
||||
|
||||
var oMenuButton2 = new Button({
|
||||
id: "menubutton-2",
|
||||
name: "menubutton-2",
|
||||
label: "<em class=\"yui-button-label\">Option 1</em>",
|
||||
type: "menu",
|
||||
lazyloadmenu: false,
|
||||
menu: "select-2",
|
||||
container: "select-2-container"
|
||||
});
|
||||
|
||||
// Register a "selectedMenuItemChange" event handler that will sync the
|
||||
// Button's "label" attribute to the MenuItem that was clicked.
|
||||
|
||||
oMenuButton2.on("selectedMenuItemChange", onSelectedMenuItemChange);
|
||||
|
||||
|
||||
var aMenuButton3MenuData = [
|
||||
{ text: "Option 1", value: "menubutton-3-1" },
|
||||
{ text: "Option 2", value: "menubutton-3-2" },
|
||||
{ text: "Option 3", value: "menubutton-3-3" }
|
||||
];
|
||||
|
||||
var oMenuButton3 = new Button({
|
||||
id: "menubutton-3",
|
||||
name: "menubutton-3",
|
||||
label: "<em class=\"yui-button-label\">Option 1</em>",
|
||||
type: "menu",
|
||||
menu: aMenuButton3MenuData,
|
||||
container: "menubutton-3-container" });
|
||||
|
||||
// Register a "selectedMenuItemChange" event handler that will sync the
|
||||
// Button's "label" attribute to the MenuItem that was clicked.
|
||||
|
||||
oMenuButton3.on("selectedMenuItemChange", onSelectedMenuItemChange);
|
||||
|
||||
oMenuButton3.on("appendTo", function () {
|
||||
|
||||
var oMenu = this.getMenu();
|
||||
|
||||
// If a Button's "selectedMenuItem" attribute is set, the selected
|
||||
// MenuItem's name and value will be part of the form's data set
|
||||
// when its parent form is submitted. For Buttons with Menus built
|
||||
// entirely from script, the "selectedMenuItem" property is not
|
||||
// set by default. To set the "selectedMenuItem" to a default
|
||||
// value, simply register a "render" event handler for the Button's
|
||||
// Menu that sets the Button's "selectedMenuItem" attribute to the
|
||||
// desired item in the Menu.
|
||||
|
||||
oMenu.subscribe("render", onMenuRender, this);
|
||||
|
||||
|
||||
// The items in a Button's Menu are lazy loaded by default: loaded
|
||||
// when the Button is initially clicked. If the user never clicks
|
||||
// on the Button, its Menu will never be rendered, meaning the
|
||||
// "render" event handler registered above will never be called,
|
||||
// and the default value for the Button's "selectMenuItem"
|
||||
// attribute will never be set. Therefore, add a "submit" event
|
||||
// handler to the Button's parent form that will render the Menu
|
||||
// if the Button's "selectedMenuItem" attribute is not set.
|
||||
|
||||
YAHOO.util.Event.on(this.getForm(), "submit", onFormSubmit, this);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
var aMenuButton4MenuData = [
|
||||
{ text: "Option 1", value: "menubutton-4-1" },
|
||||
{ text: "Option 2", value: "menubutton-4-2" },
|
||||
{ text: "Option 3", value: "menubutton-4-3" }
|
||||
];
|
||||
|
||||
var oMenuButton4 = new Button({
|
||||
id: "menubutton-4",
|
||||
name: "menubutton-4",
|
||||
label: "<em class=\"yui-button-label\">Option 1</em>",
|
||||
type: "menu",
|
||||
lazyloadmenu: false,
|
||||
menu: aMenuButton4MenuData,
|
||||
container: "menubutton-4-container" });
|
||||
|
||||
var oMenuButton4Menu = oMenuButton4.getMenu();
|
||||
|
||||
|
||||
// If a Button's "selectedMenuItem" attribute is set, the selected
|
||||
// MenuItem's name and value will be part of the form's data set
|
||||
// when its parent form is submitted. For Buttons with Menus built
|
||||
// entirely from script, the "selectedMenuItem" property is not set by
|
||||
// default. To set the "selectedMenuItem" to a default value, simply
|
||||
// register a "render" event handler for the Button's Menu that sets
|
||||
// the Button's "selectedMenuItem" attribute to the desired item in
|
||||
// the Menu.
|
||||
|
||||
oMenuButton4Menu.subscribe("render", onMenuRender, oMenuButton4);
|
||||
|
||||
// Register a "selectedMenuItemChange" event handler that will sync the
|
||||
// Button's "label" attribute to the MenuItem that was clicked.
|
||||
|
||||
oMenuButton4.on("selectedMenuItemChange", onSelectedMenuItemChange);
|
||||
|
||||
|
||||
|
||||
var oMenuButton5 = new Button({
|
||||
id: "menubutton-5",
|
||||
name: "menubutton-5",
|
||||
label: "<em class=\"yui-button-label\">None</em>",
|
||||
type: "menu",
|
||||
menu: "select-3",
|
||||
container: "select-3-container" });
|
||||
|
||||
// Register a "selectedMenuItemChange" event handler that will sync the
|
||||
// Button's "label" attribute to the MenuItem that was clicked.
|
||||
|
||||
oMenuButton5.on("selectedMenuItemChange", onSelectedMenuItemChange);
|
||||
|
||||
|
||||
var oMenuButton6 = new Button({
|
||||
id: "menubutton-6",
|
||||
name: "menubutton-6",
|
||||
label: "<em class=\"yui-button-label\">None</em>",
|
||||
type: "menu",
|
||||
lazyloadmenu: false,
|
||||
menu: "select-4",
|
||||
container: "select-4-container" });
|
||||
|
||||
// Register a "selectedMenuItemChange" event handler that will sync the
|
||||
// Button's "label" attribute to the MenuItem that was clicked.
|
||||
|
||||
oMenuButton6.on("selectedMenuItemChange", onSelectedMenuItemChange);
|
||||
|
||||
var aMenuButton7MenuData = [
|
||||
"None",
|
||||
{ text: "Option 1", value: "menubutton-7-1" },
|
||||
{ text: "Option 2", value: "menubutton-7-2" },
|
||||
{ text: "Option 3", value: "menubutton-7-3" }
|
||||
];
|
||||
|
||||
var oMenuButton7 = new Button({
|
||||
id: "menubutton-7",
|
||||
name: "menubutton-7",
|
||||
label: "<em class=\"yui-button-label\">None</em>",
|
||||
type: "menu",
|
||||
menu: aMenuButton7MenuData,
|
||||
container: "menubutton-7-container" });
|
||||
|
||||
// Register a "selectedMenuItemChange" event handler that will sync the
|
||||
// Button's "label" attribute to the MenuItem that was clicked.
|
||||
|
||||
oMenuButton7.on("selectedMenuItemChange", onSelectedMenuItemChange);
|
||||
|
||||
|
||||
var aMenuButton8MenuData = [
|
||||
"None",
|
||||
{ text: "Option 1", value: "menubutton-8-1" },
|
||||
{ text: "Option 2", value: "menubutton-8-2" },
|
||||
{ text: "Option 3", value: "menubutton-8-3" }
|
||||
];
|
||||
|
||||
var oMenuButton8 = new Button({
|
||||
id: "menubutton-8",
|
||||
name: "menubutton-8",
|
||||
label: "<em class=\"yui-button-label\">None</em>",
|
||||
type: "menu",
|
||||
lazyloadmenu: false,
|
||||
menu: aMenuButton8MenuData,
|
||||
container: "menubutton-8-container" });
|
||||
|
||||
|
||||
// Register a "selectedMenuItemChange" event handler that will sync the
|
||||
// Button's "label" attribute to the MenuItem that was clicked.
|
||||
|
||||
oMenuButton8.on("selectedMenuItemChange", onSelectedMenuItemChange);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<form name="button-example-form" id="button-example-form" method="post" action="#">
|
||||
|
||||
<fieldset>
|
||||
<legend>With A Default Value</legend>
|
||||
|
||||
<fieldset>
|
||||
<legend>Using Existing Markup</legend>
|
||||
|
||||
<fieldset>
|
||||
<legend>Lazy load on</legend>
|
||||
|
||||
<label id="select-1-container">
|
||||
Choose a value:
|
||||
<select id="select-1" name="select-1">
|
||||
<option value="select-1-1" selected>Option 1</option>
|
||||
<option value="select-1-2">Option 2</option>
|
||||
<option value="select-1-3">Option 3</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Lazy load off</legend>
|
||||
<label id="select-2-container">
|
||||
Choose a value:
|
||||
<select id="select-2" name="select-2">
|
||||
<option value="select-2-1" selected>Option 1</option>
|
||||
<option value="select-2-2">Option 2</option>
|
||||
<option value="select-2-3">Option 3</option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Without Existing Markup</legend>
|
||||
|
||||
<fieldset>
|
||||
<legend>Lazy load on</legend>
|
||||
<label id="menubutton-3-container">Choose a value: </label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Lazy load off</legend>
|
||||
<label id="menubutton-4-container">Choose a value: </label>
|
||||
</fieldset>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Without A Default Value</legend>
|
||||
|
||||
<fieldset>
|
||||
<legend>Using Existing Markup</legend>
|
||||
|
||||
<fieldset>
|
||||
<legend>Lazy load on</legend>
|
||||
<label id="select-3-container">
|
||||
Choose a value:
|
||||
<select id="select-3" name="select-3">
|
||||
<option value="">None</option>
|
||||
<option value="select-3-1">Option 1</option>
|
||||
<option value="select-3-2">Option 2</option>
|
||||
<option value="select-3-3">Option 3</option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Lazy load off</legend>
|
||||
<label id="select-4-container">
|
||||
Choose a value
|
||||
<select id="select-4" name="select-4">
|
||||
<option value="">None</option>
|
||||
<option value="select-4-1">Option 1</option>
|
||||
<option value="select-4-2">Option 2</option>
|
||||
<option value="select-4-3">Option 3</option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
</fieldset>
|
||||
|
||||
|
||||
<fieldset>
|
||||
<legend>Without Existing Markup</legend>
|
||||
|
||||
<fieldset>
|
||||
<legend>Lazy load on</legend>
|
||||
<label id="menubutton-7-container">Choose a value: </label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Lazy load off</legend>
|
||||
<label id="menubutton-8-container">Choose a value: </label>
|
||||
</fieldset>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<div>
|
||||
<input type="submit" id="submit-button" name="submit-button" value="Submit Form">
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
935
www/extras/yui/examples/button/button-menu-select_log.html
Normal file
935
www/extras/yui/examples/button/button-menu-select_log.html
Normal file
File diff suppressed because one or more lines are too long
587
www/extras/yui/examples/button/button-menu-swap.html
Normal file
587
www/extras/yui/examples/button/button-menu-swap.html
Normal file
File diff suppressed because one or more lines are too long
384
www/extras/yui/examples/button/button-menu-swap_clean.html
Normal file
384
www/extras/yui/examples/button/button-menu-swap_clean.html
Normal file
|
|
@ -0,0 +1,384 @@
|
|||
<!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>Replacing the content of a Button's Menu</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-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">
|
||||
|
||||
/* Style the <fieldset> since the Reset CSS removes the default style. */
|
||||
#pizza-order-form fieldset {
|
||||
|
||||
border: 2px groove #ccc;
|
||||
margin: .5em;
|
||||
padding: .5em;
|
||||
|
||||
}
|
||||
|
||||
pre {
|
||||
border: solid 1px #000;
|
||||
background-color: #ccc;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
li.yui-button-selectedmenuitem {
|
||||
background: url(../button/assets/checkbox.png) left center no-repeat;
|
||||
}
|
||||
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Replacing the content of a Button's Menu</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>
|
||||
This example illustrates how to replace the content of a Button's Menu on
|
||||
the fly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.util.Event.onContentReady("pizza-order-form", function () {
|
||||
|
||||
// Change the default node name for the ButtonGroup element
|
||||
// so that the fieldset can be used.
|
||||
|
||||
YAHOO.widget.ButtonGroup.prototype.NODE_NAME = "FIELDSET";
|
||||
|
||||
|
||||
// Transform the existing radio buttons into a ButtonGroup control
|
||||
|
||||
var oButtonGroup = new YAHOO.widget.ButtonGroup("pizza-types-fields"),
|
||||
|
||||
oType1Label = YAHOO.util.Dom.get("type1-label"),
|
||||
oType2Label = YAHOO.util.Dom.get("type2-label"),
|
||||
|
||||
oButton1 = oButtonGroup.getButton(0),
|
||||
oButton2 = oButtonGroup.getButton(1);
|
||||
|
||||
|
||||
// Set the "label" attribute of each Button to the text of
|
||||
// its corresponding <label> element
|
||||
|
||||
oButton1.set("label", oType1Label.innerHTML);
|
||||
oButton2.set("label", oType2Label.innerHTML);
|
||||
|
||||
|
||||
// Remove the original labels, since Buttons of type "radio"
|
||||
// are self labelling
|
||||
|
||||
oButtonGroup.removeChild(oType1Label);
|
||||
oButtonGroup.removeChild(oType2Label);
|
||||
|
||||
|
||||
// Utility function to transform the data in HTML <option>
|
||||
// elements into JavaScript arrays of MenuItem
|
||||
// configuration properties
|
||||
|
||||
var createMenuItemData = function (optiongroup) {
|
||||
|
||||
var aOptions = YAHOO.util.Dom.get(optiongroup).getElementsByTagName("option"),
|
||||
aMenuItemData = [],
|
||||
nOptions = aOptions.length,
|
||||
oOption;
|
||||
|
||||
for (var i = 0; i < nOptions; i++) {
|
||||
|
||||
oOption = aOptions[i];
|
||||
aMenuItemData[i] = { text: oOption.text , value: oOption.value };
|
||||
|
||||
}
|
||||
|
||||
aMenuItemData.splice(0, 0, "Select Size");
|
||||
|
||||
return aMenuItemData;
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Read the data out of the <select>'s <optgroup> elements so
|
||||
// that it can be used to create MenuItems in a Button's Menu
|
||||
|
||||
var aThinCrustSizes = createMenuItemData("thin-crust-sizes"),
|
||||
aDeepDishSizes = createMenuItemData("deep-dish-sizes");
|
||||
|
||||
|
||||
var onCheckedChange = function (event, menuitems) {
|
||||
|
||||
var oMenu;
|
||||
|
||||
if (this.get("checked")) {
|
||||
|
||||
oMenu = oMenuButton.getMenu();
|
||||
|
||||
// Use the "inDocument" method of the Dom utility to
|
||||
// determine if the Button's Menu has been rendered.
|
||||
|
||||
if (YAHOO.util.Dom.inDocument(oMenuButton.getMenu().element)) {
|
||||
|
||||
// If the Menu has been rendered, use Menu's "clearContent"
|
||||
// method to remove all existing MenuItems, then repopulate
|
||||
// the Menu using the "addItems" method.
|
||||
|
||||
oMenu.clearContent();
|
||||
oMenu.addItems(menuitems);
|
||||
|
||||
// Using the "clearContent" method removes all content
|
||||
// from a Menu instance, effectively restoring it to its
|
||||
// pre-rendered state. For this reason, it is necessary
|
||||
// to call the "render" method after using "clearContent"
|
||||
// so that the Menu's content is rendered into the Menu's
|
||||
// body element (<div class="bd">). However, since the
|
||||
// Menu's root element is already in the page, it is not
|
||||
// necessary to pass an element reference when calling the
|
||||
// "render" method.
|
||||
|
||||
oMenu.render();
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
// By default a Button's Menu is lazyloaded - meaning the
|
||||
// creation and rendering of all MenuItems is
|
||||
// deferred until the Menu is intially requested by the
|
||||
// user. If the "menu" attribute of a Button is set to
|
||||
// an array of MenuItem configuration properties, as in
|
||||
// this example, Button sets the "itemData" property of its
|
||||
// Menu to the value of the "menu" attribute. When the
|
||||
// Button's Menu is first shown, Menu uses the value of
|
||||
// the "itemData" to create and render all MenuItems.
|
||||
|
||||
// If the user clicks either the "Deep Dish" or
|
||||
// "Thin Crust" Buttons before the content of the
|
||||
// "Pizza Size" Menu has been rendered, simply set the
|
||||
// Menu's "itemData" property to the to the array of
|
||||
// MenuItem configuration properties that should be used
|
||||
// to build the Menu when it is lazy loaded.
|
||||
|
||||
oMenu.itemData = menuitems;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Register a change event handler for each radio button's
|
||||
// "checked" attribute that will rebuild the content of the
|
||||
// menu button's Menu instance when the user toggles between
|
||||
// the deep dish and thin crust pizzas
|
||||
|
||||
oButton1.on("checkedChange", onCheckedChange, aThinCrustSizes);
|
||||
oButton2.on("checkedChange", onCheckedChange, aDeepDishSizes);
|
||||
|
||||
|
||||
// Remove the existing <select> element from the <form>, and
|
||||
// replace it with a menu button
|
||||
|
||||
|
||||
var oPizzaSizeSelect = YAHOO.util.Dom.get("pizza-size");
|
||||
|
||||
oPizzaSizeSelect.parentNode.removeChild(oPizzaSizeSelect);
|
||||
|
||||
|
||||
var oMenuButton = new YAHOO.widget.Button({ type: "menu",
|
||||
label: "Select Size",
|
||||
name: "pizza-size",
|
||||
menu: aThinCrustSizes,
|
||||
container: "pizza-size-fields" });
|
||||
|
||||
|
||||
// "selectedMenuItemChange" event handler for a Button that will set
|
||||
// the Button's "label" attribute to the value of the "text"
|
||||
// configuration property of the MenuItem that was clicked.
|
||||
|
||||
var onSelectedMenuItemChange = function (event) {
|
||||
|
||||
var oMenuItem = event.newValue;
|
||||
|
||||
this.set("label", oMenuItem.cfg.getProperty("text"));
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Register a "selectedMenuItemChange" event handler that will sync the
|
||||
// Button's "label" attribute to the MenuItem that was clicked.
|
||||
|
||||
oMenuButton.on("selectedMenuItemChange", onSelectedMenuItemChange);
|
||||
|
||||
|
||||
// "render" event handler for a Button's Menu - responsible for setting
|
||||
// the default value for the Button's "selectedMenuItem" attribute.
|
||||
|
||||
var onMenuRender = function (type, args, button) {
|
||||
|
||||
button.set("selectedMenuItem", this.getItem(0));
|
||||
|
||||
};
|
||||
|
||||
|
||||
// "submit" event handler for a Button's parent form - repsonsible for
|
||||
// rendering a Menu that was to be lazy loaded, but never clicked on,
|
||||
// and therefore never rendered.
|
||||
|
||||
var onFormSubmit = function (event, button) {
|
||||
|
||||
var oMenuItem = button.get("selectedMenuItem"),
|
||||
UA = YAHOO.env.ua,
|
||||
oEvent,
|
||||
oMenu;
|
||||
|
||||
if (!oMenuItem) {
|
||||
|
||||
// Pause submission of the form until the Button's Menu
|
||||
// is rendered
|
||||
YAHOO.util.Event.preventDefault(event);
|
||||
|
||||
oMenu = button.getMenu();
|
||||
|
||||
oMenu.addItems(oMenu.itemData);
|
||||
|
||||
oMenu.subscribe("render", function () {
|
||||
|
||||
var bSubmitForm;
|
||||
|
||||
if (UA.ie) {
|
||||
bSubmitForm = this.fireEvent("onsubmit");
|
||||
}
|
||||
else { // Gecko, Opera, and Safari
|
||||
|
||||
oEvent = document.createEvent("HTMLEvents");
|
||||
oEvent.initEvent("submit", true, true);
|
||||
bSubmitForm = this.dispatchEvent(oEvent);
|
||||
|
||||
}
|
||||
|
||||
// In IE and Safari, dispatching a "submit" event to a form
|
||||
// WILL cause the form's "submit" event to fire, but WILL
|
||||
// NOT submit the form. Therefore, we need to call the
|
||||
// "submit" method as well.
|
||||
|
||||
if ((UA.ie || UA.webkit) && bSubmitForm) {
|
||||
this.submit();
|
||||
}
|
||||
|
||||
}, this, true);
|
||||
|
||||
oMenu.render(oMenu.cfg.getProperty("container"));
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
oMenuButton.on("appendTo", function () {
|
||||
|
||||
var oMenu = this.getMenu();
|
||||
|
||||
// If a Button's "selectedMenuItem" attribute is set, the selected
|
||||
// MenuItem's name and value will be part of the form's data set
|
||||
// when its parent form is submitted. For Buttons with Menus built
|
||||
// entirely from script, the "selectedMenuItem" property is not
|
||||
// set by default. To set the "selectedMenuItem" to a default
|
||||
// value, simply register a "render" event handler for the Button's
|
||||
// Menu that sets the Button's "selectedMenuItem" attribute to the
|
||||
// desired item in the Menu.
|
||||
|
||||
oMenu.subscribe("render", onMenuRender, this);
|
||||
|
||||
|
||||
// The items in a Button's Menu are lazy loaded by default: loaded
|
||||
// when the Button is initially clicked. If the user never clicks
|
||||
// on the Button, its Menu will never be rendered, meaning the
|
||||
// "render" event handler registered above will never be called,
|
||||
// and the default value for the Button's "selectMenuItem"
|
||||
// attribute will never be set. Therefore, add a "submit" event
|
||||
// handler to the Button's parent form that will render the Menu
|
||||
// if the Button's "selectedMenuItem" attribute is not set.
|
||||
|
||||
YAHOO.util.Event.on(this.getForm(), "submit", onFormSubmit, this);
|
||||
|
||||
});
|
||||
|
||||
|
||||
var oPlaceOrder = new YAHOO.widget.Button("place-order");
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<form id="pizza-order-form" method="post">
|
||||
|
||||
<fieldset>
|
||||
<legend>Pizza Order Form</legend>
|
||||
|
||||
<fieldset id="pizza-types-fields">
|
||||
<legend>Pizza Type</legend>
|
||||
<label id="type1-label" for="type1">Thin Crust</label>
|
||||
<input type="radio" name="pizza-type" id="type1" value="1" checked>
|
||||
<label id="type2-label" for="type2">Deep Dish</label>
|
||||
<input type="radio" name="pizza-type" id="type2" value="2">
|
||||
</fieldset>
|
||||
|
||||
<div id="pizza-size-fields">
|
||||
<label for="pizza-size">Size: </label>
|
||||
<select name="pizza-size" id="pizza-size">
|
||||
<option selected label="none" value="none">Select a size</option>
|
||||
<optgroup label="Thin Crust" id="thin-crust-sizes">
|
||||
<option value="1.1">Small</option>
|
||||
<option value="1.2">Medium</option>
|
||||
<option value="1.3">Large</option>
|
||||
<option value="1.4">Extra Large</option>
|
||||
</optgroup>
|
||||
<optgroup label="Deep Dish" id="deep-dish-sizes">
|
||||
<option value="2.1">Regular</option>
|
||||
<option value="2.2">Large</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<input type="submit" id="place-order" name="place-order" value="Place Order">
|
||||
|
||||
</form>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
591
www/extras/yui/examples/button/button-menu-swap_log.html
Normal file
591
www/extras/yui/examples/button/button-menu-swap_log.html
Normal file
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