YJL

I had thought about a jQuery plugin for jk binding navigation for a while and I finally wrote it. This jQuery plugin actually is my first plugin.

Here is what you can try to see how it works on this blog: Press h and l to navigate between posts; j and k to navigate between sections.

I have the following code installed:

<script src="http://lilbtn.yjl.im/js/jquery/jquery.jknav.min.js"></script>
<script>
$('h3').jknav();
$.jknav.init({up: 'l', down: 'h', reevaluate: true});

$('h3,h4,h5,h6').jknav(null, 'all-headers');
$.jknav.init({name: 'all-headers', reevaluate: true});
</script>

It actually has two navigation settings, jk and hl.

Basically, you use jQuery to select what element should be navigated to by calling jknav(), then init() to set up some variable that plugin needs and the keyup event handler, done. Thats all. You can call jknav() as many times as your like, and the selectors dont have to be the same, you can mix tag names. This plugin will sort them by their position on page, top to bottom, left to right.

You can read the documentation and check out this demo page, which uses callback.