diff options
| -rw-r--r-- | tests/unit/tabs/tabs_events.js | 86 | ||||
| -rwxr-xr-x | ui/jquery.ui.tabs.js | 68 |
2 files changed, 105 insertions, 49 deletions
diff --git a/tests/unit/tabs/tabs_events.js b/tests/unit/tabs/tabs_events.js index d5e2b04c3..c578e5db7 100644 --- a/tests/unit/tabs/tabs_events.js +++ b/tests/unit/tabs/tabs_events.js @@ -73,6 +73,72 @@ test( "beforeActivate", function() { tabs_state( element, 0, 0, 0 ); }); +test( "activate", function() { + expect( 30 ); + + var element = $( "#tabs1" ).tabs({ + // TODO: should be false + active: -1, + collapsible: true + }), + tabs = element.find( ".ui-tabs-nav a" ), + panels = element.find( ".ui-tabs-panel" ); + + // from collapsed + element.one( "tabsactivate", function( event, ui ) { + ok( !( "originalEvent" in event ) ); + equals( ui.oldTab.size(), 0 ); + equals( ui.oldPanel.size(), 0 ); + equals( ui.newTab.size(), 1 ); + strictEqual( ui.newTab[ 0 ], tabs[ 0 ] ); + equals( ui.newPanel.size(), 1 ); + strictEqual( ui.newPanel[ 0 ], panels[ 0 ] ); + tabs_state( element, 1, 0, 0 ); + }); + element.tabs( "option", "active", 0 ); + tabs_state( element, 1, 0, 0 ); + + // switching tabs + element.one( "tabsactivate", function( event, ui ) { + equals( event.originalEvent.type, "click" ); + equals( ui.oldTab.size(), 1 ); + strictEqual( ui.oldTab[ 0 ], tabs[ 0 ] ); + equals( ui.oldPanel.size(), 1 ); + strictEqual( ui.oldPanel[ 0 ], panels[ 0 ] ); + equals( ui.newTab.size(), 1 ); + strictEqual( ui.newTab[ 0 ], tabs[ 1 ] ); + equals( ui.newPanel.size(), 1 ); + strictEqual( ui.newPanel[ 0 ], panels[ 1 ] ); + tabs_state( element, 0, 1, 0 ); + }); + tabs.eq( 1 ).click(); + tabs_state( element, 0, 1, 0 ); + + // collapsing + element.one( "tabsactivate", function( event, ui ) { + ok( !( "originalEvent" in event ) ); + equals( ui.oldTab.size(), 1 ); + strictEqual( ui.oldTab[ 0 ], tabs[ 1 ] ); + equals( ui.oldPanel.size(), 1 ); + strictEqual( ui.oldPanel[ 0 ], panels[ 1 ] ); + equals( ui.newTab.size(), 0 ); + equals( ui.newPanel.size(), 0 ); + tabs_state( element, 0, 0, 0 ); + }); + element.tabs( "option", "active", false ); + tabs_state( element, 0, 0, 0 ); + + // prevent activation + element.one( "tabsbeforeactivate", function( event ) { + ok( true ); + event.preventDefault(); + }); + element.one( "tabsactivate", function() { + ok( false ); + }); + element.tabs( "option", "active", 1 ); +}); + test('beforeload', function() { expect( 5 ); @@ -96,24 +162,4 @@ test('load', function() { ok(false, "missing test - untested code is broken code."); }); -test('activate', function() { - expect(5); - - var uiObj, eventObj; - el = $('#tabs1').tabs({ - activate: function(event, ui) { - uiObj = ui; - eventObj = event; - } - }); - ok(uiObj !== undefined, 'trigger callback after initialization'); - equals(uiObj.tab, $('a', el)[0], 'contain tab as DOM anchor element'); - equals(uiObj.panel, $('div', el)[0], 'contain panel as DOM div element'); - equals(uiObj.index, 0, 'contain index'); - - el.find( "li:eq(1) a" ).simulate( "click" ); - equals( eventObj.originalEvent.type, "click", "show triggered by click" ); - -}); - })(jQuery); diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js index 99c561607..7544d0302 100755 --- a/ui/jquery.ui.tabs.js +++ b/ui/jquery.ui.tabs.js @@ -98,6 +98,7 @@ $.widget( "ui.tabs", { this.lis.eq( o.active ).addClass( "ui-tabs-active ui-state-active" ); + // TODO: we need to remove this or add it to accordion // seems to be expected behavior that the activate callback is fired self.element.queue( "tabs", function() { self._trigger( "activate", null, self._ui( self.active[ 0 ], panel[ 0 ] ) ); @@ -278,40 +279,49 @@ $.widget( "ui.tabs", { } }, - _showTab: function( clicked, show, event ) { - var self = this; + _showTab: function( event, eventData ) { + var that = this; - $( clicked ).closest( "li" ).addClass( "ui-tabs-active ui-state-active" ); + $( eventData.newTab ).closest( "li" ).addClass( "ui-tabs-active ui-state-active" ); - if ( this.showFx ) { - self.running = true; - show.hide() - .animate( showFx, showFx.duration || "normal", function() { - self._resetStyle( show, showFx ); - self.running = false; - self._trigger( "activate", event, self._ui( clicked, show[ 0 ] ) ); + if ( that.showFx ) { + that.running = true; + eventData.newPanel + // TODO: why are we hiding? old code? + .hide() + .animate( that.showFx, that.showFx.duration || "normal", function() { + that._resetStyle( $( this ), that.showFx ); + that.running = false; + that._trigger( "activate", event, eventData ); }); } else { - show.show(); - self._trigger( "activate", event, self._ui( clicked, show[ 0 ] ) ); + eventData.newPanel.show(); + that._trigger( "activate", event, eventData ); } }, - _hideTab: function( clicked, $hide ) { - var self = this; - - if ( this.hideFx ) { - self.running = true; - $hide.animate( hideFx, hideFx.duration || "normal", function() { - self.running = false; - self.lis.removeClass( "ui-tabs-active ui-state-active" ); - self._resetStyle( $hide, hideFx ); - self.element.dequeue( "tabs" ); + // TODO: combine with _showTab() + _hideTab: function( event, eventData ) { + var that = this; + + if ( that.hideFx ) { + that.running = true; + eventData.oldPanel.animate( that.hideFx, that.hideFx.duration || "normal", function() { + that.running = false; + eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" ); + that._resetStyle( $( this ), that.hideFx ); + that.element.dequeue( "tabs" ); + if ( !eventData.newPanel.length ) { + that._trigger( "activate", event, eventData ); + } }); } else { - self.lis.removeClass( "ui-tabs-active ui-state-active" ); - $hide.hide(); - self.element.dequeue( "tabs" ); + eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" ); + eventData.oldPanel.hide(); + that.element.dequeue( "tabs" ); + if ( !eventData.newPanel.length ) { + that._trigger( "activate", event, eventData ); + } } }, @@ -375,14 +385,14 @@ $.widget( "ui.tabs", { options.active = false; that.element.queue( "tabs", function() { - that._hideTab( clicked, toHide ); + that._hideTab( event, eventData ); }).dequeue( "tabs" ); clicked[ 0 ].blur(); return; } else if ( !toHide.length ) { that.element.queue( "tabs", function() { - that._showTab( clicked, toShow, event ); + that._showTab( event, eventData ); }); // TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171 @@ -397,11 +407,11 @@ $.widget( "ui.tabs", { if ( toShow.length ) { if ( toHide.length ) { that.element.queue( "tabs", function() { - that._hideTab( clicked, toHide ); + that._hideTab( event, eventData ); }); } that.element.queue( "tabs", function() { - that._showTab( clicked, toShow, event ); + that._showTab( event, eventData ); }); that.load( that.anchors.index( clicked ) ); |