Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

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 1 changed file with 17 additions and 11 deletions. Show diff stats Hide diff stats

  1. +17 11 examples/fragment-jquery-ui-tabs/index.php
28 examples/fragment-jquery-ui-tabs/index.php
@@ -14,12 +14,20 @@
14 14 ?>
15 15 $(function(){
16 16
17   - // Enable tabs on all tab widgets. If you define a callback for the 'select'
18   - // event, it will be executed for the selected tab whenever the hash changes.
19   - $('.tabs').tabs();
  17 + // The "tab widgets" to handle.
  18 + var tabs = $('.tabs'),
  19 +
  20 + // This selector will be reused when selecting actual tab widget A elements.
  21 + tab_a_selector = 'ul.ui-tabs-nav a';
  22 +
  23 + // Enable tabs on all tab widgets. The `event` property must be overridden so
  24 + // that the tabs aren't changed on click, and any custom event name can be
  25 + // specified. Note that if you define a callback for the 'select' event, it
  26 + // will be executed for the selected tab whenever the hash changes.
  27 + tabs.tabs({ event: 'change', select: function(){ debug.log(this); } });
20 28
21 29 // Define our own click handler for the tabs, overriding the default.
22   - $('.tabs ul.ui-tabs-nav a').click(function(){
  30 + tabs.find( tab_a_selector ).click(function(){
23 31 var state = {},
24 32
25 33 // Get the id of this tab widget.
@@ -31,9 +39,6 @@
31 39 // Set the state!
32 40 state[ id ] = idx;
33 41 $.bbq.pushState( state );
34   -
35   - // And finally, prevent the default link click behavior by returning false.
36   - return false;
37 42 });
38 43
39 44 // Bind an event to window.onhashchange that, when the history state changes,
@@ -41,7 +46,7 @@
41 46 $(window).bind( 'hashchange', function(e) {
42 47
43 48 // Iterate over all tab widgets.
44   - $('.tabs').each(function(){
  49 + tabs.each(function(){
45 50
46 51 // Get the index for this tab widget from the hash, based on the
47 52 // appropriate id property. In jQuery 1.4, you should use e.getState()
@@ -49,10 +54,11 @@
49 54 // string value to a number.
50 55 var idx = $.bbq.getState( this.id, true ) || 0;
51 56
52   - // Select the appropriate tab for this tab widget (you could keep track of
53   - // what tab each widget is on using .data, and only select a tab if it has
  57 + // Select the appropriate tab for this tab widget by triggering the custom
  58 + // event specified in the .tabs() init above (you could keep track of what
  59 + // tab each widget is on using .data, and only select a tab if it has
54 60 // changed).
55   - $(this).tabs( 'select', idx );
  61 + $(this).find( tab_a_selector ).eq( idx ).triggerHandler( 'change' );
56 62 });
57 63 })
58 64

0 comments on commit ffc32cc

Please sign in to comment.
Something went wrong with that request. Please try again.