src/cm/media/js/lib/yui/yui_3.0.0b1/examples/node-focusmanager/node-focusmanager-2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library Examples: Focus Manager Node Plugin: Accessible TabView</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style type="text/css">
/* The following style rules necessary to override style rules in the
YUI CSS file. */
#example ul,
#example li {
list-style: none;
list-style: none;
}
#example em {
font-style: normal;
}
#example .yui-tabpanel {
/* Use the "zoom" property to set the the hasLayout property to true.
This ensures that the background color of the tab's panel will
be rendered correctly when the example is running in the
example chrome.
*/
_zoom: 1;
}
#example .yui-tabpanel a {
text-decoration: underline;
color: blue;
}
#example h3 {
color: #000;
font-size: 100%;
font-weight: bold;
}
#example .yui-tabview {
margin: 0 .25em;
}
/* Hide the instructional text used to label the tabview offscreen.
This ensures it is still available to users of screen readers, but is
not visible to sighted users. */
#tabview-heading em {
position: absolute;
left: -999em;
}
/* Hide the list while it is being transformed into a tabview. */
.yui-loading #tabview-1 {
display: none;
}
</style>
<script type="text/javascript">
// Add a class to the documentElement to prevent the user from seeing
// the unstyled menu while the necessary CSS and JavaScript
// dependancies are being fetched.
document.documentElement.className = "yui-loading";
</script>
</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
<div id="ygunav">
<p>
<em>
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>
</em>
</p>
<form action="http://search.yahoo.com/search" id="sitesearchform">
<input name="vs" type="hidden" value="developer.yahoo.com">
<input name="vs" type="hidden" value="yuiblog.com">
<div id="sitesearch">
<label for="searchinput">Site Search (YDN & YUIBlog): </label>
<input type="text" id="searchinput" name="p">
<input type="submit" value="Search" id="searchsubmit" class="ygbt">
</div>
</form>
</div>
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div>
<div id="pagetitle"><h1>YUI Library Examples: Focus Manager Node Plugin: Accessible TabView</h1></div>
</div>
<div id="bd">
<div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>
<div id="yui-main">
<div class="yui-b">
<div class="yui-ge">
<div class="yui-u first example" id="main">
<h2>Focus Manager Node Plugin: Accessible TabView</h2>
<div id="example" class="promo">
<p>
<p>
This example illustrates how to create an accessible tabview widget using the
Focus Manager Node Plugin,
<a href="../../api/YUI.html#event_delegate">Event's delegation support</a>, and
Node's support for the
<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>.
</p> </p>
<div class="module example-container ">
<div class="hd exampleHd">
<p class="newWindowButton yui-skin-sam">
<a href="node-focusmanager-2_clean.html" target="_blank">View example in new window.</a>
</p>
</div> <div id="example-canvas" class="bd">
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<h3 id="tabview-heading">Today's News</h3>
<div id="tabview-1" class="yui-tabview">
<ul>
<li class="yui-tab yui-tab-selected"><a href="#top-stories"><em>Top Stories</em></a></li>
<li class="yui-tab"><a href="#world-news"><em>World</em></a></li>
<li class="yui-tab"><a href="#entertainment-news"><em>Entertainment</em></a></li>
<li class="yui-tab"><a href="#sports-news"><em>Sports</em></a></li>
<li class="yui-tab"><a href="#technology-news"><em>Technology</em></a></li>
</ul>
<div>
<div class="yui-tabpanel yui-tabpanel-selected" id="top-stories">
<h3>Top Stories</h3>
</div>
<div class="yui-tabpanel" id="world-news">
<h3>World News</h3>
</div>
<div class="yui-tabpanel" id="entertainment-news">
<h3>Entertainment News</h3>
</div>
<div class="yui-tabpanel" id="sports-news">
<h3>Sports News</h3>
</div>
<div class="yui-tabpanel" id="technology-news">
<h3>Technology News</h3>
</div>
</div>
</div>
<!-- YUI Seed -->
<script type="text/javascript" src="../../build/yui/yui.js"></script>
<script type="text/javascript">
YUI({
base: "../../build/",
modules: {
"tabview-css": {
type: "css",
fullpath: "assets/tabview.css"
}
},
timeout: 10000
}).use("tabview-css", "node-focusmanager", "node-event-simulate", function(Y) {
var tabView = Y.Node.get("#tabview-1"),
tabList = tabView.query("ul"),
tabHeading = Y.Node.get("#tabview-heading"),
sInstructionalText = tabHeading.get("innerHTML");
selectedTabAnchor = tabView.query(".yui-tab-selected>a"),
bGeckoIEWin = ((Y.UA.gecko || Y.UA.ie) && navigator.userAgent.indexOf("Windows") > -1),
panelMap = {};
// Remove the "yui-loading" class from the documentElement
// now that the necessary YUI dependencies are loaded.
tabView.get("ownerDocument").get("documentElement").removeClass("yui-loading");
// Apply the ARIA roles, states and properties.
// Add some instructional text to the heading that will be read by
// the screen reader when the first tab in the tabview is focused.
tabHeading.set("innerHTML", (sInstructionalText + " <em>Press the enter key to load the content of each tab.</em>"));
tabList.set("aria-labelledby", "tabview-heading");
tabList.set("role", "tablist");
tabView.query("div").set("role", "presentation");
tabView.plug(Y.Plugin.NodeFocusManager, {
descendants: ".yui-tab>a",
keys: { next: "down:39", // Right arrow
previous: "down:37" }, // Left arrow
focusClass: {
className: "yui-tab-focus",
fn: function (node) {
return node.get("parentNode");
}
},
circular: true
});
// If the list of tabs loses focus, set the activeDescendant
// attribute to the currently selected tab.
tabView.focusManager.after("focusedChange", function (event) {
if (!event.newVal) { // The list of tabs has lost focus
this.set("activeDescendant", selectedTabAnchor);
}
});
tabView.queryAll(".yui-tab>a").each(function (anchor) {
var sHref = anchor.getAttribute("href", 2),
sPanelID = sHref.substring(1, sHref.length),
panel;
// Apply the ARIA roles, states and properties to each tab
anchor.set("role", "tab");
anchor.get("parentNode").set("role", "presentation");
// Remove the "href" attribute from the anchor element to
// prevent JAWS and NVDA from reading the value of the "href"
// attribute when the anchor is focused
if (bGeckoIEWin) {
anchor.removeAttribute("href");
}
// Cache a reference to id of the tab's corresponding panel
// element so that it can be made visible when the tab
// is clicked.
panelMap[anchor.get("id")] = sPanelID;
// Apply the ARIA roles, states and properties to each panel
panel = Y.Node.get(("#" + sPanelID));
panel.setAttrs({
role: "tabpanel",
"aria-labelledby": anchor.get("id")
});
});
// Use the "delegate" custom event to listen for the "click" event
// of each tab's <A> element.
Y.on("delegate", function (event) {
var selectedPanel,
oTarget = event.currentTarget,
sID = oTarget.get("id");
// Deselect the currently selected tab and hide its
// corresponding panel.
if (selectedTabAnchor) {
selectedTabAnchor.get("parentNode").removeClass("yui-tab-selected");
Y.Node.get(("#" + panelMap[selectedTabAnchor.get("id")])).removeClass("yui-tabpanel-selected");
}
selectedTabAnchor = oTarget;
selectedTabAnchor.get("parentNode").addClass("yui-tab-selected");
selectedPanel = Y.Node.get(("#" + panelMap[sID]));
selectedPanel.addClass("yui-tabpanel-selected");
creatingPaging(selectedPanel);
// Prevent the browser from following the URL specified by the
// anchor's "href" attribute when clicked.
event.preventDefault();
}, tabView, "click", ".yui-tab>a");
// Since the anchor's "href" attribute has been removed, the
// element will not fire the click event in Firefox when the
// user presses the enter key. To fix this, dispatch the
// "click" event to the anchor when the user presses the
// enter key.
if (bGeckoIEWin) {
Y.on("delegate", function (event) {
if (event.charCode === 13) {
event.currentTarget.simulate("click");
}
}, "#tabview-1", "keydown", ">ul>li>a");
}
var creatingPaging = function (panel) {
var listitem,
sHTML,
paging;
if (!panel.query(".paging")) {
listitem = selectedTabAnchor.get("parentNode");
sHTML = "";
if (listitem.previous()) {
sHTML += '<button type="button" class="yui-tabview-prevbtn">Previous Tab Panel</button>';
}
if (listitem.next()) {
sHTML += '<button type="button" class="yui-tabview-nextbtn">Next Tab Panel</button>';
}
paging = Y.Node.create('<div class="paging">' + sHTML + '</div>');
panel.appendChild(paging);
}
};
creatingPaging(Y.Node.get(".yui-tabpanel-selected"));
Y.on("delegate", function (event) {
var node = selectedTabAnchor.get("parentNode").previous().query("a");
tabView.focusManager.focus(node);
node.simulate("click");
}, tabView, "click", ".yui-tabview-prevbtn");
Y.on("delegate", function (event) {
var node = selectedTabAnchor.get("parentNode").next().query("a");
tabView.focusManager.focus(node);
node.simulate("click");
}, tabView, "click", ".yui-tabview-nextbtn");
});
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</div>
</div>
</div>
<h3>Setting Up the HTML</h3>
<p>
The tabs in the tabview widget will be represented by a list of
<code><a></code> elements whose <code>href</code> attribute is set to
the id of an <code><div></code> element that contains its content.
Therefore, without JavaScript and CSS, the tabs function as in-page links.
</p>
<textarea name="code" class="HTML" cols="60" rows="1">
<h3 id="tabview-heading">Today's News</h3>
<div id="tabview-1" class="yui-tabview">
<ul>
<li class="yui-tab yui-tab-selected"><a href="#top-stories"><em>Top Stories</em></a></li>
<li class="yui-tab"><a href="#world-news"><em>World</em></a></li>
<li class="yui-tab"><a href="#entertainment-news"><em>Entertainment</em></a></li>
<li class="yui-tab"><a href="#sports-news"><em>Sports</em></a></li>
<li class="yui-tab"><a href="#technology-news"><em>Technology</em></a></li>
</ul>
<div>
<div class="yui-tabpanel yui-tabpanel-selected" id="top-stories">
<!-- Tab Panel Content Here -->
</div>
<div class="yui-tabpanel" id="world-news">
<!-- Tab Panel Content Here -->
</div>
<div class="yui-tabpanel" id="entertainment-news">
<!-- Tab Panel Content Here -->
</div>
<div class="yui-tabpanel" id="sports-news">
<!-- Tab Panel Content Here -->
</div>
<div class="yui-tabpanel" id="technology-news">
<!-- Tab Panel Content Here -->
</div>
</div>
</div>
</textarea>
<p>
For this example the content of each tab panel is created on the server using
the <a href="http://developer.yahoo.com/yql/">YQL</a> API to fetch the title and
URL for news stories made available from the various
<a href="http://news.yahoo.com/rss" title="Yahoo! News - RSS">Yahoo! News RSS feeds</a>.
Here's the PHP:
</p>
<textarea name="code" class="PHP" cols="60" rows="1">
function getFeed($sFeed) {
$params = array(
"q" => ('select title,link from rss where url="http://rss.news.yahoo.com/rss/'.$sFeed.'"'),
"format" => "json"
);
$encoded_params = array();
foreach ($params as $k => $v) {
$encoded_params[] = urlencode($k)."=".urlencode($v);
}
$url = "http://query.yahooapis.com/v1/public/yql?".implode("&", $encoded_params);
$rsp = file_get_contents($url);
if ($rsp !== false) {
$rsp_obj = json_decode($rsp, true);
$results = $rsp_obj["query"]["results"]["item"];
$list = ""; // HTML output
$nResults = count($results);
if ($nResults > 10) {
$nResults = 9;
}
for ($i = 0; $i<= $nResults; $i++) {
$result = $results[$i];
$list.= <<< END_OF_HTML
<li>
<a href="{$result["link"]}"><q>{$result["title"]}</q></a>
</li>
END_OF_HTML;
}
return ("<ul>" . $list . "</ul>");
}
}
</textarea>
<h3>Progressive Enhancement</h3>
<p>
The markup above will be transformed into a tabview widget using both CSS and
JavaScript. To account for the scenario where the user has CSS enabled in
their browser but JavaScript is disabled, the CSS used to style the tabview
will be loaded via JavaScript using the
<a href="http://developer.yahoo.com/yui/3/yui/#loader">built-in loader of the YUI Global Object</a>.
Additionally, JavaScript will be used to temporarily hide the tabview markup
while the JavaScript and CSS are in the process of loading to prevent the user
from seeing a flash unstyled content.
</p>
<h3>ARIA Support</h3>
<p>
Through the use of CSS and JavaScript the HTML for the tabview can be
transformed into something that looks and behaves like a desktop tab control,
but users of screen readers won't perceive it as an atomic widget, but rather
simply as a set of HTML elements. However, through the application
of the
<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>, it is
possible to improve the semantics of the markup such that users of screen
readers perceive it as a tab control.
</p>
<h3>Keyboard Functionality</h3>
<p>
The keyboard functionality for the tabview widget will be provided by the
Focus Manager Node Plugin. The Focus Manager's
<a href="../../api/plugin.NodeFocusManager.html#config_descendants"><code>descendants</code></a>
attribute is set to a value of ".yui-tab>a", so that only one tab in the tabview
is in the browser's default tab flow. This allows users navigating via the
keyboard to use the tab key to quickly move into and out of the tabview. Once
the tabview has focus, the user can move focus among each tab using the left
and right arrows keys, as defined by the value of the
<a href="../../api/plugin.NodeFocusManager.html#config_keys"><code>keys</code></a>
attribute. Lastly, the
<a href="../../api/plugin.NodeFocusManager.html#config_focusClass"><code>focusClass</code></a>
attribute is used to apply a class of <code>yui-tab-focus</code> to the parent
<code><li></code> of each <code><a></code> when it is focused,
making it easy to style the tab's focused state in each of the
<a href="http://developer.yahoo.com/yui/articles/gbs/#gbschart">A-Grade browsers</a>.
<textarea name="code" class="JScript" cols="60" rows="1">
// Add a class to the documentElement to prevent the user from seeing
// the unstyled menu while the necessary CSS and JavaScript
// dependancies are being fetched.
document.documentElement.className = "yui-loading";
YUI({
base: "../../build/",
modules: {
"tabview-css": {
type: "css",
fullpath: "assets/tabview.css"
}
},
timeout: 10000
}).use("tabview-css", "node-focusmanager", "node-event-simulate", function(Y) {
var tabView = Y.Node.get("#tabview-1"),
tabList = tabView.query("ul"),
tabHeading = Y.Node.get("#tabview-heading"),
sInstructionalText = tabHeading.get("innerHTML");
selectedTabAnchor = tabView.query(".yui-tab-selected>a"),
bGeckoIEWin = ((Y.UA.gecko || Y.UA.ie) && navigator.userAgent.indexOf("Windows") > -1),
panelMap = {};
// Remove the "yui-loading" class from the documentElement
// now that the necessary YUI dependencies are loaded.
tabView.get("ownerDocument").get("documentElement").removeClass("yui-loading");
// Apply the ARIA roles, states and properties.
// Add some instructional text to the heading that will be read by
// the screen reader when the first tab in the tabview is focused.
tabHeading.set("innerHTML", (sInstructionalText + " <em>Press the enter key to load the content of each tab.</em>"));
tabList.set("aria-labelledby", "tabview-heading");
tabList.set("role", "tablist");
tabView.query("div").set("role", "presentation");
tabView.plug(Y.Plugin.NodeFocusManager, {
descendants: ".yui-tab>a",
keys: { next: "down:39", // Right arrow
previous: "down:37" }, // Left arrow
focusClass: {
className: "yui-tab-focus",
fn: function (node) {
return node.get("parentNode");
}
},
circular: true
});
// If the list of tabs loses focus, set the activeDescendant
// attribute to the currently selected tab.
tabView.focusManager.after("focusedChange", function (event) {
if (!event.newVal) { // The list of tabs has lost focus
this.set("activeDescendant", selectedTabAnchor);
}
});
tabView.queryAll(".yui-tab>a").each(function (anchor) {
var sHref = anchor.getAttribute("href", 2),
sPanelID = sHref.substring(1, sHref.length),
panel;
// Apply the ARIA roles, states and properties to each tab
anchor.set("role", "tab");
anchor.get("parentNode").set("role", "presentation");
// Remove the "href" attribute from the anchor element to
// prevent JAWS and NVDA from reading the value of the "href"
// attribute when the anchor is focused
if (bGeckoIEWin) {
anchor.removeAttribute("href");
}
// Cache a reference to id of the tab's corresponding panel
// element so that it can be made visible when the tab
// is clicked.
panelMap[anchor.get("id")] = sPanelID;
// Apply the ARIA roles, states and properties to each panel
panel = Y.Node.get(("#" + sPanelID));
panel.setAttrs({
role: "tabpanel",
"aria-labelledby": anchor.get("id")
});
});
// Use the "delegate" custom event to listen for the "click" event
// of each tab's <A> element.
Y.on("delegate", function (event) {
var selectedPanel,
oTarget = event.currentTarget,
sID = oTarget.get("id");
// Deselect the currently selected tab and hide its
// corresponding panel.
if (selectedTabAnchor) {
selectedTabAnchor.get("parentNode").removeClass("yui-tab-selected");
Y.Node.get(("#" + panelMap[selectedTabAnchor.get("id")])).removeClass("yui-tabpanel-selected");
}
selectedTabAnchor = oTarget;
selectedTabAnchor.get("parentNode").addClass("yui-tab-selected");
selectedPanel = Y.Node.get(("#" + panelMap[sID]));
selectedPanel.addClass("yui-tabpanel-selected");
creatingPaging(selectedPanel);
// Prevent the browser from following the URL specified by the
// anchor's "href" attribute when clicked.
event.preventDefault();
}, tabView, "click", ".yui-tab>a");
// Since the anchor's "href" attribute has been removed, the
// element will not fire the click event in Firefox when the
// user presses the enter key. To fix this, dispatch the
// "click" event to the anchor when the user presses the
// enter key.
if (bGeckoIEWin) {
Y.on("delegate", function (event) {
if (event.charCode === 13) {
event.currentTarget.simulate("click");
}
}, "#tabview-1", "keydown", ">ul>li>a");
}
});
</textarea>
<h3>Accessibility Sugar</h3>
<p>
One of the challenges faced by users of screen readers is knowing when you've
left the context of a given control. In the case of this tabview, if it
were adjacent to another ARIA-enabled widget, the user would know they've
left the tabview when the screen reader announces the role of the adjacent
widget. However, if the tabview is sitting alongside standard HTML content, it
would be really difficult for the user to know when they've left the context of
the active panel.
</p>
<p>
One solution to this problem is to add some additional navigation as the last
child of each tab panel that allows the user to move to the previous and next
panel in the tabview. This will not only help alert users of screen readers
that they've reached the end of the tab's panel, but allow <em>all</em>
keyboard users to move more quickly to the next/previous panel. Without this
additionally navigation, keyboard users would typically have to press
shift+tab to navigate back up to the list of tabs to move to the next/previous
tab.
</p>
<textarea name="code" class="JScript" cols="60" rows="1">
var creatingPaging = function (panel) {
var listitem,
sHTML,
paging;
if (!panel.query(".paging")) {
listitem = selectedTabAnchor.get("parentNode");
sHTML = "";
if (listitem.previous()) {
sHTML += '<button type="button" class="yui-tabview-prevbtn">Previous Tab Panel</button>';
}
if (listitem.next()) {
sHTML += '<button type="button" class="yui-tabview-nextbtn">Next Tab Panel</button>';
}
paging = Y.Node.create('<div class="paging">' + sHTML + '</div>');
panel.appendChild(paging);
}
};
creatingPaging(Y.Node.get(".yui-tabpanel-selected"));
Y.on("delegate", function (event) {
var node = selectedTabAnchor.get("parentNode").previous().query("a");
tabView.focusManager.focus(node);
node.simulate("click");
}, tabView, "click", ".yui-tabview-prevbtn");
Y.on("delegate", function (event) {
var node = selectedTabAnchor.get("parentNode").next().query("a");
tabView.focusManager.focus(node);
node.simulate("click");
}, tabView, "click", ".yui-tabview-nextbtn");
</textarea>
</div>
<div class="yui-u sidebar">
<div id="examples" class="mod box4">
<div class="hd">
<h4>
Focus Manager Node Plugin Examples:</h4>
</div>
<div class="bd">
<ul>
<li><a href='../node-focusmanager/node-focusmanager-1.html'>Accessible Toolbar</a></li><li class='selected'><a href='../node-focusmanager/node-focusmanager-2.html'>Accessible TabView</a></li><li><a href='../node-focusmanager/node-focusmanager-3.html'>Accessible Menu Button</a></li> </ul>
</div>
</div>
<div class="mod box4">
<div class="hd">
<h4>More Focus Manager Node Plugin Resources:</h4>
</div>
<div class="bd">
<ul>
<!-- <li><a href="http://developer.yahoo.com/yui/node-focusmanager/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_node-focusmanager.html">API Documentation</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
<ul>
<li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema</a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource</a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType</a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay</a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin</a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin</a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console</a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul>
</div>
</div>
</div><!--closes bd-->
<div id="ft">
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p>
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
<a href="http://careers.yahoo.com/">Job Openings</a></p>
</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>