jQuery UI 1.10 Tabs - Using Aria-Controls to Set the URL of a Tab

Posted on 03/18/2013 at 01:00 pm by Kevin Wentworth
Viewed 79,696 times | 0 comments

I continue to find things that I overlooked on my upgrade to using jQuery UI 1.10.  This time it was the tabs API changes that got me. 

No more show(); Now use activate();

The first change that really did me in ("why aren't any of my tabs executing my show callback function???") was the elimination of the show() callback.  This callback used to be fired-off each time a panel was displayed.  The change is easy, just rename your callback to activate:

  1. $('#tabContainer', options.scope).tabs({
  2.     activate: function(event, ui) { ... }
  3. });

No more url(); Now use aria-controls

This one was a little bit harder to figure out, namely because there isn't any explicit examples of setting the aria-controls property on the new jQuery UI 1.10 tabs upgrade/change log.  I'm new to aria properties and just wanted to see a snippet in action.  I couldn't find one out there.  On a leap a faith, I decided to try the following, and it worked!

Setting the aria-controls property in jQuery UI 1.10 tabs

Set the aria-controls property first, then load the content into the tab... jQuery UI tabs will figure it out:

  1. // place this code inside the activate function above
  2. ui.newTab.attr('aria-controls', element.href);
  3. $(ui.newPanel).load(element.href);

-Kevin Wentworth

Bookmark and Share

Tags for jQuery UI 1.10 Tabs - Using Aria-Controls to Set the URL of a Tab

Jquery | Jquery Ui | Upgrade | Tutorial | Example

Comments for this Posting

No comments. Be the first to post a reply.

Sorry, comments are closed for this posting.

Please Email Kevin if you have any questions. Thanks!

Meet Site Avenger - Hosted Content Management System

Powered By: Site Avenger | Site Production: Saco Design