--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.0.0b1/examples/node-focusmanager/node-focusmanager-2.html Mon Nov 23 15:14:29 2009 +0100
@@ -0,0 +1,825 @@
+
+<!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>