update YUI to 2.8.0r4
This commit is contained in:
Graham Knop
parent
27f474ec64
commit
2d28e0c0ba
2007 changed files with 344487 additions and 210070 deletions
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Chaining Animations Using <code>onComplete</code></title>
|
||||
|
||||
|
|
@ -20,7 +22,7 @@ body {
|
|||
<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/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -44,7 +46,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Chaining Animations Using <code>onComplete</code></h1>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animating Multiple Attributes</title>
|
||||
|
||||
|
|
@ -35,7 +37,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Animating Multiple Attributes</h1>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Basic Animation</title>
|
||||
|
||||
|
|
@ -36,7 +38,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Basic Animation</h1>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animating Colors</title>
|
||||
|
||||
|
|
@ -35,7 +37,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Animating Colors</h1>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animating Along a Curved Path</title>
|
||||
|
||||
|
|
@ -35,7 +37,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Animating Along a Curved Path</h1>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animation Easing</title>
|
||||
|
||||
|
|
@ -35,7 +37,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Animation Easing</h1>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animating From a Given Value</title>
|
||||
|
||||
|
|
@ -35,7 +37,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Animating From a Given Value</h1>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animating Motion</title>
|
||||
|
||||
|
|
@ -35,7 +37,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Animating Motion</h1>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Animated Scrolling</title>
|
||||
|
||||
|
|
@ -35,7 +37,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Animated Scrolling</h1>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Using Custom Units for an Animation</title>
|
||||
|
||||
|
|
@ -35,7 +37,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Using Custom Units for an Animation</h1>
|
||||
|
|
|
|||
257
www/extras/yui/examples/autocomplete/ac_accessible.html
Normal file
257
www/extras/yui/examples/autocomplete/ac_accessible.html
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,93 @@
|
|||
<!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>Screenreader Accessibility</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/autocomplete/assets/skins/sam/autocomplete.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/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
#myAutoComplete {
|
||||
width:15em; /* set width here or else widget will expand to fit its container */
|
||||
padding-bottom:2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Screenreader Accessibility</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This AutoComplete example demonstrates how to make the widget more screenreader accessible.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
|
||||
<div id="myAutoComplete">
|
||||
<label id="myInputLabel" for="myInput">Enter a state:</label> <input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="assets/js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.Accessibility = function() {
|
||||
// Set up DataSource and AutoComplete instances
|
||||
var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates, {responseSchema: {fields : ["state"]}});
|
||||
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
|
||||
|
||||
|
||||
// Set up span element with screenreader text
|
||||
var elLabel = YAHOO.util.Dom.get("myInputLabel"),
|
||||
origLabel = elLabel.innerHTML,
|
||||
screenreaderLabel = "<span style=\"position:absolute;left:-999em;\">Use the up and down arrow keys to navigate suggestions.</span>"
|
||||
|
||||
// Insert the screenreader text whenever user starts an AutoComplete interaction
|
||||
oAC.textboxFocusEvent.subscribe(function(){elLabel.innerHTML += screenreaderLabel;});
|
||||
oAC.textboxBlurEvent.subscribe(function(){elLabel.innerHTML = origLabel;});
|
||||
|
||||
// The typeAhead feature must also be set to true for screenreader support
|
||||
oAC.typeAhead = true;
|
||||
|
||||
// Turn off autoHighlight for less confusion
|
||||
oAC.autoHighlight = false;
|
||||
|
||||
return {
|
||||
oDS: oDS,
|
||||
oAC: oAC
|
||||
};
|
||||
}();
|
||||
</script>
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
261
www/extras/yui/examples/autocomplete/ac_accessible_log.html
Normal file
261
www/extras/yui/examples/autocomplete/ac_accessible_log.html
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Basic Local Data</title>
|
||||
|
||||
|
|
@ -37,7 +39,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Basic Local Data</h1>
|
||||
|
|
@ -49,7 +51,7 @@ body {
|
|||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Enter a state:</h3>
|
||||
<label for="myInput">Enter a state:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Basic Remote Data</title>
|
||||
|
||||
|
|
@ -38,7 +40,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Basic Remote Data</h1>
|
||||
|
|
@ -50,7 +52,7 @@ body {
|
|||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Search our database:</h3>
|
||||
<label for="myInput">Search our database:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,10 @@
|
|||
<!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>Combo Box</title>
|
||||
<title>Combobox, with CSS for Multiple Stacked Instances</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
|
|
@ -21,7 +23,7 @@ body {
|
|||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.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/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
|
|
@ -48,31 +50,36 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Combo Box</h1>
|
||||
<h1>Combobox, with CSS for Multiple Stacked Instances</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This "combo box" AutoComplete implementation allows the user to pick an item from a set list or enter a custom value directly into the input field. There are also some CSS customizations which must be made to support multiple stacked AutoComplete instances, which this example demonstrates.</p>
|
||||
<p>This "combo box" AutoComplete implementation allows the user to pick an item from a set list or enter a custom value directly into the input field. Please note the following custom CSS:</p>
|
||||
|
||||
<ul>
|
||||
<li>z-index has been applied to support multiple vertically stacked AutoComplete instances</li>
|
||||
<li>the input field and container have been styled to support a button inline to the right</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>What would you like for breakfast?</h3>
|
||||
<label for="bInput">What would you like for breakfast?</label>
|
||||
<div id="bAutoComplete">
|
||||
<input id="bInput" type="text"> <span id="toggleB"></span>
|
||||
<div id="bContainer"></div>
|
||||
</div>
|
||||
|
||||
<h3>What would you like for lunch?</h3>
|
||||
<label for="lInput">What would you like for lunch?</label>
|
||||
<div id="lAutoComplete">
|
||||
<input id="lInput" type="text"> <span id="toggleL"></span>
|
||||
<div id="lContainer"></div>
|
||||
</div>
|
||||
|
||||
<h3>What would you like for dinner?</h3>
|
||||
<label for="dInput">What would you like for dinner?</label>
|
||||
<div id="dAutoComplete">
|
||||
<input id="dInput" type="text"> <span id="toggleD"></span>
|
||||
<div id="dContainer"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Configurations Dashboard</title>
|
||||
|
||||
|
|
@ -28,7 +30,8 @@ body {
|
|||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
/* custom styles for this example */
|
||||
#dashboard_autocomplete {margin:0 1em 0 0;width:40%;height:4em;}/* set width and height of widget here*/
|
||||
#dashboard_autocomplete {margin:0 1em 0 0;width:50%;height:4em;}/* set width and height of widget here*/
|
||||
#dashboard_autocomplete label {display:block;color:#E76300;font-weight:bold;}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -36,21 +39,21 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Configurations Dashboard</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example is designed to allow you to experiment with the various configuration properties provided by AutoComplete and to explore their impact on the interaction. The first field after the AutoComplete input textbox is a select element that allows you to test for bleed-through on Internet Explorer when the AutoComplete suggestion container descends to cover it. The remaining form fields allow you to change property settings on the AutoComplete instance and to see immediately how those changes feel in the browser.</p>
|
||||
<p>This example is designed to allow you to experiment with the various configuration properties provided by AutoComplete and to explore their impact on the interaction. The first field after the AutoComplete input textbox is a select element that allows you to test for bleed-through on Internet Explorer when the AutoComplete suggestion container descends to cover it. The remaining form fields allow you to change property settings on the AutoComplete instance and to see immediately how those changes look and feel in the browser.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<!-- AutoComplete begins -->
|
||||
<h3>Search the Web Using Yahoo!'s Search API:</h3>
|
||||
<div id="dashboard_autocomplete">
|
||||
<label for="dashboard_input">Search the Web Using Yahoo!'s Search API:</label>
|
||||
<input id="dashboard_input" type="text" name="p">
|
||||
<div id="dashboard_container"></div>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Find Photos on Flickr</title>
|
||||
|
||||
|
|
@ -58,7 +60,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Find Photos on Flickr</h1>
|
||||
|
|
@ -70,7 +72,7 @@ body {
|
|||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Find photos by tag and collect your selections:</h3>
|
||||
<label for="flickrinput">Find photos by tag and collect your selections:</label>
|
||||
<div id="flickrselections">
|
||||
<h5>Selections</h5>
|
||||
<div id="photos"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,10 @@
|
|||
<!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>Custom Function to Search Different Fields at Runtime</title>
|
||||
<title>FunctionDataSource to Search Multiple Fields of an Address Book at Runtime</title>
|
||||
|
||||
<style type="text/css">
|
||||
/*margin and padding on body element
|
||||
|
|
@ -30,6 +32,9 @@ body {
|
|||
width:15em; /* set width here or else widget will expand to fit its container */
|
||||
padding-bottom:2em;
|
||||
}
|
||||
.match {
|
||||
font-weight:bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -37,82 +42,137 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Custom Function to Search Different Fields at Runtime</h1>
|
||||
<h1>FunctionDataSource to Search Multiple Fields of an Address Book at Runtime</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example uses a FunctionDataSource that performs string matching against different fields of a two-dimensional array at runtime, depending on whether the input is a letter or a number. Since the data for this example is already loaded into memory, queries should be quite fast to return data, but use of the custom function allows a more complex search algorithm. When the searched field is determined, the DataSource schema also needs to be updated on the fly. A custom formatter allows users to see both state and area code values for each result.</p>
|
||||
<p>This example uses a FunctionDataSource to perform string matching against multiple fields of a contacts database at runtime. Since the data for this example is loaded into local memory, queries should be quite fast to return data, but use of the custom function allows a more complex search algorithm. A custom formatter allows users to see their search term within the result set. An itemSelectEvent handler is used to update the input field with a custom value and to populate a hidden form field with the selected contact's ID for eventually submitting back to a server.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Enter a state or an area code:</h3>
|
||||
<label for="myInput">Find a contact:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
<input id="myHidden" type="hidden">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="assets/js/data.js"></script>
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.FnMultipleFields = function(){
|
||||
var allData = YAHOO.example.Data.arrayAreaCodesStates;
|
||||
var myContacts = [
|
||||
{id:0, fname:"Alice", lname:"Abrams", nname:"ace"},
|
||||
{id:1, fname:"Abraham", lname:"Axelrod", nname:"Abe"},
|
||||
{id:2, fname:"Bruce", lname:"Baxter", nname:null},
|
||||
{id:3, fname:"Robert", lname:"Brown", nname:"Bob"},
|
||||
{id:4, fname:"Carl", lname:"Carlson", nname:null},
|
||||
{id:5, fname:"Charlie", lname:"Chaplin", nname:"Chuck"},
|
||||
{id:6, fname:"Darla", lname:"Darling", nname:null},
|
||||
{id:7, fname:"David", lname:"Dashing", nname:"Dave"},
|
||||
{id:8, fname:"Egbert", lname:"Excellent", nname:null},
|
||||
{id:9, fname:"Engleberg", lname:"Humperdink", nname:null}
|
||||
];
|
||||
|
||||
// Track each interaction if it is against a state or an area code
|
||||
var nSearchField;
|
||||
|
||||
// Define a custom search function
|
||||
var searchAreaCodesAndStates = function(sQuery) {
|
||||
var allMatches = [],
|
||||
item, i, l;
|
||||
|
||||
// 0 for area code, 1 for state
|
||||
nSearchField = (YAHOO.lang.isNumber(sQuery*1)) ? 0 : 1;
|
||||
|
||||
for(i=0, l=allData.length; i<l; i++) {
|
||||
item = allData[i];
|
||||
|
||||
// State must be made case-insensitve and make the state return as index 0
|
||||
if(nSearchField) {
|
||||
if(item[nSearchField].toLowerCase().indexOf(sQuery.toLowerCase()) === 0) {
|
||||
allMatches[allMatches.length] = [item[1], item[0]];
|
||||
}
|
||||
}
|
||||
// Area codes are simpler
|
||||
else {
|
||||
if(item[nSearchField].indexOf(sQuery) === 0) {
|
||||
allMatches[allMatches.length] = item;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Define a custom search function for the DataSource
|
||||
var matchNames = function(sQuery) {
|
||||
// Case insensitive matching
|
||||
var query = sQuery.toLowerCase(),
|
||||
contact,
|
||||
i=0,
|
||||
l=myContacts.length,
|
||||
matches = [];
|
||||
|
||||
// States should be sorted alphabetically
|
||||
// Define schema on the fly (since the return order changes)
|
||||
if(nSearchField) {
|
||||
allMatches.sort();
|
||||
this.responseSchema = {fields: ["state", "areacode"]};
|
||||
// Match against each name of each contact
|
||||
for(; i<l; i++) {
|
||||
contact = myContacts[i];
|
||||
if((contact.fname.toLowerCase().indexOf(query) > -1) ||
|
||||
(contact.lname.toLowerCase().indexOf(query) > -1) ||
|
||||
(contact.nname && (contact.nname.toLowerCase().indexOf(query) > -1))) {
|
||||
matches[matches.length] = contact;
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.responseSchema = {fields: ["areacode", "state"]};
|
||||
}
|
||||
return allMatches;
|
||||
|
||||
return matches;
|
||||
};
|
||||
|
||||
// Use a FunctionDataSource
|
||||
var oDS = new YAHOO.util.FunctionDataSource(searchAreaCodesAndStates);
|
||||
var oDS = new YAHOO.util.FunctionDataSource(matchNames);
|
||||
oDS.responseSchema = {
|
||||
fields: ["id", "fname", "lname", "nname"]
|
||||
}
|
||||
|
||||
// Instantiate AutoComplete
|
||||
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
|
||||
oAC.useShadow = true;
|
||||
oAC.resultTypeList = false;
|
||||
|
||||
|
||||
// Custom formatter to highlight the matching letters
|
||||
oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
|
||||
return (sResultMatch + " (" + ((nSearchField) ? oResultData.areacode : oResultData.state) + ")");
|
||||
var query = sQuery.toLowerCase(),
|
||||
fname = oResultData.fname,
|
||||
lname = oResultData.lname,
|
||||
nname = oResultData.nname || "", // Guard against null value
|
||||
query = sQuery.toLowerCase(),
|
||||
fnameMatchIndex = fname.toLowerCase().indexOf(query),
|
||||
lnameMatchIndex = lname.toLowerCase().indexOf(query),
|
||||
nnameMatchIndex = nname.toLowerCase().indexOf(query),
|
||||
displayfname, displaylname, displaynname;
|
||||
|
||||
if(fnameMatchIndex > -1) {
|
||||
displayfname = highlightMatch(fname, query, fnameMatchIndex);
|
||||
}
|
||||
else {
|
||||
displayfname = fname;
|
||||
}
|
||||
|
||||
if(lnameMatchIndex > -1) {
|
||||
displaylname = highlightMatch(lname, query, lnameMatchIndex);
|
||||
}
|
||||
else {
|
||||
displaylname = lname;
|
||||
}
|
||||
|
||||
if(nnameMatchIndex > -1) {
|
||||
displaynname = "(" + highlightMatch(nname, query, nnameMatchIndex) + ")";
|
||||
}
|
||||
else {
|
||||
displaynname = nname ? "(" + nname + ")" : "";
|
||||
}
|
||||
|
||||
return displayfname + " " + displaylname + " " + displaynname;
|
||||
|
||||
};
|
||||
|
||||
// Helper function for the formatter
|
||||
var highlightMatch = function(full, snippet, matchindex) {
|
||||
return full.substring(0, matchindex) +
|
||||
"<span class='match'>" +
|
||||
full.substr(matchindex, snippet.length) +
|
||||
"</span>" +
|
||||
full.substring(matchindex + snippet.length);
|
||||
};
|
||||
|
||||
// Define an event handler to populate a hidden form field
|
||||
// when an item gets selected and populate the input field
|
||||
var myHiddenField = YAHOO.util.Dom.get("myHidden");
|
||||
var myHandler = function(sType, aArgs) {
|
||||
var myAC = aArgs[0]; // reference back to the AC instance
|
||||
var elLI = aArgs[1]; // reference to the selected LI element
|
||||
var oData = aArgs[2]; // object literal of selected item's result data
|
||||
|
||||
// update hidden form field with the selected item's ID
|
||||
myHiddenField.value = oData.id;
|
||||
|
||||
myAC.getInputEl().value = oData.fname + " " + oData.lname + (oData.nname ? " (" + oData.nname + ")" : "");
|
||||
};
|
||||
oAC.itemSelectEvent.subscribe(myHandler);
|
||||
|
||||
return {
|
||||
fnSearch: searchAreaCodesAndStates,
|
||||
oDS: oDS,
|
||||
oAC: oAC
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Custom Formatting, with a Proxyless Remote DataSource</title>
|
||||
|
||||
|
|
@ -18,13 +20,19 @@ body {
|
|||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/autocomplete/assets/skins/sam/autocomplete.css" />
|
||||
<script type="text/javascript" src="../../build/utilities/utilities.js"></script>
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/get/get-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/autocomplete/autocomplete-min.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
label {
|
||||
color:#E76300;
|
||||
font-weight:bold;
|
||||
}
|
||||
#myAutoComplete {
|
||||
width:30em; /* set width here or else widget will expand to fit its container */
|
||||
padding-bottom:2em;
|
||||
|
|
@ -41,44 +49,71 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Custom Formatting, with a Proxyless Remote DataSource</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This AutoComplete instance uses a ScriptNodeDataSource to point to the Yahoo! Audio Search webservice without a proxy. The generateRequest() method must be customized to comply with the third-party API. Please note that the ScriptNodeDataSource requires that the webservice support a callback mechanism.</p>
|
||||
<p>This AutoComplete instance uses a ScriptNodeDataSource to to find images from the YQL webservice without a proxy. The generateRequest() method must be customized to comply with the open API. Please note that the ScriptNodeDataSource requires that the webservice support a callback mechanism.</p>
|
||||
|
||||
<p>A custom formatter function is defined in order to show thumbnail images in the results container.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<form action="http://audio.search.yahoo.com/search/audio" onsubmit="return YAHOO.example.CustomFormatting.validateForm();">
|
||||
<h3>Yahoo! Audio Search:</h3>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text" name="p">
|
||||
<div id="myContainer"></div>
|
||||
</div>
|
||||
</form>
|
||||
<label for="myInput">Yahoo! Image Search:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text" name="p">
|
||||
<div id="myContainer"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.CustomFormatting = (function(){
|
||||
// Instantiate DataSource
|
||||
var oDS = new YAHOO.util.ScriptNodeDataSource("http://search.yahooapis.com/AudioSearchService/V1/artistSearch");
|
||||
var oDS = new YAHOO.util.ScriptNodeDataSource("http://query.yahooapis.com/v1/public/yql?");
|
||||
oDS.responseSchema = {
|
||||
resultsList: "ResultSet.Result",
|
||||
fields: ["Name","Thumbnail"]
|
||||
resultsList: "query.results.result",
|
||||
fields: ["url", "thumbnail_url", "clickurl"]
|
||||
};
|
||||
|
||||
// Setting to default value for demonstration purposes.
|
||||
// The webservice needs to support execution of a callback function.
|
||||
oDS.scriptCallbackParam = "callback";
|
||||
|
||||
|
||||
// Instantiate AutoComplete
|
||||
var oAC = new YAHOO.widget.AutoComplete("myInput","myContainer", oDS);
|
||||
|
||||
// Bump up the query delay to reduce server load
|
||||
oAC.queryDelay = 1;
|
||||
|
||||
// The webservice needs custom parameters
|
||||
oAC.generateRequest = function(sQuery) {
|
||||
return "?appid=YahooDemo&output=json&artist=" + sQuery ;
|
||||
return "q=select%20*%20from%20search.images%20where%20query%3D%22" +
|
||||
sQuery +
|
||||
"%22%20and%20mimetype%20like%20%22%25jpeg%25%22&format=json";
|
||||
};
|
||||
|
||||
// Result data passed as object for easy access from custom formatter.
|
||||
oAC.resultTypeList = false;
|
||||
// Customize formatter to show thumbnail images
|
||||
oAC.formatResult = function(oResultData, sQuery, sResultMatch) {
|
||||
if(oResultData.thumbnail_url) {
|
||||
img = "<img src=\""+ oResultData.thumbnail_url + "\">";
|
||||
}
|
||||
else {
|
||||
img = "<span class=\"img\"><span class=\"imgtext\">N/A</span></span>";
|
||||
}
|
||||
return "<div class=\"result\">" + img + " <span class=\"name\">" + sResultMatch + "</span></div>";
|
||||
};
|
||||
oAC.itemSelectEvent.subscribe(function(sType, aArgs) {
|
||||
var oData = aArgs[2]; // object literal of selected item's result data
|
||||
|
||||
// Redirect to the img
|
||||
window.location.href = oData.clickurl;
|
||||
});
|
||||
|
||||
// Stub for form validation
|
||||
var validateForm = function() {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Searching Field A, Submitting Field B with itemSelectEvent</title>
|
||||
|
||||
|
|
@ -40,7 +42,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Searching Field A, Submitting Field B with itemSelectEvent</h1>
|
||||
|
|
@ -52,8 +54,8 @@ body {
|
|||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Find a company in the accounts database:</h3>
|
||||
<form id="myForm" action="#">
|
||||
<label for="myInput">Find a company in the accounts database:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text"><input id="mySubmit" type="submit" value="Submit">
|
||||
<div id="myContainer"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Tagging Example with alwaysShowContainer</title>
|
||||
|
||||
|
|
@ -41,7 +43,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Tagging Example with alwaysShowContainer</h1>
|
||||
|
|
@ -53,7 +55,7 @@ body {
|
|||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Assign tags:</h3>
|
||||
<label for="myInput">Assign tags:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Customizing Remote Requests</title>
|
||||
|
||||
|
|
@ -27,6 +29,10 @@ body {
|
|||
|
||||
<!--begin custom header content for this example-->
|
||||
<style type="text/css">
|
||||
label {
|
||||
color:#E76300;
|
||||
font-weight:bold;
|
||||
}
|
||||
#myAutoComplete {
|
||||
width:40em; /* set width here or else widget will expand to fit its container */
|
||||
padding-bottom:2em;
|
||||
|
|
@ -38,7 +44,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Customizing Remote Requests</h1>
|
||||
|
|
@ -50,7 +56,7 @@ body {
|
|||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Yahoo! Search:</h3>
|
||||
<label for="myInput">Yahoo! Search:</label>
|
||||
<div id="myAutoComplete">
|
||||
<input id="myInput" type="text">
|
||||
<div id="myContainer"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Subset Matching</title>
|
||||
|
||||
|
|
@ -31,6 +33,7 @@ body {
|
|||
#example1 { z-index:9001; } /* z-index needed on top instances for ie & sf absolute inside relative issue */
|
||||
#example2 { z-index:9000; } /* z-index needed on top instances for ie & sf absolute inside relative issue */
|
||||
.autocomplete { padding-bottom:2em;width:40%; }/* set width of widget here*/
|
||||
label {color:#E76300;}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -38,7 +41,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Subset Matching</h1>
|
||||
|
|
@ -48,6 +51,8 @@ body {
|
|||
|
||||
<p>The second AutoComplete instance does not enable <code>queryMatchSubset</code>
|
||||
so each typed letter results in a new request to the server.</p>
|
||||
|
||||
<p>Note the custom CSS that is needed for stacking AutoComplete instances.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -55,12 +60,12 @@ so each typed letter results in a new request to the server.</p>
|
|||
|
||||
<div id="autocomplete_examples">
|
||||
<p><strong>Note:</strong> The flat-file database accessed here has a limited number of terms; for best results, type one-letter at at time and let the AutoComplete instance return — if you type a full, highly-specifc phrase (such as your name) you'll probably get no results from the small dataset.</p>
|
||||
<h2>First AutoComplete instance enables queryMatchSubset:</h2>
|
||||
<label for="ysearchinput1">First AutoComplete instance enables queryMatchSubset:</label>
|
||||
<div id="example1" class="autocomplete">
|
||||
<input id="ysearchinput1" type="text">
|
||||
<div id="ysearchcontainer1"></div>
|
||||
</div>
|
||||
<h2>Second AutoComplete instance does not enable queryMatchSubset:</h2>
|
||||
<label for="ysearchinput2">Second AutoComplete instance does not enable queryMatchSubset:</label>
|
||||
<div id="example2" class="autocomplete">
|
||||
<input id="ysearchinput2" type="text">
|
||||
<div id="ysearchcontainer2"></div>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Centering AutoComplete On a Page</title>
|
||||
|
||||
|
|
@ -30,6 +32,7 @@ body {
|
|||
<style type="text/css">
|
||||
/* custom styles for centered example */
|
||||
body, h1 { margin:0;padding:0; } /* needed for known issue with Dom.getXY() in safari for absolute elements in positioned containers */
|
||||
label { color:#E76300;font-weight:bold;}
|
||||
#ysearch { text-align:center; }
|
||||
#ysearchinput { position:static;width:20em; } /* to center, set static and explicit width: */
|
||||
#ysearchcontainer { text-align:left;width:20em; } /* to center, set left-align and explicit width: */
|
||||
|
|
@ -39,13 +42,13 @@ body, h1 { margin:0;padding:0; } /* needed for known issue with Dom.getXY() in s
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Centering AutoComplete On a Page</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example points to Yahoo! Search Web Services. To achieve the shrink-wrapped, centered search module, custom CSS rules have been applied, and the method <code>doBeforeExpandContainer</code> has been customized to position the container directly below the input field.</p>
|
||||
<p>This example points to Yahoo! Search Web Services. Custom CSS rules have been applied to achieve the shrink-wrapped, centered search module.</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -53,7 +56,7 @@ body, h1 { margin:0;padding:0; } /* needed for known issue with Dom.getXY() in s
|
|||
|
||||
<form action="http://search.yahoo.com/search">
|
||||
<div id="ysearch">
|
||||
<label>Yahoo! Search: </label>
|
||||
<label for="ysearchinput">Yahoo! Search: </label>
|
||||
<input id="ysearchinput" type="text" name="p">
|
||||
<input id="ysearchsubmit" type="submit" value="Submit Query">
|
||||
<div id="ysearchcontainer"></div>
|
||||
|
|
@ -75,12 +78,12 @@ YAHOO.example.Centered = function() {
|
|||
myAutoComp.useShadow = true;
|
||||
|
||||
// Keeps container centered
|
||||
myAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) {
|
||||
/*myAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) {
|
||||
var pos = YAHOO.util.Dom.getXY(oTextbox);
|
||||
pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight + 2;
|
||||
YAHOO.util.Dom.setXY(oContainer,pos);
|
||||
return true;
|
||||
};
|
||||
};*/
|
||||
|
||||
return {
|
||||
oDS: myDataSource,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
(function(){var H=YAHOO.lang,R=YAHOO.env.ua,O=YAHOO.widget.Button.prototype,C=O.initAttributes,M=YAHOO.widget.ButtonGroup.prototype,S=M.initAttributes,G=M.addButton,V=(R.gecko&&R.gecko>=1.9)||(R.ie&&R.ie>=8),N="aria-",W="usearia",K="checked",E="type",h="menu",a="split",I="haspopup",b="render",T="radio",Z="checkbox",e="role",c="checkedChange",X="presentation",F="element",Q="radiogroup",U="checkedButtonChange",L="appendTo",D="labelledby",g="describedby",f="id";if(V){O.RADIO_DEFAULT_TITLE="";O.RADIO_CHECKED_TITLE="";O.CHECKBOX_DEFAULT_TITLE="";O.CHECKBOX_CHECKED_TITLE="";}var d=function(i,j){i.setAttribute(e,j);};var Y=function(i,k,j){i.setAttribute((N+k),j);};var A=function(k,i,j){this.cfg.setProperty(W,true);this.cfg.setProperty(D,j.get(f));};var B=function(){this._menu.subscribe(b,A,this);};var P=function(i){Y(this._button,K,i.newValue);};H.augmentObject(O,{_setUseARIA:function(j){var k=this.get(E),i=this._button;if(j){switch(k){case h:case a:Y(i,I,true);this.on(L,B);break;case T:case Z:d(i,k);Y(i,K,this.get(K));this.on(c,P);break;}}},initAttributes:function(i){this.setAttributeConfig(W,{value:i.usearia||V,validator:H.isBoolean,writeOnce:true,method:this._setUseARIA});C.apply(this,arguments);if(V){this.set(W,true);}}},"initAttributes","_setUseARIA");var J=function(j){var i=j.prevValue;if(i){i._button.tabIndex=-1;}j.newValue._button.tabIndex=0;};H.augmentObject(M,{addButton:function(k){var l=G.call(this,k),j,i;if(this.get(W)){l.set(W,true);j=l._button;i=j.parentNode;d(i,X);d(i.parentNode,X);j.tabIndex=l.get(K)?0:-1;}return l;},_setUseARIA:function(i){if(i){d(this.get(F),Q);this.on(U,J);}},_setLabelledBy:function(i){if(this.get(W)){Y(this.get(F),D,i);}},_setDescribedBy:function(i){if(this.get(W)){Y(this.get(F),g,i);}},initAttributes:function(i){this.setAttributeConfig(W,{value:i.usearia||V,validator:H.isBoolean,writeOnce:true,method:this._setUseARIA});this.setAttributeConfig(D,{value:i.labelledby,validator:H.isString,method:this._setLabelledBy});this.setAttributeConfig(g,{value:i.describedby,validator:H.isString,method:this._setDescribedBy});S.apply(this,arguments);if(V){this.set(W,true);}}},"initAttributes","_setUseARIA","_setLabelledBy","_setDescribedBy","addButton");}());
|
||||
(function(){var H=YAHOO.lang,R=YAHOO.env.ua,O=YAHOO.widget.Button.prototype,C=O.initAttributes,M=YAHOO.widget.ButtonGroup.prototype,S=M.initAttributes,G=M.addButton,V=(R.gecko&&R.gecko>=1.9)||(R.ie&&R.ie>=8),N="aria-",W="usearia",K="checked",E="type",h="menu",a="split",I="haspopup",b="render",T="radio",Z="checkbox",e="role",c="checkedChange",X="presentation",F="element",Q="radiogroup",U="checkedButtonChange",L="appendTo",D="labelledby",g="describedby",f="id";if(V){O.RADIO_DEFAULT_TITLE="";O.RADIO_CHECKED_TITLE="";O.CHECKBOX_DEFAULT_TITLE="";O.CHECKBOX_CHECKED_TITLE="";}var d=function(i,j){i.setAttribute(e,j);};var Y=function(i,k,j){i.setAttribute((N+k),j);};var A=function(k,i,j){this.cfg.setProperty(W,true);this.cfg.setProperty(D,j.get(f));};var B=function(){this._menu.subscribe(b,A,this);};var P=function(i){Y(this._button,K,i.newValue);};H.augmentObject(O,{_setUseARIA:function(j){var k=this.get(E),i=this._button;if(j){switch(k){case h:case a:Y(i,I,true);this.on(L,B);break;case T:case Z:d(i,k);Y(i,K,this.get(K));this.on(c,P);break;}}},initAttributes:function(i){this.setAttributeConfig(W,{value:i.usearia||V,validator:H.isBoolean,writeOnce:true,method:this._setUseARIA});C.apply(this,arguments);if(V){this.set(W,true);}}},"initAttributes","_setUseARIA");var J=function(j){var i=j.prevValue;if(i){i._button.tabIndex=-1;}j.newValue._button.tabIndex=0;};H.augmentObject(M,{addButton:function(k){var l=G.call(this,k),j,i;if(this.get(W)){l.set(W,true);j=l._button;i=j.parentNode;d(i,X);d(i.parentNode,X);j.tabIndex=l.get(K)?0:-1;}return l;},_setUseARIA:function(i){if(i){d(this.get(F),Q);this.on(U,J);}},_setLabelledBy:function(i){if(this.get(W)){Y(this.get(F),D,i);}},_setDescribedBy:function(i){if(this.get(W)){Y(this.get(F),g,i);}},initAttributes:function(i){this.setAttributeConfig(W,{value:i.usearia||V,validator:H.isBoolean,writeOnce:true,method:this._setUseARIA});this.setAttributeConfig(D,{value:i.labelledby,validator:H.isString,method:this._setLabelledBy});this.setAttributeConfig(g,{value:i.describedby,validator:H.isString,method:this._setDescribedBy});S.apply(this,arguments);if(V){this.set(W,true);}}},"initAttributes","_setUseARIA","_setLabelledBy","_setDescribedBy","addButton");}());YAHOO.register("buttonariaplugin",YAHOO.widget.Button,{version:"@VERSION@",build:"@BUILD@"});
|
||||
|
|
@ -288,4 +288,5 @@
|
|||
}, "initAttributes", "_setUseARIA", "_setLabelledBy", "_setDescribedBy", "addButton");
|
||||
|
||||
|
||||
}());
|
||||
}());
|
||||
YAHOO.register("buttonariaplugin", YAHOO.widget.Button, {version: "@VERSION@", build: "@BUILD@"});
|
||||
|
|
|
|||
BIN
www/extras/yui/examples/button/assets/checkbox.png
Normal file
BIN
www/extras/yui/examples/button/assets/checkbox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Push Buttons</title>
|
||||
|
||||
|
|
@ -19,7 +21,7 @@ body {
|
|||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -63,7 +65,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Push Buttons</h1>
|
||||
|
|
@ -123,7 +125,7 @@ body {
|
|||
|
||||
</script>
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset id="pushbuttons">
|
||||
<legend>Push Buttons</legend>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Link Buttons</title>
|
||||
|
||||
|
|
@ -19,7 +21,7 @@ body {
|
|||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -67,7 +69,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Link Buttons</h1>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Checkbox Buttons</title>
|
||||
|
||||
|
|
@ -19,7 +21,7 @@ body {
|
|||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -56,7 +58,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Checkbox Buttons</h1>
|
||||
|
|
@ -70,7 +72,7 @@ body {
|
|||
<script type="text/javascript">
|
||||
|
||||
(function () {
|
||||
|
||||
|
||||
var Button = YAHOO.widget.Button;
|
||||
|
||||
// "contentready" event handler for the "checkboxbuttonsfrommarkup" <fieldset>
|
||||
|
|
@ -90,7 +92,7 @@ body {
|
|||
var oCheckButton5 = new Button("checkbutton5", { type: "checkbox", value: "1", checked: true });
|
||||
var oCheckButton6 = new Button("checkbutton6", { type: "checkbox", value: "2"});
|
||||
var oCheckButton7 = new Button("checkbutton7", { type: "checkbox", value: "3" });
|
||||
var oCheckButton8 = new Button("checkbutton8", { type: "checkbox", value: "4" });
|
||||
var oCheckButton8 = new Button("checkbutton8", { type: "checkbox", value: "4" });
|
||||
|
||||
});
|
||||
|
||||
|
|
@ -107,7 +109,7 @@ body {
|
|||
</script>
|
||||
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset id="checkboxbuttons">
|
||||
<legend>Checkbox Buttons</legend>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Radio Buttons</title>
|
||||
|
||||
|
|
@ -19,7 +21,7 @@ body {
|
|||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -56,7 +58,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Radio Buttons</h1>
|
||||
|
|
@ -127,7 +129,7 @@ body {
|
|||
</script>
|
||||
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset id="radiobuttons">
|
||||
<legend>Radio Buttons</legend>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Submit Buttons</title>
|
||||
|
||||
|
|
@ -19,7 +21,7 @@ body {
|
|||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -56,7 +58,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Submit Buttons</h1>
|
||||
|
|
@ -115,7 +117,7 @@ body {
|
|||
</script>
|
||||
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset>
|
||||
<legend>Info</legend>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Reset Buttons</title>
|
||||
|
||||
|
|
@ -19,7 +21,7 @@ body {
|
|||
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -40,7 +42,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Reset Buttons</h1>
|
||||
|
|
@ -85,7 +87,7 @@ body {
|
|||
|
||||
</script>
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset>
|
||||
<legend>Info</legend>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Menu Buttons</title>
|
||||
|
||||
|
|
@ -22,7 +24,7 @@ body {
|
|||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -50,7 +52,7 @@ body {
|
|||
}
|
||||
|
||||
#menubutton3menu,
|
||||
#menubutton5menu {
|
||||
#menubutton4menu {
|
||||
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
|
|
@ -81,118 +83,207 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Menu Buttons</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates different ways to create a Menu Button.</p>
|
||||
<p>This example demonstrates different ways to create and use a Menu Button.</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.init = function () {
|
||||
// "contentready" event handler for the "menubuttonsfrommarkup" <fieldset>
|
||||
|
||||
// "contentready" event handler for the "menubuttonsfrommarkup" <fieldset>
|
||||
YAHOO.util.Event.onContentReady("menubuttonsfrommarkup", function () {
|
||||
|
||||
YAHOO.util.Event.onContentReady("menubuttonsfrommarkup", function () {
|
||||
// Create a Button using an existing <input> and <select> element.
|
||||
// Because the "type" attribute of the <input> element was set to
|
||||
// "submit" - clicking on any MenuItem in the Button's Menu will
|
||||
// automatically submit the Button's parent <form>.
|
||||
|
||||
// Create a Button using an existing <input> element as a data source
|
||||
var oMenuButton1 = new YAHOO.widget.Button("menubutton1",
|
||||
{ type: "menu", menu: "menubutton1select" });
|
||||
|
||||
|
||||
var oMenuButton1 = new YAHOO.widget.Button("menubutton1", { type: "menu", menu: "menubutton1select" });
|
||||
// "render" event handler for the Button's Menu
|
||||
|
||||
var oMenuButton2 = new YAHOO.widget.Button("menubutton2", { type: "menu", menu: "menubutton2select" });
|
||||
var onMenuRender = function (p_sType, p_aArgs) {
|
||||
|
||||
this.addItems([
|
||||
|
||||
{ text: "Four", value: 4 },
|
||||
{ text: "Five", value: 5 }
|
||||
|
||||
]);
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Create a Button using an existing <input> element and a YAHOO.widget.Overlay instance as its menu
|
||||
// Add some additional MenuItems to the Button's Menu once it has
|
||||
// been rendered
|
||||
|
||||
oMenuButton1.getMenu().subscribe("render", onMenuRender);
|
||||
|
||||
|
||||
var oMenuButton3 = new YAHOO.widget.Button("menubutton3", { type: "menu", menu: "menubutton3menu" });
|
||||
|
||||
});
|
||||
// "submit" event handler for the <form>
|
||||
|
||||
var onExampleSubmit = function(p_oEvent) {
|
||||
|
||||
var bSubmit =
|
||||
window.confirm("Are you sure you want to submit the form?");
|
||||
|
||||
if(!bSubmit) {
|
||||
YAHOO.util.Event.preventDefault(p_oEvent);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
// "click" event handler for each item in the Button's menu
|
||||
// Add a "submit" event handler to the <form> to confirm that
|
||||
// clicking on one of the MenuItems in the Button's Menu
|
||||
// submits the <form>.
|
||||
|
||||
function onMenuItemClick(p_sType, p_aArgs, p_oItem) {
|
||||
|
||||
oMenuButton4.set("label", p_oItem.cfg.getProperty("text"));
|
||||
|
||||
}
|
||||
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
|
||||
|
||||
|
||||
// Create a Button without using existing markup
|
||||
// Create a Button using an existing <input> and <select> element
|
||||
|
||||
// Create an array of YAHOO.widget.MenuItem configuration properties
|
||||
|
||||
var aMenuButton4Menu = [
|
||||
|
||||
{ text: "one", value: 1, onclick: { fn: onMenuItemClick } },
|
||||
{ text: "two", value: 2, onclick: { fn: onMenuItemClick } },
|
||||
{ text: "three", value: 3, onclick: { fn: onMenuItemClick } }
|
||||
|
||||
];
|
||||
|
||||
/*
|
||||
Instantiate a Menu Button using the array of YAHOO.widget.MenuItem
|
||||
configuration properties as the value for the "menu" configuration
|
||||
attribute.
|
||||
*/
|
||||
|
||||
var oMenuButton4 = new YAHOO.widget.Button({ type: "menu", label: "one", name: "mymenubutton", menu: aMenuButton4Menu, container: "menubuttonsfromjavascript" });
|
||||
var oMenuButton2 = new YAHOO.widget.Button("menubutton2",
|
||||
{ type: "menu", menu: "menubutton2select" });
|
||||
|
||||
|
||||
/*
|
||||
Search for an element to place the Menu Button into via the
|
||||
Event utilities "onContentReady" method
|
||||
*/
|
||||
|
||||
YAHOO.util.Event.onContentReady("menubuttonsfromjavascript", function () {
|
||||
|
||||
// Instantiate an Overlay instance
|
||||
|
||||
var oOverlay = new YAHOO.widget.Overlay("menubutton5menu", { visible: false });
|
||||
|
||||
oOverlay.setBody("Menu Button 5 Menu");
|
||||
|
||||
// Instantiate a Menu Button
|
||||
|
||||
var oMenuButton5 = new YAHOO.widget.Button({ type: "menu", label: "Menu Button 5", menu: oOverlay });
|
||||
|
||||
/*
|
||||
Append the Menu Button and Overlay to the element with the id
|
||||
of "menubuttonsfromjavascript"
|
||||
*/
|
||||
|
||||
oMenuButton5.appendTo(this);
|
||||
// "click" event listener for the second Button's Menu instance
|
||||
|
||||
oOverlay.render(this);
|
||||
|
||||
});
|
||||
var onMenuClick = function (p_sType, p_aArgs) {
|
||||
|
||||
var oEvent = p_aArgs[0], // DOM event
|
||||
|
||||
oMenuItem = p_aArgs[1]; // MenuItem instance that was the
|
||||
// target of the event
|
||||
|
||||
if (oMenuItem) {
|
||||
YAHOO.log("[MenuItem Properties] text: " +
|
||||
oMenuItem.cfg.getProperty("text") + ", value: " +
|
||||
oMenuItem.value);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
function onExampleSubmit(p_oEvent) {
|
||||
// Add a "click" event listener for the Button's Menu
|
||||
|
||||
var bSubmit = window.confirm("Are you sure you want to submit this form?");
|
||||
oMenuButton2.getMenu().subscribe("click", onMenuClick);
|
||||
|
||||
if(!bSubmit) {
|
||||
|
||||
YAHOO.util.Event.preventDefault(p_oEvent);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
// Create a Button using an existing <input> element and a
|
||||
// YAHOO.widget.Overlay instance as its menu
|
||||
|
||||
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
|
||||
var oMenuButton3 = new YAHOO.widget.Button("menubutton3",
|
||||
{ type: "menu", menu: "menubutton3menu" });
|
||||
|
||||
} ();
|
||||
|
||||
// "click" event listener for the third Button's
|
||||
// menu (Overlay instance)
|
||||
|
||||
var onOverlayClick = function (p_oEvent) {
|
||||
|
||||
YAHOO.log("You clicked the Button's menu.");
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Add a "click" event listener to the Button's menu (Overlay instance)
|
||||
|
||||
YAHOO.util.Event.on(oMenuButton3.getMenu().element,
|
||||
"click", onOverlayClick);
|
||||
|
||||
|
||||
// "show" event listener for the third Button's menu (Overlay instance)
|
||||
|
||||
var onOverlayShow = function (p_sType, p_aArgs) {
|
||||
|
||||
YAHOO.log("The Button's menu is now visible.");
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Add a listener for the Button's "show" event
|
||||
|
||||
oMenuButton3.getMenu().subscribe("show", onOverlayShow);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Search for an element to place the Menu Button into via the
|
||||
// Event utility's "onContentReady" method
|
||||
|
||||
YAHOO.util.Event.onContentReady("menubuttonsfromjavascript", function () {
|
||||
|
||||
// Create two Buttons without using existing markup
|
||||
|
||||
|
||||
// Instantiate an Overlay instance
|
||||
|
||||
var oOverlay = new YAHOO.widget.Overlay("menubutton4menu",
|
||||
{ visible: false });
|
||||
|
||||
oOverlay.setBody("Menu Button 4 Menu");
|
||||
|
||||
|
||||
// Instantiate a Menu Button
|
||||
|
||||
var oMenuButton4 = new YAHOO.widget.Button({ type: "menu",
|
||||
label: "Menu Button 4",
|
||||
menu: oOverlay,
|
||||
container: this });
|
||||
|
||||
|
||||
// "click" event handler for each item in the Button's menu
|
||||
|
||||
var onMenuItemClick = function (p_sType, p_aArgs, p_oItem) {
|
||||
|
||||
var sText = p_oItem.cfg.getProperty("text");
|
||||
|
||||
YAHOO.log("[MenuItem Properties] text: " + sText + ", value: " +
|
||||
p_oItem.value);
|
||||
|
||||
oMenuButton5.set("label", sText);
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Create an array of YAHOO.widget.MenuItem configuration properties
|
||||
|
||||
var aMenuButton5Menu = [
|
||||
|
||||
{ text: "One", value: 1, onclick: { fn: onMenuItemClick } },
|
||||
{ text: "Two", value: 2, onclick: { fn: onMenuItemClick } },
|
||||
{ text: "Three", value: 3, onclick: { fn: onMenuItemClick } }
|
||||
|
||||
];
|
||||
|
||||
|
||||
// Instantiate a Menu Button using the array of YAHOO.widget.MenuItem
|
||||
// configuration properties as the value for the "menu"
|
||||
// configuration attribute.
|
||||
|
||||
var oMenuButton5 = new YAHOO.widget.Button({ type: "menu",
|
||||
label: "One",
|
||||
name: "mymenubutton",
|
||||
menu: aMenuButton5Menu,
|
||||
container: this });
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset id="menubuttons">
|
||||
<legend>Menu Buttons</legend>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Split Buttons</title>
|
||||
|
||||
|
|
@ -22,7 +24,7 @@ body {
|
|||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -50,7 +52,7 @@ body {
|
|||
}
|
||||
|
||||
#splitbutton3menu,
|
||||
#splitbutton5menu {
|
||||
#splitbutton4menu {
|
||||
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
|
|
@ -81,107 +83,172 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Split Buttons</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>This example demonstrates different ways to create a Split Button.</p>
|
||||
<p>This example demonstrates different ways to create and use a Split Button.</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.init = function () {
|
||||
// "contentready" event handler for the "splitbuttonsfrommarkup" <fieldset>
|
||||
|
||||
// "contentready" event handler for the "splitbuttonsfrommarkup" <fieldset>
|
||||
YAHOO.util.Event.onContentReady("splitbuttonsfrommarkup", function () {
|
||||
|
||||
YAHOO.util.Event.onContentReady("splitbuttonsfrommarkup", function () {
|
||||
// Create a Button using an existing <input> and <select> element.
|
||||
// Because the "type" attribute of the <input> element was set to
|
||||
// "submit" - clicking on any MenuItem in the Button's Menu will
|
||||
// automatically submit the Button's parent <form>.
|
||||
|
||||
// Create a Button using an existing <input> element as a data source
|
||||
var oSplitButton1 = new YAHOO.widget.Button("splitbutton1", { type: "split", menu: "splitbutton1select" });
|
||||
|
||||
var oSplitButton1 = new YAHOO.widget.Button("splitbutton1", { type: "split", menu: "splitbutton1select" });
|
||||
// "render" event handler for the Button's Menu
|
||||
|
||||
var oSplitButton2 = new YAHOO.widget.Button("splitbutton2", { type: "split", menu: "splitbutton2select" });
|
||||
|
||||
// Create a Button using an existing <input> element and a YAHOO.widget.Overlay instance as its menu
|
||||
|
||||
var oSplitButton3 = new YAHOO.widget.Button("splitbutton3", { type: "split", menu: "splitbutton3menu" });
|
||||
|
||||
});
|
||||
var onMenuRender = function (p_sType, p_aArgs) {
|
||||
|
||||
this.addItems([
|
||||
|
||||
{ text: "Four", value: 4 },
|
||||
{ text: "Five", value: 5 }
|
||||
|
||||
]);
|
||||
|
||||
};
|
||||
|
||||
// Add some additional MenuItems to the Button's Menu once it has been rendered
|
||||
|
||||
oSplitButton1.getMenu().subscribe("render", onMenuRender);
|
||||
|
||||
// "submit" event handler for the <form>
|
||||
|
||||
var onExampleSubmit = function (p_oEvent) {
|
||||
|
||||
var bSubmit = window.confirm("Are you sure you want to submit this form?");
|
||||
|
||||
if(!bSubmit) {
|
||||
YAHOO.util.Event.preventDefault(p_oEvent);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// Add a "submit" event handler to the <form> to confirm that
|
||||
// clicking on one of the MenuItems in the Button's Menu
|
||||
// submits the <form>.
|
||||
|
||||
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
|
||||
|
||||
|
||||
// Create a Button without using existing markup
|
||||
|
||||
// Create an array of YAHOO.widget.MenuItem configuration properties
|
||||
// "click" event handler for the Button - called when the user clicks
|
||||
// on the Button's text label, not when the user clicks on the area
|
||||
// of the Button that displays the Button's Menu.
|
||||
|
||||
var aSplitButton4Menu = [
|
||||
|
||||
{ text: "one", value: 1 },
|
||||
{ text: "two", value: 2 },
|
||||
{ text: "three", value: 3 }
|
||||
|
||||
];
|
||||
var onButtonClick = function () {
|
||||
|
||||
YAHOO.log("You clicked the Button.");
|
||||
|
||||
};
|
||||
|
||||
/*
|
||||
Instantiate a Split Button using the array of YAHOO.widget.MenuItem
|
||||
configuration properties as the value for the "menu" configuration
|
||||
attribute.
|
||||
*/
|
||||
// Create a Button using an existing <input> and <select> element
|
||||
|
||||
var oSplitButton4 = new YAHOO.widget.Button({ type: "split", label: "Split Button 4", name: "splitbutton3", menu: aSplitButton4Menu, container: "splitbuttonsfromjavascript" });
|
||||
var oSplitButton2 = new YAHOO.widget.Button("splitbutton2", { type: "split", menu: "splitbutton2select", onclick: { fn: onButtonClick } });
|
||||
|
||||
/*
|
||||
Search for an element to place the Split Button into via the
|
||||
Event utilities "onContentReady" method
|
||||
*/
|
||||
// Click event listener for the second Button's Menu instance
|
||||
|
||||
YAHOO.util.Event.onContentReady("splitbuttonsfromjavascript", function () {
|
||||
|
||||
// Instantiate an Overlay instance
|
||||
|
||||
var oOverlay = new YAHOO.widget.Overlay("splitbutton5menu", { visible: false });
|
||||
|
||||
oOverlay.setBody("Split Button 5 Menu");
|
||||
var onMenuClick = function (p_sType, p_aArgs) {
|
||||
|
||||
var oEvent = p_aArgs[0], // DOM event
|
||||
oMenuItem = p_aArgs[1]; // MenuItem instance that was the target of the event
|
||||
|
||||
if (oMenuItem) {
|
||||
YAHOO.log("[MenuItem Properties] text: " + oMenuItem.cfg.getProperty("text") + ", value: " + oMenuItem.value);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// Add a "click" event listener for the Button's Menu
|
||||
|
||||
oSplitButton2.getMenu().subscribe("click", onMenuClick);
|
||||
|
||||
// "option" event listener - called when the user clicks on the
|
||||
// area of the Button that displays its Menu.
|
||||
|
||||
var onOption = function () {
|
||||
|
||||
YAHOO.log("You clicked the Split Button's option area.");
|
||||
|
||||
};
|
||||
|
||||
// Add a listener for the Button's "option" event
|
||||
|
||||
oSplitButton2.on("option", onOption);
|
||||
|
||||
|
||||
|
||||
// Create a Button using an existing <input> element and an Overlay instance as its menu
|
||||
|
||||
var oSplitButton3 = new YAHOO.widget.Button("splitbutton3", { type: "split", menu: "splitbutton3menu" });
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Instantiate a Split Button
|
||||
|
||||
var oSplitButton5 = new YAHOO.widget.Button({ type: "split", label: "Split Button 5", menu: oOverlay });
|
||||
// Search for an element to place the Split Button into via the
|
||||
// Event Utility's "onContentReady" method
|
||||
|
||||
/*
|
||||
Append the Split Button and Overlay to the element with the id
|
||||
of "splitbuttonsfromjavascript"
|
||||
*/
|
||||
YAHOO.util.Event.onContentReady("splitbuttonsfromjavascript", function () {
|
||||
|
||||
oSplitButton5.appendTo(this);
|
||||
|
||||
oOverlay.render(this);
|
||||
|
||||
});
|
||||
// Create two Buttons without using existing markup
|
||||
|
||||
|
||||
function onExampleSubmit(p_oEvent) {
|
||||
// Instantiate an Overlay instance
|
||||
|
||||
var bSubmit = window.confirm("Are you sure you want to submit this form?");
|
||||
var oOverlay = new YAHOO.widget.Overlay("splitbutton4menu", { visible: false });
|
||||
|
||||
if(!bSubmit) {
|
||||
|
||||
YAHOO.util.Event.preventDefault(p_oEvent);
|
||||
|
||||
}
|
||||
oOverlay.setBody("Split Button 4 Menu");
|
||||
|
||||
}
|
||||
// Instantiate a Split Button
|
||||
|
||||
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
|
||||
var oSplitButton4 = new YAHOO.widget.Button({ type: "split", label: "Split Button 4", menu: oOverlay, container: this });
|
||||
|
||||
|
||||
|
||||
// "click" event handler for each item in the Button's Menu
|
||||
|
||||
var onMenuItemClick = function (p_sType, p_aArgs, p_oItem) {
|
||||
|
||||
var sText = p_oItem.cfg.getProperty("text");
|
||||
|
||||
YAHOO.log("[MenuItem Properties] text: " + sText + ", value: " + p_oItem.value);
|
||||
|
||||
};
|
||||
|
||||
// Create an array of YAHOO.widget.MenuItem configuration properties
|
||||
|
||||
var aSplitButton5Menu = [
|
||||
|
||||
{ text: "One", value: 1, onclick: { fn: onMenuItemClick } },
|
||||
{ text: "Two", value: 2, onclick: { fn: onMenuItemClick } },
|
||||
{ text: "Three", value: 3, onclick: { fn: onMenuItemClick } }
|
||||
|
||||
];
|
||||
|
||||
// Instantiate a Split Button using the array of YAHOO.widget.MenuItem
|
||||
// configuration properties as the value for the "menu"
|
||||
// configuration attribute.
|
||||
|
||||
var oSplitButton5 = new YAHOO.widget.Button({ type: "split", label: "Split Button 5", name: "splitbutton5", menu: aSplitButton5Menu, container: this });
|
||||
|
||||
} ();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset id="splitbuttons">
|
||||
<legend>Split Buttons</legend>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Simple Calendar Menu Button</title>
|
||||
|
||||
|
|
@ -22,7 +24,7 @@ body {
|
|||
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
||||
<script type="text/javascript" src="../../build/calendar/calendar-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
||||
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
||||
|
||||
|
||||
|
|
@ -102,7 +104,7 @@ body {
|
|||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
<body class="yui-skin-sam">
|
||||
|
||||
|
||||
<h1>Simple Calendar Menu Button</h1>
|
||||
|
|
@ -278,7 +280,7 @@ This example demonstrates how to create a Menu Button whose Menu instance displa
|
|||
|
||||
<div>
|
||||
|
||||
<form id="button-example-form" name="button-example-form" method="post" action="#">
|
||||
<form id="button-example-form" name="button-example-form" method="post">
|
||||
|
||||
<fieldset id="datefields">
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue