5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove<div id="toolbar-1" class="yui3-toolbar">
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove <span id="add-btn" class="yui3-toolbar-button first-child"><span><span><input type="button" name="btn-add" value="Add"></span></span></span>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove <span id="edit-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-edit" value="Edit"></span></span></span>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove <span id="print-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-print" value="Print"></span></span></span>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove <span id="delete-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-delete" value="Delete"></span></span></span>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove <span id="open-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-open" value="Open"></span></span></span>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove <span id="save-btn" class="yui3-toolbar-button"><span><span><input type="button" name="btn-save" value="Save"></span></span></span>
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove YUI().use("node-focusmanager", function (Y) {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove // Retrieve the Node instance representing the toolbar
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove // (<div id="toolbar">) and call the "plug" method
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove // passing in a reference to the Focus Manager Node Plugin.
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove var toolbar = Y.one("#toolbar-1");
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove descendants: "input",
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove keys: { next: "down:39", // Right arrow
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove previous: "down:37" }, // Left arrow
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove focusClass: "focus",
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove circular: true
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove // Set the ARIA "role" attribute of the Node instance representing the
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove // toolbar to "toolbar" to improve the semantics of the markup for
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove // users of screen readers.
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove toolbar.set("role", "toolbar");
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove // Listen for the click event on each button via the use of the
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove // "delegate" method
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove toolbar.delegate("click", function (event) {
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove alert("You clicked " + this.one("input").get("value"));
5f9cae5c825d76bdc95b78301e460a46ec5fbdf4Ryan Grove }, ".yui3-toolbar-button");