navim - test page

Navim is a jQuery plugin that allows web developers to easily ad vim-style keyboard navigation to their page elements.

Get the latest version of jquery-navim.js, and try it out today!

Right now it's in early development, and only allows for up/down motion. But if people are interested, I'll work on making it more fully-featured. To be honest, I imagine this will be sufficient for 90% of potential uses. Stay tuned on gfxmonk.net or check out the GitHub project for further development.

Currently supported keys:

j, k
down, up
return
perform an action on the currently selected element
(by default, this will click the first link in the element)

The important part of this page source is the javascript to set the navigation items:

Javascript:

function init_vim() {
  $(function() { $("pre,li").vimNavigation(); });
}

$(init_vim);

In this case, I'm using all pre and li elements - you can use any jQuery collection here though - most likely you'll want to use a CSS class selector.

And of course, you can (and should) style the currently selected item with CSS. To set a style specific to the currently selected navigation element, add a CSS rule for elements with class navim_active.

If you like, you can also override the "action" callback, like so:

$.vimNavigationAction( function(elem, shiftPressed) {
  alert("The current element's contents are: " + elem.html() +
    ", and shift is " + (shiftPressed ? "" : "NOT ") + "pressed");
});

Note: For advanced uses, you can specify your own "up" and "down" callbacks - see the delegate example for details.

Here's some more <li> elements for you to select (using "j" and "k"):