upgrading to YUI 2.6
data tables are going to need some work yet, but the other stuff seems to be working 100%
This commit is contained in:
JT Smith
parent
a041e93da8
commit
20f8df1291
2106 changed files with 993560 additions and 237 deletions
BIN
www/extras/yui/examples/button/assets/add.gif
Normal file
BIN
www/extras/yui/examples/button/assets/add.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 974 B |
BIN
www/extras/yui/examples/button/assets/bg-fader.gif
Normal file
BIN
www/extras/yui/examples/button/assets/bg-fader.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 892 B |
1
www/extras/yui/examples/button/assets/buttonariaplugin-min.js
vendored
Normal file
1
www/extras/yui/examples/button/assets/buttonariaplugin-min.js
vendored
Normal file
|
|
@ -0,0 +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");}());
|
||||
291
www/extras/yui/examples/button/assets/buttonariaplugin.js
vendored
Normal file
291
www/extras/yui/examples/button/assets/buttonariaplugin.js
vendored
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
(function () {
|
||||
|
||||
var Lang = YAHOO.lang,
|
||||
UA = YAHOO.env.ua,
|
||||
|
||||
ButtonPrototype = YAHOO.widget.Button.prototype,
|
||||
fnButtonInitAttributes = ButtonPrototype.initAttributes,
|
||||
|
||||
ButtonGroupPrototype = YAHOO.widget.ButtonGroup.prototype,
|
||||
fnButtonGroupInitAttributes = ButtonGroupPrototype.initAttributes,
|
||||
fnButtonGroupAddButton = ButtonGroupPrototype.addButton,
|
||||
|
||||
m_bUseARIA = (UA.gecko && UA.gecko >= 1.9) || (UA.ie && UA.ie >= 8),
|
||||
|
||||
// Private constants for strings
|
||||
|
||||
_ARIA_PREFIX = "aria-",
|
||||
_USE_ARIA = "usearia",
|
||||
_CHECKED = "checked",
|
||||
_TYPE = "type",
|
||||
_MENU = "menu",
|
||||
_SPLIT = "split",
|
||||
_HAS_POPUP = "haspopup",
|
||||
_RENDER = "render",
|
||||
_RADIO = "radio",
|
||||
_CHECKBOX = "checkbox",
|
||||
_ROLE = "role",
|
||||
_CHECKED_CHANGE = "checkedChange",
|
||||
_PRESENTATION = "presentation",
|
||||
_ELEMENT = "element",
|
||||
_RADIO_GROUP = "radiogroup",
|
||||
_CHECKED_BUTTON_CHANGE = "checkedButtonChange",
|
||||
_APPEND_TO = "appendTo",
|
||||
_LABELLED_BY = "labelledby",
|
||||
_DESCRIBED_BY = "describedby",
|
||||
_ID = "id";
|
||||
|
||||
|
||||
if (m_bUseARIA) {
|
||||
|
||||
ButtonPrototype.RADIO_DEFAULT_TITLE = "";
|
||||
ButtonPrototype.RADIO_CHECKED_TITLE = "";
|
||||
ButtonPrototype.CHECKBOX_DEFAULT_TITLE = "";
|
||||
ButtonPrototype.CHECKBOX_CHECKED_TITLE = "";
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Button ARIA plugin
|
||||
|
||||
var setARIARole = function (element, role) {
|
||||
|
||||
element.setAttribute(_ROLE, role);
|
||||
|
||||
};
|
||||
|
||||
|
||||
var setARIAProperty = function (element, property, value) {
|
||||
|
||||
element.setAttribute((_ARIA_PREFIX + property), value);
|
||||
|
||||
};
|
||||
|
||||
|
||||
var enableARIAForMenu = function (type, args, button) {
|
||||
|
||||
this.cfg.setProperty(_USE_ARIA, true);
|
||||
this.cfg.setProperty(_LABELLED_BY, button.get(_ID));
|
||||
|
||||
};
|
||||
|
||||
|
||||
var onAppendTo = function () {
|
||||
|
||||
this._menu.subscribe(_RENDER, enableARIAForMenu, this);
|
||||
|
||||
};
|
||||
|
||||
|
||||
var toggleARIACheckedState = function (event) {
|
||||
|
||||
setARIAProperty(this._button, _CHECKED, event.newValue);
|
||||
|
||||
};
|
||||
|
||||
|
||||
Lang.augmentObject(ButtonPrototype, {
|
||||
|
||||
_setUseARIA: function (p_bUseARIA) {
|
||||
|
||||
var sType = this.get(_TYPE),
|
||||
oButtonEl = this._button;
|
||||
|
||||
|
||||
if (p_bUseARIA) {
|
||||
|
||||
switch (sType) {
|
||||
|
||||
case _MENU:
|
||||
case _SPLIT:
|
||||
|
||||
setARIAProperty(oButtonEl, _HAS_POPUP, true);
|
||||
|
||||
this.on(_APPEND_TO, onAppendTo);
|
||||
|
||||
break;
|
||||
|
||||
|
||||
case _RADIO:
|
||||
case _CHECKBOX:
|
||||
|
||||
setARIARole(oButtonEl, sType);
|
||||
|
||||
setARIAProperty(oButtonEl, _CHECKED, this.get(_CHECKED));
|
||||
|
||||
this.on(_CHECKED_CHANGE, toggleARIACheckedState);
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
initAttributes: function (p_oAttributes) {
|
||||
|
||||
/**
|
||||
* @attribute usearia
|
||||
* @description Boolean indicating if use of the WAI-ARIA Roles and States should
|
||||
* be enabled.
|
||||
* @type Boolean
|
||||
* @default true for Firefox 3 and IE 8, false for all other browsers.
|
||||
*/
|
||||
this.setAttributeConfig(_USE_ARIA, {
|
||||
|
||||
value: p_oAttributes.usearia || m_bUseARIA,
|
||||
validator: Lang.isBoolean,
|
||||
writeOnce: true,
|
||||
method: this._setUseARIA
|
||||
|
||||
});
|
||||
|
||||
fnButtonInitAttributes.apply(this, arguments);
|
||||
|
||||
if (m_bUseARIA) {
|
||||
this.set(_USE_ARIA, true);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}, "initAttributes", "_setUseARIA");
|
||||
|
||||
|
||||
|
||||
// ButtonGroup ARIA plugin
|
||||
|
||||
var updateTabIndex = function (event) {
|
||||
|
||||
var oPreviousButton = event.prevValue;
|
||||
|
||||
if (oPreviousButton) {
|
||||
oPreviousButton._button.tabIndex = -1;
|
||||
}
|
||||
|
||||
event.newValue._button.tabIndex = 0;
|
||||
|
||||
};
|
||||
|
||||
|
||||
Lang.augmentObject(ButtonGroupPrototype, {
|
||||
|
||||
addButton: function (p_oButton) {
|
||||
|
||||
var oButton = fnButtonGroupAddButton.call(this, p_oButton),
|
||||
oButtonEl,
|
||||
oParentNode;
|
||||
|
||||
if (this.get(_USE_ARIA)) {
|
||||
|
||||
oButton.set(_USE_ARIA, true);
|
||||
|
||||
oButtonEl = oButton._button;
|
||||
oParentNode = oButtonEl.parentNode;
|
||||
|
||||
setARIARole(oParentNode, _PRESENTATION);
|
||||
setARIARole(oParentNode.parentNode, _PRESENTATION);
|
||||
|
||||
oButtonEl.tabIndex = oButton.get(_CHECKED) ? 0 : -1;
|
||||
|
||||
}
|
||||
|
||||
return oButton;
|
||||
|
||||
},
|
||||
|
||||
_setUseARIA: function (p_bUseARIA) {
|
||||
|
||||
if (p_bUseARIA) {
|
||||
|
||||
setARIARole(this.get(_ELEMENT), _RADIO_GROUP);
|
||||
|
||||
this.on(_CHECKED_BUTTON_CHANGE, updateTabIndex);
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
_setLabelledBy: function (id) {
|
||||
|
||||
if (this.get(_USE_ARIA)) {
|
||||
setARIAProperty(this.get(_ELEMENT), _LABELLED_BY, id);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
_setDescribedBy: function (id) {
|
||||
|
||||
if (this.get(_USE_ARIA)) {
|
||||
setARIAProperty(this.get(_ELEMENT), _DESCRIBED_BY, id);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
initAttributes: function (p_oAttributes) {
|
||||
|
||||
/**
|
||||
* @attribute usearia
|
||||
* @description Boolean indicating if use of the WAI-ARIA Roles and States should
|
||||
* be enabled.
|
||||
* @type Boolean
|
||||
* @default true for Firefox 3 and IE 8, false for all other browsers.
|
||||
*/
|
||||
this.setAttributeConfig(_USE_ARIA, {
|
||||
|
||||
value: p_oAttributes.usearia || m_bUseARIA,
|
||||
validator: Lang.isBoolean,
|
||||
writeOnce: true,
|
||||
method: this._setUseARIA
|
||||
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* @attribute labelledby
|
||||
* @description String representing the id of the element that labels the ButtonGroup.
|
||||
* Maps directly to the <a href="http://www.w3.org/TR/wai-aria/#labelledby">
|
||||
* <code>aria-labelledby</code></a> attribute.
|
||||
* @type String
|
||||
* @default null
|
||||
*/
|
||||
this.setAttributeConfig(_LABELLED_BY, {
|
||||
|
||||
value: p_oAttributes.labelledby,
|
||||
validator: Lang.isString,
|
||||
method: this._setLabelledBy
|
||||
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* @attribute describedby
|
||||
* @description String representing the id of the element that describes the ButtonGroup.
|
||||
* Maps directly to the <a href="http://www.w3.org/TR/wai-aria/#describedby">
|
||||
* <code>aria-describedby</code></a> attribute.
|
||||
* @type String
|
||||
* @default null
|
||||
*/
|
||||
this.setAttributeConfig(_DESCRIBED_BY, {
|
||||
|
||||
value: p_oAttributes.describedby,
|
||||
validator: Lang.isString,
|
||||
method: this._setDescribedBy
|
||||
|
||||
});
|
||||
|
||||
|
||||
fnButtonGroupInitAttributes.apply(this, arguments);
|
||||
|
||||
|
||||
if (m_bUseARIA) {
|
||||
this.set(_USE_ARIA, true);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}, "initAttributes", "_setUseARIA", "_setLabelledBy", "_setDescribedBy", "addButton");
|
||||
|
||||
|
||||
}());
|
||||
BIN
www/extras/yui/examples/button/assets/calendar_icon.gif
Normal file
BIN
www/extras/yui/examples/button/assets/calendar_icon.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 176 B |
BIN
www/extras/yui/examples/button/assets/ella.jpg
Normal file
BIN
www/extras/yui/examples/button/assets/ella.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
BIN
www/extras/yui/examples/button/assets/ggbridge.png
Normal file
BIN
www/extras/yui/examples/button/assets/ggbridge.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
www/extras/yui/examples/button/assets/gloss.png
Normal file
BIN
www/extras/yui/examples/button/assets/gloss.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 141 B |
BIN
www/extras/yui/examples/button/assets/thumb-n.gif
Normal file
BIN
www/extras/yui/examples/button/assets/thumb-n.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 612 B |
BIN
www/extras/yui/examples/button/assets/yahoo.gif
Normal file
BIN
www/extras/yui/examples/button/assets/yahoo.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 B |
381
www/extras/yui/examples/button/btn_example01.html
Normal file
381
www/extras/yui/examples/button/btn_example01.html
Normal file
File diff suppressed because one or more lines are too long
158
www/extras/yui/examples/button/btn_example01_clean.html
Normal file
158
www/extras/yui/examples/button/btn_example01_clean.html
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
<!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>
|
||||
385
www/extras/yui/examples/button/btn_example01_log.html
Normal file
385
www/extras/yui/examples/button/btn_example01_log.html
Normal file
File diff suppressed because one or more lines are too long
283
www/extras/yui/examples/button/btn_example02.html
Normal file
283
www/extras/yui/examples/button/btn_example02.html
Normal file
File diff suppressed because one or more lines are too long
127
www/extras/yui/examples/button/btn_example02_clean.html
Normal file
127
www/extras/yui/examples/button/btn_example02_clean.html
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
<!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 2.25em; /* IE 6 and IE 7 (Quirks Mode) */
|
||||
|
||||
}
|
||||
|
||||
#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>
|
||||
287
www/extras/yui/examples/button/btn_example02_log.html
Normal file
287
www/extras/yui/examples/button/btn_example02_log.html
Normal file
File diff suppressed because one or more lines are too long
304
www/extras/yui/examples/button/btn_example03.html
Normal file
304
www/extras/yui/examples/button/btn_example03.html
Normal file
File diff suppressed because one or more lines are too long
149
www/extras/yui/examples/button/btn_example03_clean.html
Normal file
149
www/extras/yui/examples/button/btn_example03_clean.html
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<!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">
|
||||
|
||||
(function () {
|
||||
|
||||
var Button = YAHOO.widget.Button;
|
||||
|
||||
// "contentready" event handler for the "checkboxbuttonsfrommarkup" <fieldset>
|
||||
|
||||
YAHOO.util.Event.onContentReady("checkboxbuttonsfrommarkup", function () {
|
||||
|
||||
// Create Buttons using existing <input> elements as a data source
|
||||
|
||||
var oCheckButton1 = new Button("checkbutton1", { label: "One" });
|
||||
var oCheckButton2 = new Button("checkbutton2", { label: "Two" });
|
||||
var oCheckButton3 = new Button("checkbutton3", { label: "Three" });
|
||||
var oCheckButton4 = new Button("checkbutton4", { label: "Four" });
|
||||
|
||||
|
||||
// Create Buttons using the YUI Button markup
|
||||
|
||||
var oCheckButton5 = new Button("checkbutton5", { type: "checkbox", value: "1", checked: true });
|
||||
var oCheckButton6 = new Button("checkbutton6", { type: "checkbox", value: "2"});
|
||||
var oCheckButton7 = new Button("checkbutton7", { type: "checkbox", value: "3" });
|
||||
var oCheckButton8 = new Button("checkbutton8", { type: "checkbox", value: "4" });
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Create Buttons without using existing markup
|
||||
|
||||
var oCheckButton9 = new Button({ type: "checkbox", label: "One", id: "checkbutton9", name: "checkboxfield3", value: "1", container: "checkboxbuttonsfromjavascript", checked: true });
|
||||
var oCheckButton10 = new Button({ type: "checkbox", label: "Two", id: "checkbutton10", name: "checkboxfield3", value: "2", container: "checkboxbuttonsfromjavascript" });
|
||||
var oCheckButton11 = new Button({ type: "checkbox", label: "Three", id: "checkbutton11", name: "checkboxfield3", value: "3", container: "checkboxbuttonsfromjavascript" });
|
||||
var oCheckButton12 = new Button({ type: "checkbox", label: "Four", id: "checkbutton12", name: "checkboxfield3", value: "4", container: "checkboxbuttonsfromjavascript" });
|
||||
|
||||
}());
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" 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>
|
||||
308
www/extras/yui/examples/button/btn_example03_log.html
Normal file
308
www/extras/yui/examples/button/btn_example03_log.html
Normal file
File diff suppressed because one or more lines are too long
357
www/extras/yui/examples/button/btn_example04.html
Normal file
357
www/extras/yui/examples/button/btn_example04.html
Normal file
File diff suppressed because one or more lines are too long
169
www/extras/yui/examples/button/btn_example04_clean.html
Normal file
169
www/extras/yui/examples/button/btn_example04_clean.html
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
<!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">
|
||||
|
||||
(function () {
|
||||
|
||||
var ButtonGroup = YAHOO.widget.ButtonGroup;
|
||||
|
||||
|
||||
// "checkedButtonChange" event handler for each ButtonGroup instance
|
||||
|
||||
var onCheckedButtonChange = function (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 ButtonGroup("buttongroup1");
|
||||
oButtonGroup1.on("checkedButtonChange", onCheckedButtonChange);
|
||||
|
||||
var oButtonGroup2 = new ButtonGroup("buttongroup2");
|
||||
oButtonGroup2.on("checkedButtonChange", onCheckedButtonChange);
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Create a ButtonGroup without using existing markup
|
||||
|
||||
var oButtonGroup3 = new ButtonGroup({ id: "buttongroup3", name: "radiofield3", container: "radiobuttonsfromjavascript", usearia: true });
|
||||
|
||||
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>
|
||||
361
www/extras/yui/examples/button/btn_example04_log.html
Normal file
361
www/extras/yui/examples/button/btn_example04_log.html
Normal file
File diff suppressed because one or more lines are too long
340
www/extras/yui/examples/button/btn_example05.html
Normal file
340
www/extras/yui/examples/button/btn_example05.html
Normal file
File diff suppressed because one or more lines are too long
173
www/extras/yui/examples/button/btn_example05_clean.html
Normal file
173
www/extras/yui/examples/button/btn_example05_clean.html
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
<!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>
|
||||
344
www/extras/yui/examples/button/btn_example05_log.html
Normal file
344
www/extras/yui/examples/button/btn_example05_log.html
Normal file
File diff suppressed because one or more lines are too long
307
www/extras/yui/examples/button/btn_example06.html
Normal file
307
www/extras/yui/examples/button/btn_example06.html
Normal file
File diff suppressed because one or more lines are too long
143
www/extras/yui/examples/button/btn_example06_clean.html
Normal file
143
www/extras/yui/examples/button/btn_example06_clean.html
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
<!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>
|
||||
311
www/extras/yui/examples/button/btn_example06_log.html
Normal file
311
www/extras/yui/examples/button/btn_example06_log.html
Normal file
File diff suppressed because one or more lines are too long
468
www/extras/yui/examples/button/btn_example07.html
Normal file
468
www/extras/yui/examples/button/btn_example07.html
Normal file
File diff suppressed because one or more lines are too long
235
www/extras/yui/examples/button/btn_example07_clean.html
Normal file
235
www/extras/yui/examples/button/btn_example07_clean.html
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
<!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>
|
||||
472
www/extras/yui/examples/button/btn_example07_log.html
Normal file
472
www/extras/yui/examples/button/btn_example07_log.html
Normal file
File diff suppressed because one or more lines are too long
444
www/extras/yui/examples/button/btn_example08.html
Normal file
444
www/extras/yui/examples/button/btn_example08.html
Normal file
File diff suppressed because one or more lines are too long
223
www/extras/yui/examples/button/btn_example08_clean.html
Normal file
223
www/extras/yui/examples/button/btn_example08_clean.html
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
<!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>
|
||||
448
www/extras/yui/examples/button/btn_example08_log.html
Normal file
448
www/extras/yui/examples/button/btn_example08_log.html
Normal file
File diff suppressed because one or more lines are too long
598
www/extras/yui/examples/button/btn_example09.html
Normal file
598
www/extras/yui/examples/button/btn_example09.html
Normal file
File diff suppressed because one or more lines are too long
299
www/extras/yui/examples/button/btn_example09_clean.html
Normal file
299
www/extras/yui/examples/button/btn_example09_clean.html
Normal file
|
|
@ -0,0 +1,299 @@
|
|||
<!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>
|
||||
|
||||
<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>Simple 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">
|
||||
|
||||
(function () {
|
||||
|
||||
var Event = YAHOO.util.Event,
|
||||
Dom = YAHOO.util.Dom;
|
||||
|
||||
|
||||
Event.onDOMReady(function () {
|
||||
|
||||
var oCalendarMenu;
|
||||
|
||||
var onButtonClick = function () {
|
||||
|
||||
// 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 "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];
|
||||
|
||||
Dom.get("month-field").value = aDate[1];
|
||||
Dom.get("day-field").value = aDate[2];
|
||||
Dom.get("year-field").value = aDate[0];
|
||||
|
||||
}
|
||||
|
||||
oCalendarMenu.hide();
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Pressing the Esc key will hide the Calendar Menu and send focus back to
|
||||
// its parent Button
|
||||
|
||||
Event.on(oCalendarMenu.element, "keydown", function (p_oEvent) {
|
||||
|
||||
if (Event.getCharCode(p_oEvent) === 27) {
|
||||
oCalendarMenu.hide();
|
||||
this.focus();
|
||||
}
|
||||
|
||||
}, null, this);
|
||||
|
||||
|
||||
var focusDay = function () {
|
||||
|
||||
var oCalendarTBody = Dom.get("buttoncalendar").tBodies[0],
|
||||
aElements = oCalendarTBody.getElementsByTagName("a"),
|
||||
oAnchor;
|
||||
|
||||
|
||||
if (aElements.length > 0) {
|
||||
|
||||
Dom.batch(aElements, function (element) {
|
||||
|
||||
if (Dom.hasClass(element.parentNode, "today")) {
|
||||
oAnchor = element;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
if (!oAnchor) {
|
||||
oAnchor = aElements[0];
|
||||
}
|
||||
|
||||
|
||||
// Focus the anchor element using a timer since Calendar will try
|
||||
// to set focus to its next button by default
|
||||
|
||||
YAHOO.lang.later(0, oAnchor, function () {
|
||||
try {
|
||||
oAnchor.focus();
|
||||
}
|
||||
catch(e) {}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Set focus to either the current day, or first day of the month in
|
||||
// the Calendar when it is made visible or the month changes
|
||||
|
||||
oCalendarMenu.subscribe("show", focusDay);
|
||||
oCalendar.renderEvent.subscribe(focusDay, oCalendar, true);
|
||||
|
||||
|
||||
// Give the Calendar an initial focus
|
||||
|
||||
focusDay.call(oCalendar);
|
||||
|
||||
|
||||
// Re-align the CalendarMenu to the Button to ensure that it is in the correct
|
||||
// position when it is initial made visible
|
||||
|
||||
oCalendarMenu.align();
|
||||
|
||||
|
||||
// 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
|
||||
|
||||
oCalendarMenu = new YAHOO.widget.Overlay("calendarmenu", { visible: false });
|
||||
|
||||
|
||||
// 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" });
|
||||
|
||||
|
||||
oButton.on("appendTo", function () {
|
||||
|
||||
// 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";
|
||||
|
||||
});
|
||||
|
||||
|
||||
// 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>
|
||||
602
www/extras/yui/examples/button/btn_example09_log.html
Normal file
602
www/extras/yui/examples/button/btn_example09_log.html
Normal file
File diff suppressed because one or more lines are too long
698
www/extras/yui/examples/button/btn_example10.html
Normal file
698
www/extras/yui/examples/button/btn_example10.html
Normal file
File diff suppressed because one or more lines are too long
382
www/extras/yui/examples/button/btn_example10_clean.html
Normal file
382
www/extras/yui/examples/button/btn_example10_clean.html
Normal file
|
|
@ -0,0 +1,382 @@
|
|||
<!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>
|
||||
|
||||
<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 with Date on Button Face</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">
|
||||
|
||||
(function () {
|
||||
|
||||
var Event = YAHOO.util.Event,
|
||||
Dom = YAHOO.util.Dom;
|
||||
|
||||
|
||||
Event.onContentReady("datefields", function () {
|
||||
|
||||
var oCalendarMenu;
|
||||
|
||||
var onButtonClick = function () {
|
||||
|
||||
// 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 "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
|
||||
|
||||
Dom.get("month").selectedIndex = (nMonth - 1);
|
||||
Dom.get("day").selectedIndex = (nDay - 1);
|
||||
Dom.get("year").value = nYear;
|
||||
|
||||
}
|
||||
|
||||
oCalendarMenu.hide();
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Pressing the Esc key will hide the Calendar Menu and send focus back to
|
||||
// its parent Button
|
||||
|
||||
Event.on(oCalendarMenu.element, "keydown", function (p_oEvent) {
|
||||
|
||||
if (Event.getCharCode(p_oEvent) === 27) {
|
||||
oCalendarMenu.hide();
|
||||
this.focus();
|
||||
}
|
||||
|
||||
}, null, this);
|
||||
|
||||
|
||||
var focusDay = function () {
|
||||
|
||||
var oCalendarTBody = Dom.get("buttoncalendar").tBodies[0],
|
||||
aElements = oCalendarTBody.getElementsByTagName("a"),
|
||||
oAnchor;
|
||||
|
||||
|
||||
if (aElements.length > 0) {
|
||||
|
||||
Dom.batch(aElements, function (element) {
|
||||
|
||||
if (Dom.hasClass(element.parentNode, "today")) {
|
||||
oAnchor = element;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
if (!oAnchor) {
|
||||
oAnchor = aElements[0];
|
||||
}
|
||||
|
||||
|
||||
// Focus the anchor element using a timer since Calendar will try
|
||||
// to set focus to its next button by default
|
||||
|
||||
YAHOO.lang.later(0, oAnchor, function () {
|
||||
try {
|
||||
oAnchor.focus();
|
||||
}
|
||||
catch(e) {}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Set focus to either the current day, or first day of the month in
|
||||
// the Calendar when it is made visible or the month changes
|
||||
|
||||
oCalendarMenu.subscribe("show", focusDay);
|
||||
oCalendar.renderEvent.subscribe(focusDay, oCalendar, true);
|
||||
|
||||
|
||||
// Give the Calendar an initial focus
|
||||
|
||||
focusDay.call(oCalendar);
|
||||
|
||||
|
||||
// Re-align the CalendarMenu to the Button to ensure that it is in the correct
|
||||
// position when it is initial made visible
|
||||
|
||||
oCalendarMenu.align();
|
||||
|
||||
|
||||
// Unsubscribe from the "click" event so that this code is
|
||||
// only executed once
|
||||
|
||||
this.unsubscribe("click", onButtonClick);
|
||||
|
||||
};
|
||||
|
||||
|
||||
var oDateFields = Dom.get("datefields");
|
||||
oMonthField = Dom.get("month"),
|
||||
oDayField = Dom.get("day"),
|
||||
oYearField = 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
|
||||
|
||||
oCalendarMenu = new YAHOO.widget.Overlay("calendarmenu", { visible: false });
|
||||
|
||||
|
||||
// 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" });
|
||||
|
||||
|
||||
oButton.on("appendTo", function () {
|
||||
|
||||
// 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";
|
||||
|
||||
});
|
||||
|
||||
|
||||
// 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>
|
||||
702
www/extras/yui/examples/button/btn_example10_log.html
Normal file
702
www/extras/yui/examples/button/btn_example10_log.html
Normal file
File diff suppressed because one or more lines are too long
594
www/extras/yui/examples/button/btn_example11.html
Normal file
594
www/extras/yui/examples/button/btn_example11.html
Normal file
File diff suppressed because one or more lines are too long
274
www/extras/yui/examples/button/btn_example11_clean.html
Normal file
274
www/extras/yui/examples/button/btn_example11_clean.html
Normal file
|
|
@ -0,0 +1,274 @@
|
|||
<!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/slider/assets/skins/sam/slider.css" />
|
||||
<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 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"
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
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: "button-container" });
|
||||
|
||||
|
||||
oButton.on("appendTo", function () {
|
||||
|
||||
/*
|
||||
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"));
|
||||
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
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>
|
||||
598
www/extras/yui/examples/button/btn_example11_log.html
Normal file
598
www/extras/yui/examples/button/btn_example11_log.html
Normal file
File diff suppressed because one or more lines are too long
391
www/extras/yui/examples/button/btn_example12.html
Normal file
391
www/extras/yui/examples/button/btn_example12.html
Normal file
File diff suppressed because one or more lines are too long
175
www/extras/yui/examples/button/btn_example12_clean.html
Normal file
175
www/extras/yui/examples/button/btn_example12_clean.html
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
<!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, Safari and Opera support the ability to add ellipsis when the text
|
||||
label exceeds 10em in width.
|
||||
*/
|
||||
|
||||
text-overflow: ellipsis;
|
||||
-o-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>
|
||||
395
www/extras/yui/examples/button/btn_example12_log.html
Normal file
395
www/extras/yui/examples/button/btn_example12_log.html
Normal file
File diff suppressed because one or more lines are too long
415
www/extras/yui/examples/button/btn_example13.html
Normal file
415
www/extras/yui/examples/button/btn_example13.html
Normal file
File diff suppressed because one or more lines are too long
175
www/extras/yui/examples/button/btn_example13_clean.html
Normal file
175
www/extras/yui/examples/button/btn_example13_clean.html
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
<!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>
|
||||
419
www/extras/yui/examples/button/btn_example13_log.html
Normal file
419
www/extras/yui/examples/button/btn_example13_log.html
Normal file
File diff suppressed because one or more lines are too long
644
www/extras/yui/examples/button/btn_example14.html
Normal file
644
www/extras/yui/examples/button/btn_example14.html
Normal file
File diff suppressed because one or more lines are too long
347
www/extras/yui/examples/button/btn_example14_clean.html
Normal file
347
www/extras/yui/examples/button/btn_example14_clean.html
Normal file
|
|
@ -0,0 +1,347 @@
|
|||
<!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/slider/assets/skins/sam/slider.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: "opacitycontrols" });
|
||||
|
||||
|
||||
/*
|
||||
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;
|
||||
|
||||
|
||||
oButton.on("appendTo", function () {
|
||||
|
||||
// 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"));
|
||||
|
||||
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";
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Add a "beforeShow" event handler to the Menu instance that
|
||||
will instantiate the Slider.
|
||||
*/
|
||||
|
||||
var onMenuBeforeShow = 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 + "%");
|
||||
|
||||
});
|
||||
|
||||
|
||||
var focusSlider = function () {
|
||||
|
||||
if ((YAHOO.env.ua.ie || YAHOO.env.ua.gecko) && oSliderEl) {
|
||||
|
||||
window.setTimeout(function () {
|
||||
|
||||
oSliderEl.focus();
|
||||
|
||||
}, 0);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
focusSlider();
|
||||
|
||||
|
||||
// Focus the Slider instance each time it is made visible
|
||||
|
||||
oOpacityMenu.subscribe("show", focusSlider);
|
||||
|
||||
|
||||
// Unsubscribe from the "beforeShow" event, since we only need to initialize the
|
||||
// Slider once.
|
||||
|
||||
oOpacityMenu.unsubscribe("beforeShow", onMenuBeforeShow);
|
||||
|
||||
};
|
||||
|
||||
|
||||
oOpacityMenu.subscribe("beforeShow", onMenuBeforeShow);
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</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>
|
||||
648
www/extras/yui/examples/button/btn_example14_log.html
Normal file
648
www/extras/yui/examples/button/btn_example14_log.html
Normal file
File diff suppressed because one or more lines are too long
381
www/extras/yui/examples/button/button-ariaplugin.html
Normal file
381
www/extras/yui/examples/button/button-ariaplugin.html
Normal file
File diff suppressed because one or more lines are too long
178
www/extras/yui/examples/button/button-ariaplugin_clean.html
Normal file
178
www/extras/yui/examples/button/button-ariaplugin_clean.html
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
<!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>
|
||||
|
||||
<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">
|
||||
|
||||
#button-example-form fieldset {
|
||||
border: 2px groove #ccc;
|
||||
margin: .5em;
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
/*
|
||||
The Menu ARIA Plugin removes the "href" attribute from the <A> element of each MenuItem
|
||||
if the value of the "href" is set to "#", resulting in the focus outline no longer be
|
||||
rendered in Gecko-based browsers when the <A> element is focused. For this reason,
|
||||
it is necessary to restore the focus outline for the <A>.
|
||||
*/
|
||||
a[role=menuitem]:focus {
|
||||
outline: dotted 1px #000;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../container/assets/containerariaplugin.js"></script>
|
||||
<script type="text/javascript" src="../menu/assets/menuariaplugin.js"></script>
|
||||
<script type="text/javascript" src="../button/assets/buttonariaplugin.js"></script>
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Using the Button ARIA Plugin</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>
|
||||
The Button ARIA Plugin makes it easy to use the
|
||||
<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a> with the Button
|
||||
and ButtonGroup controls.
|
||||
Using the ARIA plugin, Buttons are more interoperable with assistive technologies (AT),
|
||||
such as screen readers, making them more accessible to users with disabilities.
|
||||
</p>
|
||||
<p>
|
||||
<a href="http://video.yahoo.com/watch/3608716/9955201">Watch a screen cast of this example
|
||||
running in Firefox 3 with the NVDA screen reader</a>, to see immediately the benefits that
|
||||
ARIA provides, or
|
||||
<a href="http://www.nvda-project.org/wiki/Snapshots">download the latest development snapshot of
|
||||
NVDA</a> to test this example for yourself.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
(function () {
|
||||
|
||||
var Event = YAHOO.util.Event,
|
||||
Button = YAHOO.widget.Button,
|
||||
UA = YAHOO.env.ua;
|
||||
|
||||
Event.onContentReady("checkboxbutton-example", function () {
|
||||
|
||||
var oCheckButton1 = new Button("checkbutton1", { label: "Cheese" });
|
||||
var oCheckButton2 = new Button("checkbutton2", { label: "Mushrooms" });
|
||||
var oCheckButton3 = new Button("checkbutton3", { label: "Peperoni" });
|
||||
var oCheckButton4 = new Button("checkbutton4", { label: "Olives" });
|
||||
|
||||
});
|
||||
|
||||
Event.onContentReady("radiobutton-example", function () {
|
||||
|
||||
// Only apply the WAI-ARIA Roles and States for FF 3 and IE 8 since those
|
||||
// are the only browsers that currently support ARIA.
|
||||
|
||||
if ((UA.gecko && UA.gecko >= 1.9) || (UA.ie && UA.ie >= 8)) {
|
||||
|
||||
// Remove the "for" attribute in favor of using the aria-labelledby attribute
|
||||
YAHOO.util.Dom.get("buttongroup-label").removeAttribute(YAHOO.env.ua.ie ? "htmlFor" : "for");
|
||||
|
||||
}
|
||||
|
||||
var oButtonGroup = new YAHOO.widget.ButtonGroup("buttongroup", { labelledby: "buttongroup-label" });
|
||||
|
||||
});
|
||||
|
||||
Event.onContentReady("menubutton-example", function () {
|
||||
|
||||
var oMenuButton = new Button("menubutton-1", { type: "menu", menu: "menubutton-1-menu" });
|
||||
|
||||
});
|
||||
|
||||
Event.onContentReady("splitbutton-example", function () {
|
||||
|
||||
var oMenuButton = new Button("splitbutton-1", { type: "split", menu: "splitbutton-1-menu" });
|
||||
|
||||
});
|
||||
|
||||
}());
|
||||
|
||||
</script>
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset id="checkboxbutton-example">
|
||||
<legend>Pizza Toppings</legend>
|
||||
|
||||
<input id="checkbutton1" type="checkbox" name="checkboxfield1" value="1" checked>
|
||||
<input id="checkbutton2" type="checkbox" name="checkboxfield1" value="2">
|
||||
<input id="checkbutton3" type="checkbox" name="checkboxfield1" value="3">
|
||||
<input id="checkbutton4" type="checkbox" name="checkboxfield1" value="4">
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="radiobutton-example">
|
||||
<legend>Radio Buttons</legend>
|
||||
|
||||
<div id="buttongroup" class="yui-buttongroup">
|
||||
<label for="radio1" id="buttongroup-label">Size</label>
|
||||
<input id="radio1" type="radio" name="radiofield1" value="Small" checked>
|
||||
<input id="radio2" type="radio" name="radiofield1" value="Medium">
|
||||
<input id="radio3" type="radio" name="radiofield1" value="Large">
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="menubutton-example">
|
||||
<legend>Menu Button</legend>
|
||||
<input type="button" id="menubutton-1" name="menubutton-1" value="Move To">
|
||||
<select id="menubutton-1-menu" name="menubutton-1-menu">
|
||||
<option value="0">Archive</option>
|
||||
<option value="1">Favorites</option>
|
||||
<option value="2">Trash</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="splitbutton-example">
|
||||
<legend>Split Button</legend>
|
||||
<input type="button" id="splitbutton-1" name="splitbutton-1" value="Reply">
|
||||
<select id="splitbutton-1-menu" name="splitbutton-1-menu">
|
||||
<option value="0">Reply To Sender</option>
|
||||
<option value="1">Reply To All</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
385
www/extras/yui/examples/button/button-ariaplugin_log.html
Normal file
385
www/extras/yui/examples/button/button-ariaplugin_log.html
Normal file
File diff suppressed because one or more lines are too long
95
www/extras/yui/examples/button/index.html
Normal file
95
www/extras/yui/examples/button/index.html
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue