This documentation is currently being moved to our new documentation site.
Please view or edit the documentation there, instead.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.
Keyboard Accessibility Plugin API
activate
jQuery().fluid("activate");
Activates all matched elements using the default activation handler. Note that if the user has made the elements "activatable" using activatable(), that is the handler that will be used.
Example:
menu.items[selectedIndex].fluid("activate");
selectable
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 |
|---|---|
| (Optional) A collection of name-value pairs that let you modify the plugin's default selection behaviour (see below). |
options:
Name | Description | Values | Default |
|---|---|---|---|
| The set of nodes (a JQuery) which are to form the selectable set (these should all be nested within the DOM element representing the "container") | jQuery |
|
| A selector which will be used to locate the | string |
|
| A function to be invoked when an element is selected | function |
|
| A function to invoked when an element is unselected | function |
|
| A function to be invoked when focus leaves the container | function |
|
| Indicates the orientation of the selectable elements. This value will be used to determine the appropriate mapping for next and previous. |
|
|
| Indicates whether or not focus should be moved to the first child of the container (or to the last selected child, depending on | boolean |
|
| Indicates whether or not to keep track of which child element was most recently selected. | boolean |
|
New in v1.3: | Useful in cases where the selectable items may have keystrokes swallowing default handlers. If this option is true, the arrow key handler will be bound to the selectables themselves instead of their container. | boolean |
|
Example:
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
jQuery().fluid("selectable.currentSelection");
Gets the currently selected element (invoked on the container element)
Example:
var currentMenuItem = menu.container.fluid("selectable.currentSelection");
select, selectNext, selectPrevious
jQuery().fluid("selectable.selectNext");
jQuery().fluid("selectable.selectPrevious");
jQuery().fluid("selectable.select", elementToSelect);
Selects the next, previous, or specified element in the list of selectables (invoked on the jQuery for the container element)
Arguments:
Name | Description |
|---|---|
| The element to select |
Examples:
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
jQuery().fluid("tabbable")
Adds all matched elements to the tab order by giving them a tabindex attribute of "0." Note that if a matched element already has a tabindex value that places it in the tab order, the value is unchanged.
Example: