src/cm/media/js/lib/yui/yui3.0.0/examples/node-focusmanager/node-focusmanager-1.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 Toolbar</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">
.yui-toolbar {
border: solid 1px #999;
background-color: #ccc;
margin: .25em;
overflow: auto;
}
.yui-toolbar-button {
display: inline-block;
border-width: 1px 0;
border-style: solid;
border-color: #808080;
background-color: #dfdfdf;
margin: .25em;
font-size: 85%; /* 11px */
}
.first-child {
margin-left: .5em;
}
.yui-toolbar-button span {
display: inline-block;
border-width: 0 1px;
border-style: solid;
border-color: #808080;
margin: 0 -1px;
*position: relative; /* Necessary to get negative margins working in IE */
*left: -1px;
}
.yui-toolbar-button span span {
display: inline-block;
border: solid 1px #b6b6b6;
margin: 0;
*position: static;
}
.yui-toolbar-button input {
border: none;
margin: 0;
padding: 4px 4px 4px 24px;
*overflow: visible; /* Remove superfluous padding for IE */
background: transparent url(assets/icons.png) no-repeat;
}
#add-btn input {
background-position: 4px -102px;
*background-position: 4px -100px;
}
#edit-btn input {
background-position: 4px -78px;
*background-position: 4px -76px;
}
#print-btn input {
background-position: 4px -54px;
*background-position: 4px -52px;
}
#open-btn input {
background-position: 4px -30px;
*background-position: 4px -28px;
}
#delete-btn input {
background-position: 4px -126px;
*background-position: 4px -124px;
}
#save-btn input {
background-position: 4px -6px;
*background-position: 4px -4px;
}
/* Augment the browser's default styling of the focus state by changing the
background color of the button when it is focused. */
.yui-toolbar-button input.focus {
background-color: #B3D4FF;
}
</style>
</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 Toolbar</h1></div>
</div>
<div id="bd">
<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 Toolbar</h2>
<div id="example" class="promo">
<div class="example-intro">
<p>
This example illustrates how to create an accessible toolbar using the
Focus Manager Node Plugin and Node's support for the
<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>.
</p> </div>
<div class="module example-container ">
<div class="hd exampleHd">
<p class="newWindowButton yui-skin-sam">
<a href="node-focusmanager-1_clean.html" target="_blank">View example in new window.</a>
</p>
</div> <div id="example-canvas" class="bd">
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="toolbar-1" class="yui-toolbar">
<span id="add-btn" class="yui-toolbar-button first-child"><span><span><input type="button" name="btn-add" value="Add"></span></span></span>
<span id="edit-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-edit" value="Edit"></span></span></span>
<span id="print-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-print" value="Print"></span></span></span>
<span id="delete-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-delete" value="Delete"></span></span></span>
<span id="open-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-open" value="Open"></span></span></span>
<span id="save-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-save" value="Save"></span></span></span>
</div>
<script type="text/javascript">
YUI({base:"../../build/", timeout: 10000}).use("node-focusmanager", function(Y) {
// Retrieve the Node instance representing the toolbar
// (<div id="toolbar">) and call the "plug" method
// passing in a reference to the Focus Manager Node Plugin.
var toolbar = Y.Node.get("#toolbar-1");
toolbar.plug(Y.Plugin.NodeFocusManager, {
descendants: "input",
keys: { next: "down:39", // Right arrow
previous: "down:37" }, // Left arrow
focusClass: "focus",
circular: true
});
// Set the ARIA "role" attribute of the Node instance representing the
// toolbar to "toolbar" to improve the semantics of the markup for
// users of screen readers.
toolbar.set("role", "toolbar");
// Listen for the click event on each button via the use of the
// "delegate" method
toolbar.delegate("click", function (event) {
alert("You clicked " + this.query("input").get("value"));
}, ".yui-toolbar-button");
});
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</div>
</div>
</div>
<h3>Setting Up the HTML</h3>
<p>
Start with a set of <code><input></code> elements. For the
purpose of this example, the <code>type</code> attribute of each
button will be set to a value of "button" since they won't be responsible for
submitting a form. Each <code><input></code> is wrapped by two
<code><span></code>s that serve as decorator elements used to style
each button with rounded corners.
</p>
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"toolbar-1"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-toolbar"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">span</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"add-btn"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-toolbar-button first-child"</span>><<span class="kw2">span</span>><<span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"btn-add"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Add"</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">span</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"edit-btn"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-toolbar-button"</span>><<span class="kw2">span</span>><<span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"btn-edit"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Edit"</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">span</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"print-btn"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-toolbar-button"</span>><<span class="kw2">span</span>><<span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"btn-print"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Print"</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">span</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"delete-btn"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-toolbar-button"</span>><<span class="kw2">span</span>><<span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"btn-delete"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Delete"</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">span</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"open-btn"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-toolbar-button"</span>><<span class="kw2">span</span>><<span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"btn-open"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Open"</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">span</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"save-btn"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-toolbar-button"</span>><<span class="kw2">span</span>><<span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"btn-save"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Save"</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"toolbar-1"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-toolbar"</span>></span>
<span class="sc2"><<span class="kw2">span</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"add-btn"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-toolbar-button first-child"</span>><<span class="kw2">span</span>><<span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"btn-add"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Add"</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>></span>
<span class="sc2"><<span class="kw2">span</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"edit-btn"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-toolbar-button"</span>><<span class="kw2">span</span>><<span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"btn-edit"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Edit"</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>></span>
<span class="sc2"><<span class="kw2">span</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"print-btn"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-toolbar-button"</span>><<span class="kw2">span</span>><<span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"btn-print"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Print"</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>></span>
<span class="sc2"><<span class="kw2">span</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"delete-btn"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-toolbar-button"</span>><<span class="kw2">span</span>><<span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"btn-delete"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Delete"</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>></span>
<span class="sc2"><<span class="kw2">span</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"open-btn"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-toolbar-button"</span>><<span class="kw2">span</span>><<span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"btn-open"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Open"</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>></span>
<span class="sc2"><<span class="kw2">span</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"save-btn"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"yui-toolbar-button"</span>><<span class="kw2">span</span>><<span class="kw2">span</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"btn-save"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Save"</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">span</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></pre></div><textarea id="syntax1-plain"><div id="toolbar-1" class="yui-toolbar">
<span id="add-btn" class="yui-toolbar-button first-child"><span><span><input type="button" name="btn-add" value="Add"></span></span></span>
<span id="edit-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-edit" value="Edit"></span></span></span>
<span id="print-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-print" value="Print"></span></span></span>
<span id="delete-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-delete" value="Delete"></span></span></span>
<span id="open-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-open" value="Open"></span></span></span>
<span id="save-btn" class="yui-toolbar-button"><span><span><input type="button" name="btn-save" value="Save"></span></span></span>
</div></textarea></div>
<h3>Setting Up the CSS</h3>
<p>
Next, each button in the toolbar is styled with rounded corners using a
combination of the CSS <code>border</code> property along with the use of
negative margins. An icon is added to each button using a background image.
Following the advice of the
<a href="http://developer.yahoo.com/performance/rules.html">Exceptional Performance team</a>,
this example uses the technique of
<a href="http://www.alistapart.com/articles/sprites">CSS Sprites</a>,
combining all of the icons for each button into a single image to reduce
HTTP requests.
</p>
<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="re1">.yui-toolbar</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">solid</span> <span class="re3">1px</span> <span class="re0">#999</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#ccc</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">.25em</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">auto</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-toolbar-button</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">display</span><span class="sy0">:</span> inline-<span class="kw2">block</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">border-width</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">border-style</span><span class="sy0">:</span> <span class="kw2">solid</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">border-color</span><span class="sy0">:</span> <span class="re0">#808080</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#dfdfdf</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">.25em</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3"><span class="nu0">85</span>%</span><span class="sy0">;</span> <span class="coMULTI">/* 11px */</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.first-child</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">.5em</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-toolbar-button</span> span <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">display</span><span class="sy0">:</span> inline-<span class="kw2">block</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">border-width</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">1px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">border-style</span><span class="sy0">:</span> <span class="kw2">solid</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">border-color</span><span class="sy0">:</span> <span class="re0">#808080</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-1px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="sy0">*</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span> <span class="coMULTI">/* Necessary to get negative margins working in IE */</span></div></li><li class="li1"><div class="de1"> <span class="sy0">*</span><span class="kw1">left</span><span class="sy0">:</span> <span class="re3">-1px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-toolbar-button</span> span span <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">display</span><span class="sy0">:</span> inline-<span class="kw2">block</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">solid</span> <span class="re3">1px</span> <span class="re0">#b6b6b6</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="sy0">*</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">static</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-toolbar-button</span> input <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">4px</span> <span class="re3">4px</span> <span class="re3">24px</span><span class="sy0">;</span> </div></li><li class="li1"><div class="de1"> <span class="sy0">*</span><span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">visible</span><span class="sy0">;</span> <span class="coMULTI">/* Remove superfluous padding for IE */</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">transparent</span> <span class="kw2">url</span><span class="br0">(</span><span class="co2">assets/icons.png</span><span class="br0">)</span> <span class="kw2">no-repeat</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re0">#add-btn</span> input <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-102px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="sy0">*</span><span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-100px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re0">#edit-btn</span> input <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-78px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="sy0">*</span><span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-76px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re0">#print-btn</span> input <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-54px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="sy0">*</span><span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-52px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re0">#open-btn</span> input <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-30px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="sy0">*</span><span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-28px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re0">#delete-btn</span> input <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-126px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="sy0">*</span><span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-124px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re0">#save-btn</span> input <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-6px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="sy0">*</span><span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-4px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="re1">.yui-toolbar</span> <span class="br0">{</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">solid</span> <span class="re3">1px</span> <span class="re0">#999</span><span class="sy0">;</span>
<span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#ccc</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">.25em</span><span class="sy0">;</span>
<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">auto</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.yui-toolbar-button</span> <span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> inline-<span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">border-width</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">border-style</span><span class="sy0">:</span> <span class="kw2">solid</span><span class="sy0">;</span>
<span class="kw1">border-color</span><span class="sy0">:</span> <span class="re0">#808080</span><span class="sy0">;</span>
<span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#dfdfdf</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="re3">.25em</span><span class="sy0">;</span>
<span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3"><span class="nu0">85</span>%</span><span class="sy0">;</span> <span class="coMULTI">/* 11px */</span>
<span class="br0">}</span>
<span class="re1">.first-child</span> <span class="br0">{</span>
<span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">.5em</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.yui-toolbar-button</span> span <span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> inline-<span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">border-width</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">1px</span><span class="sy0">;</span>
<span class="kw1">border-style</span><span class="sy0">:</span> <span class="kw2">solid</span><span class="sy0">;</span>
<span class="kw1">border-color</span><span class="sy0">:</span> <span class="re0">#808080</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span> <span class="re3">-1px</span><span class="sy0">;</span>
<span class="sy0">*</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">relative</span><span class="sy0">;</span> <span class="coMULTI">/* Necessary to get negative margins working in IE */</span>
<span class="sy0">*</span><span class="kw1">left</span><span class="sy0">:</span> <span class="re3">-1px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.yui-toolbar-button</span> span span <span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> inline-<span class="kw2">block</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">solid</span> <span class="re3">1px</span> <span class="re0">#b6b6b6</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="sy0">*</span><span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">static</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.yui-toolbar-button</span> input <span class="br0">{</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">4px</span> <span class="re3">4px</span> <span class="re3">24px</span><span class="sy0">;</span>
<span class="sy0">*</span><span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">visible</span><span class="sy0">;</span> <span class="coMULTI">/* Remove superfluous padding for IE */</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">transparent</span> <span class="kw2">url</span><span class="br0">(</span><span class="co2">assets/icons.png</span><span class="br0">)</span> <span class="kw2">no-repeat</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re0">#add-btn</span> input <span class="br0">{</span>
<span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-102px</span><span class="sy0">;</span>
<span class="sy0">*</span><span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-100px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re0">#edit-btn</span> input <span class="br0">{</span>
<span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-78px</span><span class="sy0">;</span>
<span class="sy0">*</span><span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-76px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re0">#print-btn</span> input <span class="br0">{</span>
<span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-54px</span><span class="sy0">;</span>
<span class="sy0">*</span><span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-52px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re0">#open-btn</span> input <span class="br0">{</span>
<span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-30px</span><span class="sy0">;</span>
<span class="sy0">*</span><span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-28px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re0">#delete-btn</span> input <span class="br0">{</span>
<span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-126px</span><span class="sy0">;</span>
<span class="sy0">*</span><span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-124px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re0">#save-btn</span> input <span class="br0">{</span>
<span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-6px</span><span class="sy0">;</span>
<span class="sy0">*</span><span class="kw1">background-position</span><span class="sy0">:</span> <span class="re3">4px</span> <span class="re3">-4px</span><span class="sy0">;</span>
<span class="br0">}</span></pre></div><textarea id="syntax2-plain">.yui-toolbar {
border: solid 1px #999;
background-color: #ccc;
margin: .25em;
overflow: auto;
}
.yui-toolbar-button {
display: inline-block;
border-width: 1px 0;
border-style: solid;
border-color: #808080;
background-color: #dfdfdf;
margin: .25em;
font-size: 85%; /* 11px */
}
.first-child {
margin-left: .5em;
}
.yui-toolbar-button span {
display: inline-block;
border-width: 0 1px;
border-style: solid;
border-color: #808080;
margin: 0 -1px;
*position: relative; /* Necessary to get negative margins working in IE */
*left: -1px;
}
.yui-toolbar-button span span {
display: inline-block;
border: solid 1px #b6b6b6;
margin: 0;
*position: static;
}
.yui-toolbar-button input {
border: none;
margin: 0;
padding: 4px 4px 4px 24px;
*overflow: visible; /* Remove superfluous padding for IE */
background: transparent url(assets/icons.png) no-repeat;
}
#add-btn input {
background-position: 4px -102px;
*background-position: 4px -100px;
}
#edit-btn input {
background-position: 4px -78px;
*background-position: 4px -76px;
}
#print-btn input {
background-position: 4px -54px;
*background-position: 4px -52px;
}
#open-btn input {
background-position: 4px -30px;
*background-position: 4px -28px;
}
#delete-btn input {
background-position: 4px -126px;
*background-position: 4px -124px;
}
#save-btn input {
background-position: 4px -6px;
*background-position: 4px -4px;
}</textarea></div>
<h3>Initializing the Focus Manager</h3>
<p>
With the toolbar markup and CSS in place, retrieve the Node instance
representing the toolbar (<code><div id="toolbar-1"></code>)
and call the <a href="../../api/Node.html#method_plug"><code>plug</code></a>
passing in a reference to the Focus Manager Node Plugin as the first argument,
and a collection of configuration attributes as the second argument.
</p>
<p>
The Focus Manager's
<a href="../../api/plugin.NodeFocusManager.html#config_descendants"><code>descendants</code></a>
attribute is set to a value of "input", so that only one button in the toolbar
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 toolbar. Once
the toolbar has focus, the user can move focus among each button 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>focus</code> to each
<code><input></code> when it is focused, making it easy to style the
focused state in each of the
<a href="http://developer.yahoo.com/yui/articles/gbs/#gbschart">A-Grade browsers</a>.
</p>
<div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">{</span> base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span> <span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"node-focusmanager"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Retrieve the Node instance representing the toolbar</span></div></li><li class="li1"><div class="de1"> <span class="co1">// (<div id="toolbar">) and call the "plug" method</span></div></li><li class="li2"><div class="de2"> <span class="co1">// passing in a reference to the Focus Manager Node Plugin.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> toolbar <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"#toolbar-1"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> toolbar.<span class="me1">plug</span><span class="br0">(</span>Y.<span class="me1">Plugin</span>.<span class="me1">NodeFocusManager</span><span class="sy0">,</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> descendants<span class="sy0">:</span> <span class="st0">"input"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> keys<span class="sy0">:</span> <span class="br0">{</span> next<span class="sy0">:</span> <span class="st0">"down:39"</span><span class="sy0">,</span> <span class="co1">// Right arrow</span></div></li><li class="li1"><div class="de1"> previous<span class="sy0">:</span> <span class="st0">"down:37"</span> <span class="br0">}</span><span class="sy0">,</span> <span class="co1">// Left arrow</span></div></li><li class="li1"><div class="de1"> focusClass<span class="sy0">:</span> <span class="st0">"focus"</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> circular<span class="sy0">:</span> <span class="kw2">true</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// Set the ARIA "role" attribute of the Node instance representing the</span></div></li><li class="li1"><div class="de1"> <span class="co1">// toolbar to "toolbar" to improve the semantics of the markup for</span></div></li><li class="li1"><div class="de1"> <span class="co1">// users of screen readers.</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> toolbar.<span class="me1">set</span><span class="br0">(</span><span class="st0">"role"</span><span class="sy0">,</span> <span class="st0">"toolbar"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Listen for the click event on each button via the use of the</span></div></li><li class="li1"><div class="de1"> <span class="co1">// "delegate" method</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> toolbar.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw3">alert</span><span class="br0">(</span><span class="st0">"You clicked "</span> <span class="sy0">+</span> <span class="kw1">this</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">"input"</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span> <span class="st0">".yui-toolbar-button"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">{</span> base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span> <span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"node-focusmanager"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span>
<span class="co1">// Retrieve the Node instance representing the toolbar</span>
<span class="co1">// (<div id="toolbar">) and call the "plug" method</span>
<span class="co1">// passing in a reference to the Focus Manager Node Plugin.</span>
<span class="kw2">var</span> toolbar <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"#toolbar-1"</span><span class="br0">)</span><span class="sy0">;</span>
toolbar.<span class="me1">plug</span><span class="br0">(</span>Y.<span class="me1">Plugin</span>.<span class="me1">NodeFocusManager</span><span class="sy0">,</span> <span class="br0">{</span>
descendants<span class="sy0">:</span> <span class="st0">"input"</span><span class="sy0">,</span>
keys<span class="sy0">:</span> <span class="br0">{</span> next<span class="sy0">:</span> <span class="st0">"down:39"</span><span class="sy0">,</span> <span class="co1">// Right arrow</span>
previous<span class="sy0">:</span> <span class="st0">"down:37"</span> <span class="br0">}</span><span class="sy0">,</span> <span class="co1">// Left arrow</span>
focusClass<span class="sy0">:</span> <span class="st0">"focus"</span><span class="sy0">,</span>
circular<span class="sy0">:</span> <span class="kw2">true</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">// Set the ARIA "role" attribute of the Node instance representing the</span>
<span class="co1">// toolbar to "toolbar" to improve the semantics of the markup for</span>
<span class="co1">// users of screen readers.</span>
toolbar.<span class="me1">set</span><span class="br0">(</span><span class="st0">"role"</span><span class="sy0">,</span> <span class="st0">"toolbar"</span><span class="br0">)</span><span class="sy0">;</span>
<span class="co1">// Listen for the click event on each button via the use of the</span>
<span class="co1">// "delegate" method</span>
toolbar.<span class="me1">delegate</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> <span class="kw2">function</span> <span class="br0">(</span>event<span class="br0">)</span> <span class="br0">{</span>
<span class="kw3">alert</span><span class="br0">(</span><span class="st0">"You clicked "</span> <span class="sy0">+</span> <span class="kw1">this</span>.<span class="me1">query</span><span class="br0">(</span><span class="st0">"input"</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="sy0">,</span> <span class="st0">".yui-toolbar-button"</span><span class="br0">)</span><span class="sy0">;</span>
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">YUI({ base:"../../build/", timeout: 10000 }).use("node-focusmanager", function(Y) {
// Retrieve the Node instance representing the toolbar
// (<div id="toolbar">) and call the "plug" method
// passing in a reference to the Focus Manager Node Plugin.
var toolbar = Y.Node.get("#toolbar-1");
toolbar.plug(Y.Plugin.NodeFocusManager, {
descendants: "input",
keys: { next: "down:39", // Right arrow
previous: "down:37" }, // Left arrow
focusClass: "focus",
circular: true
});
// Set the ARIA "role" attribute of the Node instance representing the
// toolbar to "toolbar" to improve the semantics of the markup for
// users of screen readers.
toolbar.set("role", "toolbar");
// Listen for the click event on each button via the use of the
// "delegate" method
toolbar.delegate("click", function (event) {
alert("You clicked " + this.query("input").get("value"));
}, ".yui-toolbar-button");
});</textarea></div>
<h3>Styling Focus</h3>
<p>
To augment the browser's default styling of the focused state define a CSS
selector that adds a background color to the
</p>
<div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Augment the browser's default styling of the focus state by changing the</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> background color of the button when it is focused. */</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="re1">.yui-toolbar-button</span> input<span class="re1">.focus</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#B3D4FF</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="coMULTI">/* Augment the browser's default styling of the focus state by changing the
background color of the button when it is focused. */</span>
<span class="re1">.yui-toolbar-button</span> input<span class="re1">.focus</span> <span class="br0">{</span>
<span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#B3D4FF</span><span class="sy0">;</span>
<span class="br0">}</span></pre></div><textarea id="syntax4-plain">/* Augment the browser's default styling of the focus state by changing the
background color of the button when it is focused. */
.yui-toolbar-button input.focus {
background-color: #B3D4FF;
}</textarea></div> </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 class='selected'><a href='../node-focusmanager/node-focusmanager-1.html'>Accessible Toolbar</a></li><li><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 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</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="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</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 <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</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 <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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="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="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 <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="selected "><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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 <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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">Other Useful YUI 3 Resources</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="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></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 language="javascript">
var yuiConfig = {base:"../../build/", timeout: 10000};
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>