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]);
|
|