library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-10-05 01:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tabs: Deprecate select method. Fixes #7138 Tabs: Deprecate select method

Browse Source
This commit is contained in:
David Petersen 2011-03-28 22:28:59 -04:00
parent 8b0c3618bd
commit c6a6ef5ee6
6 changed files with 110 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
tests/unit/tabs/tabs_deprecated.js
View File

@ -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);

11
tests/unit/tabs/tabs_events.js
View File

@ -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() {

31
tests/unit/tabs/tabs_methods.js
View File

@ -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>');

10
tests/unit/tabs/tabs_options.js
View File

@ -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');

6
tests/unit/tabs/tabs_tickets.js
View File

@ -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');
});

99
ui/jquery.ui.tabs.js vendored
View File

@ -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,10 +434,33 @@ $.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 ) {
// meta-function to give users option to provide a href string instead of a numerical index.
// also sanitizes numerical indexes to valid values.
@ -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 );