Recent Posts
- (09/10) Fixing Warning: the ECDSA host key for 'github.com' differs from the key for the IP addressTAGS:Web Server Admin
- (12/26) CakePHP 3 - Getting List of Column Definitions from a Table (like schema())TAGS:CakephpCake3
- (09/14) Change Order of Loaded Behaviors in CakePHP 3TAGS:Cake3CakephpWeb ProgrammingPhp
- (05/29) CakePHP 3 - Accept JSON Header Only Working When Debug FalseTAGS:Web ProgrammingCakephpCake3
- (05/23) Remove All Events from Google Calendar (Reset Calendar)TAGS:Web ProgrammingPhp
- (11/08) Google Tag Manager (GTM) Not Firing Default PageView EventTAGS:Web ProgrammingJavascriptGoogle Tag Manager
- (10/13) In PHP, how do you get __toString() Magic Method Result without calling echo?TAGS:CakephpCake3Cakephp 13PhpWeb Programming
- (11/14) Getting output from shell_exec() at all timesTAGS:Web ProgrammingWeb Server Admin
Subscribe to my feed
MainelyDesign.com Blog
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 80,060 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:
- $('#tabContainer', options.scope).tabs({
- activate: function(event, ui) { ... }
- });
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:
- // place this code inside the activate function above
- ui.newTab.attr('aria-controls', element.href);
- $(ui.newPanel).load(element.href);
Cheers,
-Kevin Wentworth
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!
