Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Updated jQuery UI Tabs example to actually work correctly. When a tab…

… is clicked, the widget no longer changes state until the hashchange event tells it to.
  • Loading branch information...
commit ffc32ccbc6eca0db7d65a3ade7845680bf705956 1 parent a1cfc53
Ben Alman cowboy authored
Showing with 17 additions and 11 deletions.
  1. +17 −11 examples/fragment-jquery-ui-tabs/index.php
28 examples/fragment-jquery-ui-tabs/index.php
View
@@ -14,12 +14,20 @@
?>
$(function(){
- // Enable tabs on all tab widgets. If you define a callback for the 'select'
- // event, it will be executed for the selected tab whenever the hash changes.
- $('.tabs').tabs();
+ // The "tab widgets" to handle.
+ var tabs = $('.tabs'),
+
+ // This selector will be reused when selecting actual tab widget A elements.
+ tab_a_selector = 'ul.ui-tabs-nav a';
+
+ // Enable tabs on all tab widgets. The `event` property must be overridden so
+ // that the tabs aren't changed on click, and any custom event name can be
+ // specified. Note that if you define a callback for the 'select' event, it
+ // will be executed for the selected tab whenever the hash changes.
+ tabs.tabs({ event: 'change', select: function(){ debug.log(this); } });
// Define our own click handler for the tabs, overriding the default.
- $('.tabs ul.ui-tabs-nav a').click(function(){
+ tabs.find( tab_a_selector ).click(function(){
var state = {},
// Get the id of this tab widget.
@@ -31,9 +39,6 @@
// Set the state!
state[ id ] = idx;
$.bbq.pushState( state );
-
- // And finally, prevent the default link click behavior by returning false.
- return false;
});
// Bind an event to window.onhashchange that, when the history state changes,
@@ -41,7 +46,7 @@
$(window).bind( 'hashchange', function(e) {
// Iterate over all tab widgets.
- $('.tabs').each(function(){
+ tabs.each(function(){
// Get the index for this tab widget from the hash, based on the
// appropriate id property. In jQuery 1.4, you should use e.getState()
@@ -49,10 +54,11 @@
// string value to a number.
var idx = $.bbq.getState( this.id, true ) || 0;
- // Select the appropriate tab for this tab widget (you could keep track of
- // what tab each widget is on using .data, and only select a tab if it has
+ // Select the appropriate tab for this tab widget by triggering the custom
+ // event specified in the .tabs() init above (you could keep track of what
+ // tab each widget is on using .data, and only select a tab if it has
// changed).
- $(this).tabs( 'select', idx );
+ $(this).find( tab_a_selector ).eq( idx ).triggerHandler( 'change' );
});
})
Please sign in to comment.
Something went wrong with that request. Please try again.