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

Advertisements

1 Response to “How to add keyboard navigation for Jquery UI Tabs”


  1. 1 Ron February 3, 2010 at 10:00 pm

    Nice, Raja! I use a lot lf logic like when I write Greasemonkey scripts.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s





%d bloggers like this: