mirror of
https://github.com/jquery/jquery-ui.git
synced 2025-01-07 20:34:24 +00:00
Tabs: Pass appropriate data for activate event. Fixes #7137 - Tabs: Rename show event to activate.
This commit is contained in:
Scott González
parent
316d0af8fb
commit
1fc91f90d0
@ -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);
|
||||
|
||||
66
ui/jquery.ui.tabs.js
vendored
66
ui/jquery.ui.tabs.js
vendored
@ -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;
|
||||
// TODO: combine with _showTab()
|
||||
_hideTab: function( event, eventData ) {
|
||||
var that = 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" );
|
||||
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 ) );
|
||||
|
||||
Loading…
Reference in New Issue
Block a user