| Section |
|---|
| Column |
|---|
| The jQuery Keyboard Accessibility Plugin makes it easy for developers to add keyboard handlers to their code without a lot of extra overhead. Please note that, when used as a jQuery plugin, the Keyboard Accessibility API currently handles only two parameters. This is a bug in the current implementation that will be addressed in a future release. If more than two parameters are required, any parameters beyond the function name must be be enclosed in an array.
activatable| Code Block |
|---|
jQuery().fluid("activatable", customHandler);
jQuery().fluid("activatable", parameterArray); // parameterArray = [customHandler, options]
|
Makes all matched elements activatable with the Spacebar and Enter keys. A handler function may be provided to trigger custom behaviour. Arguments: Name | Description |
|---|
customHandler
| A function that will be called when the element is activated.
In v1.0: The function should accept the element to be activated as a parameter: myHandler(element);
In v1.1 and beyond: The function should accept the browser event as a parameter: myHandler(event); | options
| (Optional) A collection of name-value pairs that allow you to active elements using other keystrokes (see below). |
Example: | Code Block |
|---|
|
var handler = function (evt) {
$(evt.target).addClass("activated");
};
menu.items.fluid("activatable", handler);
|
options: Name | Description | Values | Default |
|---|
additionalBindings
| An array of keycode options to use for activation. | An array of objects of the form | Code Block |
|---|
|
{
modifier: <a modifier keycode>, // e.g. $.ui.keyCode.SHIFT
key: <a keycode>, // e.g. $.ui.keyCode.DOWN
activateHandler: <a function>
}
|
| none |
Example with options: | Code Block |
|---|
|
var handler = function (evt) {
$(evt.target).addClass("activated");
};
/ Bind the Space, Enter, and Down Arrow keys to the activate event.
// Notice the use of "additionalBindings," which is required only for the Down Arrow Key.
// By default, Space and Enter are set up for you.
var opts = {
additionalBindings: {
modifier: null,
key: $.ui.keyCode.DOWN,
activateHandler: alternateActivate
}
};
menu.items.fluid("activatable", [handler, opts]);
|
|
| Column |
|---|
| Panel |
|---|
| borderColor | #566b30 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #D3E3C4 | borderStyle | solid |
|---|
| title | On This Page |
|---|
| borderStyle | solid |
|---|
| |
| Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #c1b7c3 | borderStyle | solid |
|---|
| title | See Also |
|---|
| borderStyle | solid |
|---|
| |
| Include Page |
|---|
| Still Need Help panel |
|---|
| Still Need Help panel |
|---|
|
|
|
...
activate
| Code Block |
|---|
jQuery().fluid("activate");
|
...
| Code Block |
|---|
|
menu.items[selectedIndex].fluid("activate");
|
...
selectable
| Code Block |
|---|
jQuery().fluid("selectable", options)
|
Invoked on a JQuery which is a "container" node: makes all matched elements descended from the container selectable with the arrow keys. Custom handlers can be provided to inject custom styling and logic.
NOTE: The container element must be keyboard focusable. If necessary, add tabindex="0" to the container.
Arguments:
Name | Description |
|---|
options
| (Optional) A collection of name-value pairs that let you modify the plugin's default selection behaviour (see below). |
...
| Code Block |
|---|
|
menu.container.fluid("selectable", {
selectableSelector: ".menuItem",
onSelect: function (evt) {
<function to show sub menu>
},
onUnselect: function (evt) {
<function to hide sub menu>
},
autoSelectFirstItem: false,
rememberSelectionState: false
});
|
currentSelection
| Code Block |
|---|
jQuery().fluid("selectable.currentSelection");
|
...
| Code Block |
|---|
|
var currentMenuItem = menu.container.fluid("selectable.currentSelection");
|
select, selectNext, selectPrevious
| Code Block |
|---|
jQuery().fluid("selectable.selectNext");
jQuery().fluid("selectable.selectPrevious");
jQuery().fluid("selectable.select", elementToSelect);
|
...
| Code Block |
|---|
|
menu.container.fluid("selectable.select", secondMenuElement);
menu.container.fluid("selectable.selectNext"); // will select third item
menu.container.fluid("selectable.selectPrevious"); // will select second item again
|
...
tabbable
| Code Block |
|---|
jQuery().fluid("tabbable")
|
...
| Code Block |
|---|
|
menu.container.fluid("tabbable");
|
...
Deprecated. This code is now available in jQuery core. Use jQuery.attr("tabindex") instead.
| Code Block |
|---|
jQuery().fluid("tabindex")
|
Gets the tabindex value of the first matched element. If the element doesn't have a tabindex attribute, undefined is returned. The value returned is normalized to a Number, since browser implementations vary.
| Code Block |
|---|
jQuery().fluid("tabindex", value)
|
...
The Keyboard Accessibility Plugin dependencies can be met by including the minified InfusionAll.js file in the header of the HTML file:
| Code Block |
|---|
|
<script type="text/javascript" src="InfusionAll.js"></script>
|
...
In v1.2 and earlier:
| Code Block |
|---|
|
<script type="text/javascript" src="lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="framework/core/js/jquery.keyboard-a11y.js"></script>
|
As of v1.3:
| Code Block |
|---|
|
<script type="text/javascript" src="lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="framework/core/js/FluidDocument.js"></script> <!-- New in v1.3 -->
<script type="text/javascript" src="framework/core/js/jquery.keyboard-a11y.js"></script>
|