How to add keyboard navigation for Jquery UI Tabs

We make use of Jquery UI a lot and their widgets are just awesome. One feature which was missing in Jquery (correct me if I am wrong) UI tabs was the option to use arrow keys or any key for tab navigation. So wrote this small script to make it happen. This concept can be modified in any manner so that we can give “Google Reader” like keyboard shortcut features in our web page.

$('body').keyup(function(e) {

 var direction = null;

 // handle cursor keys
 if (e.keyCode == 37) {
 // slide left
 direction = 'prev';
 } else if (e.keyCode == 39) {
 // slide right
 direction = 'next';
 }
 if (direction != null) {
 var totaltabs = $('#tabs').tabs('length'); //gettting the total # of tabs
 var selected = $('#tabs').tabs('option', 'selected');//getting the currently selected tab
if (direction == 'next') {
 if (selected <= totaltabs - 1)
 $('#tabs').tabs('select',selected + 1)
 }
 else
 {
 if (selected != 0)
 $('#tabs').tabs('select',selected - 1)
 }
 }
});

Hope this helps.

Happy Programming!!!

Cheers,

Raja