Allows any group of dom elements to be navigated with the keyboard arrows
Navigate is a small jquery plugin which enables keyboard navigation on the dom elements of your choice with the keys of your choice.
Just call the navigate() function on any selector in jquery to enable navigation using the arrow keys by default
Example
$('.menu-item').navigate();
The plugin accepts several options,
Example 1
$('.menu-item').navigate({
mouse: true,
activeClass: 'current'
});
Example 2
$('.menu-item').navigate({
keys: {
up: 87,
down: 65,
left: 83,
right: 68,
select: 13
}
});
Example 3
$('.menu-item').navigate({
onSelect: function(){
// access to 'this'
alert($(this).text() + ' selected!');
},
onFocus: function(){
// access to 'this'
alert($(this).text() + ' received focus');
}
});
In the event that you need to remove the keyboard navigation you can do so cleanly by passing 'destroy' as the first argument to the plugin
Example
$('.menu-item').navigate('destroy');
Releases are available for download from GitHub.
Development: jquery.navigate.js
Production: jquery.navigate.min.js