aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--tests/unit/tabs/tabs_deprecated.js30
-rw-r--r--tests/unit/tabs/tabs_events.js11
-rw-r--r--tests/unit/tabs/tabs_methods.js31
-rw-r--r--tests/unit/tabs/tabs_options.js10
-rw-r--r--tests/unit/tabs/tabs_tickets.js6
-rwxr-xr-xui/jquery.ui.tabs.js99
6 files changed, 110 insertions, 77 deletions
diff --git a/tests/unit/tabs/tabs_deprecated.js b/tests/unit/tabs/tabs_deprecated.js
index 38fa6db71..1abaa0b04 100644
--- a/tests/unit/tabs/tabs_deprecated.js
+++ b/tests/unit/tabs/tabs_deprecated.js
@@ -247,6 +247,36 @@ test('remove', function() {
equals(el.tabs('option', 'selected'), 0, 'update selected property');
});
+test('select', function() {
+ expect(6);
+
+ el = $('#tabs1').tabs();
+
+ el.tabs('select', 1);
+ equals(el.tabs('option', 'active'), 1, 'should select tab');
+
+ el.tabs('destroy');
+ el.tabs({ collapsible: true });
+ el.tabs('select', 0);
+ equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in the already active tab');
+
+ el.tabs('destroy');
+ el.tabs({ collapsible: true });
+ el.tabs('select', -1);
+ equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in -1');
+
+ el.tabs('destroy');
+ el.tabs();
+ el.tabs('select', 0);
+ equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true');
+ el.tabs('select', -1);
+ equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true');
+
+ el.tabs('select', '#fragment-2');
+ equals(el.tabs('option', 'active'), 1, 'should select tab by id');
+});
+
+
test('#5069 - ui.tabs.add creates two tab panels when using a full URL', function() {
// http://dev.jqueryui.com/ticket/5069
expect(2);
diff --git a/tests/unit/tabs/tabs_events.js b/tests/unit/tabs/tabs_events.js
index 4fedde842..381326533 100644
--- a/tests/unit/tabs/tabs_events.js
+++ b/tests/unit/tabs/tabs_events.js
@@ -8,7 +8,6 @@ module("tabs: events");
test('beforeActivate', function() {
expect(7);
- var eventObj;
el = $('#tabs1').tabs({
beforeActivate: function(event, ui) {
ok(true, 'beforeActivate triggered after initialization');
@@ -17,13 +16,17 @@ test('beforeActivate', function() {
equals(ui.tab, el.find('a')[1], 'contain tab as DOM anchor element');
equals(ui.panel, el.find('div')[1], 'contain panel as DOM div element');
equals(ui.index, 1, 'contain index');
- evenObj = event;
}
});
- el.tabs('select', 1);
+ el.tabs('option', 'active', 1);
+ el.tabs('destroy');
+ el.tabs({
+ beforeActivate: function(event, ui) {
+ equals( event.originalEvent.type, "click", "beforeActivate triggered by click" );
+ }
+ });
el.find( "li:eq(1) a" ).simulate( "click" );
- equals( evenObj.originalEvent.type, "click", "beforeActivate triggered by click" );
});
test('beforeload', function() {
diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/tabs_methods.js
index dbb5c2d15..69dcc872e 100644
--- a/tests/unit/tabs/tabs_methods.js
+++ b/tests/unit/tabs/tabs_methods.js
@@ -130,35 +130,6 @@ test('disable', function() {
same(el.tabs('option', 'disabled'), true, 'set to true');
});
-test('select', function() {
- expect(6);
-
- el = $('#tabs1').tabs();
-
- el.tabs('select', 1);
- equals(el.tabs('option', 'active'), 1, 'should select tab');
-
- el.tabs('destroy');
- el.tabs({ collapsible: true });
- el.tabs('select', 0);
- equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in the already active tab');
-
- el.tabs('destroy');
- el.tabs({ collapsible: true });
- el.tabs('select', -1);
- equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in -1');
-
- el.tabs('destroy');
- el.tabs();
- el.tabs('select', 0);
- equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true');
- el.tabs('select', -1);
- equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true');
-
- el.tabs('select', '#fragment-2');
- equals(el.tabs('option', 'active'), 1, 'should select tab by id');
-});
-
test('refresh', function() {
expect(5);
@@ -178,7 +149,7 @@ test('refresh', function() {
ul.append('<li><a href="#test1">Test 1</a></li>');
$('<div id="test1">Test Panel 1</div>').insertAfter( ul );
el.tabs('refresh');
- el.tabs('select', 0);
+ el.tabs('option', 'active', 0);
equals( el.tabs('option', 'active'), 0, 'First tab added should be auto active');
ul.append('<li><a href="#test2">Test 2</a></li>');
diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js
index b1a7a5e78..1352a68e5 100644
--- a/tests/unit/tabs/tabs_options.js
+++ b/tests/unit/tabs/tabs_options.js
@@ -13,8 +13,10 @@ test('collapsible', function() {
el.tabs({ collapsible: true });
equals(el.tabs('option', 'collapsible'), true, 'option set');
ok(el.is('.ui-tabs-collapsible'), 'extra class "ui-tabs-collapsible" attached');
- el.tabs('select', 0);
+
+ el.tabs('option', 'active', false);
equals($('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden');
+
el.tabs('option', 'collapsible', false);
ok(el.is(':not(.ui-tabs-collapsible)'), 'extra class "ui-tabs-collapsible" not attached');
@@ -37,8 +39,8 @@ test('cookie', function() {
el.tabs({ active: 1, cookie: cookieObj });
equals(cookie(), 1, 'initial cookie value, from active property');
- el.tabs('select', 2);
- equals(cookie(), 2, 'cookie value updated after select');
+ el.tabs('option', 'active', 2);
+ equals(cookie(), 2, 'cookie value updated after activating');
el.tabs('destroy');
$.cookie(cookieName, 1);
@@ -47,7 +49,7 @@ test('cookie', function() {
el.tabs('destroy');
el.tabs({ cookie: cookieObj, collapsible: true });
- el.tabs('select', 0);
+ el.tabs('option', 'active', false);
equals(cookie(), -1, 'cookie value for all tabs unselected');
el.tabs('destroy');
diff --git a/tests/unit/tabs/tabs_tickets.js b/tests/unit/tabs/tabs_tickets.js
index 486d3b6d2..9ff4d6f92 100644
--- a/tests/unit/tabs/tabs_tickets.js
+++ b/tests/unit/tabs/tabs_tickets.js
@@ -13,7 +13,7 @@ test('#2715 - id containing colon', function() {
ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' );
ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' );
- el.tabs('select', 1).tabs('select', 0);
+ el.tabs('option', 'active', 1).tabs('option', 'active', 0);
ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' );
ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' );
@@ -30,10 +30,10 @@ test('#???? - panel containing inline style', function() {
el = $('#tabs2').tabs();
equals(inlineStyle('height'), expected, 'init should not remove inline style');
- el.tabs('select', 1);
+ el.tabs('option', 'active', 1);
equals(inlineStyle('height'), expected, 'show tab should not remove inline style');
- el.tabs('select', 0);
+ el.tabs('option', 'active', 0);
equals(inlineStyle('height'), expected, 'hide tab should not remove inline style');
});
diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js
index 8508f0adb..b35a91e51 100755
--- a/ui/jquery.ui.tabs.js
+++ b/ui/jquery.ui.tabs.js
@@ -96,8 +96,8 @@ $.widget( "ui.tabs", {
this.lis.removeClass( "ui-tabs-selected ui-state-active" );
// check for length avoids error when initializing empty list
if ( o.active >= 0 && this.anchors.length ) {
- var tab = self.anchors[ o.active ],
- panel = self.element.find( self._sanitizeSelector( $( tab ).attr( "aria-controls" ) ) );
+ this.active = this._findActive( o.active );
+ var panel = self.element.find( self._sanitizeSelector( this.active.attr( "aria-controls" ) ) );
panel.removeClass( "ui-tabs-hide" );
@@ -105,7 +105,7 @@ $.widget( "ui.tabs", {
// seems to be expected behavior that the activate callback is fired
self.element.queue( "tabs", function() {
- self._trigger( "activate", null, self._ui( tab, panel[ 0 ] ) );
+ self._trigger( "activate", null, self._ui( self.active[ 0 ], panel[ 0 ] ) );
});
this.load( o.active );
@@ -120,10 +120,9 @@ $.widget( "ui.tabs", {
_setOption: function( key, value ) {
if ( key == "active" ) {
- if (this.options.collapsible && value == this.options.active ) {
- return;
- }
- this.select( value );
+ // _activate() will handle invalid values and update this.option
+ this._activate( value );
+ return
} else {
this.options[ key ] = value;
this.refresh();
@@ -350,10 +349,10 @@ $.widget( "ui.tabs", {
event.preventDefault();
var self = this,
o = this.options,
- el = event.currentTarget,
- $li = $( el ).closest( "li" ),
+ clicked = $( event.currentTarget ),
+ $li = clicked.closest( "li" ),
$hide = self.panels.filter( ":not(.ui-tabs-hide)" ),
- $show = self.element.find( self._sanitizeSelector( $( el ).attr( "aria-controls" ) ) );
+ $show = self.element.find( self._sanitizeSelector( clicked.attr( "aria-controls" ) ) );
// tab is already selected, but not collapsible
if ( ( $li.hasClass( "ui-tabs-selected" ) && !o.collapsible ) ||
@@ -364,12 +363,14 @@ $.widget( "ui.tabs", {
// tab is already loading
$li.hasClass( "ui-state-processing" ) ||
// allow canceling by beforeActivate event
- self._trigger( "beforeActivate", event, self._ui( el, $show[ 0 ] ) ) === false ) {
- el.blur();
+ self._trigger( "beforeActivate", event, self._ui( clicked[ 0 ], $show[ 0 ] ) ) === false ) {
+ clicked[ 0 ].blur();
return;
}
- o.active = self.anchors.index( el );
+ o.active = self.anchors.index( clicked );
+
+ self.active = clicked;
if ( self.xhr ) {
self.xhr.abort();
@@ -379,16 +380,17 @@ $.widget( "ui.tabs", {
if ( o.collapsible ) {
if ( $li.hasClass( "ui-tabs-selected" ) ) {
o.active = -1;
+ self.active = null;
if ( o.cookie ) {
self._cookie( o.active, o.cookie );
}
self.element.queue( "tabs", function() {
- self._hideTab( el, $hide );
+ self._hideTab( clicked, $hide );
}).dequeue( "tabs" );
- el.blur();
+ clicked[ 0 ].blur();
return;
} else if ( !$hide.length ) {
if ( o.cookie ) {
@@ -396,13 +398,13 @@ $.widget( "ui.tabs", {
}
self.element.queue( "tabs", function() {
- self._showTab( el, $show, event );
+ self._showTab( clicked, $show, event );
});
// TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171
- self.load( self.anchors.index( el ) );
+ self.load( self.anchors.index( clicked ) );
- el.blur();
+ clicked[ 0 ].blur();
return;
}
}
@@ -415,14 +417,14 @@ $.widget( "ui.tabs", {
if ( $show.length ) {
if ( $hide.length ) {
self.element.queue( "tabs", function() {
- self._hideTab( el, $hide );
+ self._hideTab( clicked, $hide );
});
}
self.element.queue( "tabs", function() {
- self._showTab( el, $show, event );
+ self._showTab( clicked, $show, event );
});
- self.load( self.anchors.index( el ) );
+ self.load( self.anchors.index( clicked ) );
} else {
throw "jQuery UI Tabs: Mismatching fragment identifier.";
}
@@ -432,8 +434,31 @@ $.widget( "ui.tabs", {
// in modern browsers; blur() removes focus from address bar in Firefox
// which can become a usability
if ( $.browser.msie ) {
- el.blur();
+ clicked[ 0 ].blur();
+ }
+ },
+
+ _activate: function( index ) {
+ var active = this._findActive( index )[ 0 ];
+
+ // trying to activate the already active panel
+ if ( this.active && active === this.active[ 0 ] ) {
+ return;
}
+
+ // trying to collapse, simulate a click on the current active header
+ active = active || this.active;
+
+ this._eventHandler({
+ target: active,
+ currentTarget: active,
+ preventDefault: $.noop
+ });
+ },
+
+ _findActive: function( selector ) {
+ return typeof selector === "number" ? this.anchors.eq( selector ) :
+ typeof selector === "string" ? this.anchors.filter( "[href$='" + selector + "']" ) : $();
},
_getIndex: function( index ) {
@@ -539,19 +564,6 @@ $.widget( "ui.tabs", {
return this;
},
- select: function( index ) {
- index = this._getIndex( index );
- if ( index == -1 ) {
- if ( this.options.collapsible && this.options.active != -1 ) {
- index = this.options.active;
- } else {
- return this;
- }
- }
- this.anchors.eq( index ).trigger( this.options.event + ".tabs" );
- return this;
- },
-
load: function( index ) {
index = this._getIndex( index );
var self = this,
@@ -834,7 +846,7 @@ if ( $.uiBackCompat !== false ) {
// If selected tab was removed focus tab to the right or
// in case the last tab was removed the tab to the left.
if ( $li.hasClass( "ui-tabs-selected" ) && this.anchors.length > 1) {
- this.select( index + ( index + 1 < this.anchors.length ? 1 : -1 ) );
+ this._activate( index + ( index + 1 < this.anchors.length ? 1 : -1 ) );
}
o.disabled = $.map(
@@ -947,6 +959,21 @@ if ( $.uiBackCompat !== false ) {
}
};
}( jQuery, jQuery.ui.tabs.prototype ) );
+
+ // select method
+ (function( $, prototype ) {
+ prototype.select = function( index ) {
+ index = this._getIndex( index );
+ if ( index == -1 ) {
+ if ( this.options.collapsible && this.options.selected != -1 ) {
+ index = this.options.selected;
+ } else {
+ return;
+ }
+ }
+ this.anchors.eq( index ).trigger( this.options.event + ".tabs" );
+ };
+ }( jQuery, jQuery.ui.tabs.prototype ) );
}
})( jQuery );