src/cm/media/js/lib/yui/yui3.0.0/examples/node-focusmanager/node-focusmanager-1_clean.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Accessible Toolbar</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<!--begin custom header content for this example-->
<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>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Accessible Toolbar</h1>
<div class="exampleIntro">
<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>
<!--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 =============================== -->
</body>
</html>