Skip to content

Commit c6a6ef5

Browse files
petersendiditpetersendidit
committed
Tabs: Deprecate select method. Fixes #7138 Tabs: Deprecate select method
1 parent 8b0c361 commit c6a6ef5

File tree

6 files changed

+110
-77
lines changed

6 files changed

+110
-77
lines changed

‎tests/unit/tabs/tabs_deprecated.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,36 @@ test('remove', function() {
247247
equals(el.tabs('option', 'selected'), 0, 'update selected property');
248248
});
249249

250+
test('select', function() {
251+
expect(6);
252+
253+
el = $('#tabs1').tabs();
254+
255+
el.tabs('select', 1);
256+
equals(el.tabs('option', 'active'), 1, 'should select tab');
257+
258+
el.tabs('destroy');
259+
el.tabs({ collapsible: true });
260+
el.tabs('select', 0);
261+
equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in the already active tab');
262+
263+
el.tabs('destroy');
264+
el.tabs({ collapsible: true });
265+
el.tabs('select', -1);
266+
equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in -1');
267+
268+
el.tabs('destroy');
269+
el.tabs();
270+
el.tabs('select', 0);
271+
equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true');
272+
el.tabs('select', -1);
273+
equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true');
274+
275+
el.tabs('select', '#fragment-2');
276+
equals(el.tabs('option', 'active'), 1, 'should select tab by id');
277+
});
278+
279+
250280
test('#5069 - ui.tabs.add creates two tab panels when using a full URL', function() {
251281
// http://dev.jqueryui.com/ticket/5069
252282
expect(2);

‎tests/unit/tabs/tabs_events.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ module("tabs: events");
88
test('beforeActivate', function() {
99
expect(7);
1010

11-
var eventObj;
1211
el = $('#tabs1').tabs({
1312
beforeActivate: function(event, ui) {
1413
ok(true, 'beforeActivate triggered after initialization');
@@ -17,13 +16,17 @@ test('beforeActivate', function() {
1716
equals(ui.tab, el.find('a')[1], 'contain tab as DOM anchor element');
1817
equals(ui.panel, el.find('div')[1], 'contain panel as DOM div element');
1918
equals(ui.index, 1, 'contain index');
20-
evenObj = event;
2119
}
2220
});
23-
el.tabs('select', 1);
21+
el.tabs('option', 'active', 1);
2422

23+
el.tabs('destroy');
24+
el.tabs({
25+
beforeActivate: function(event, ui) {
26+
equals( event.originalEvent.type, "click", "beforeActivate triggered by click" );
27+
}
28+
});
2529
el.find( "li:eq(1) a" ).simulate( "click" );
26-
equals( evenObj.originalEvent.type, "click", "beforeActivate triggered by click" );
2730
});
2831

2932
test('beforeload', function() {

‎tests/unit/tabs/tabs_methods.js

Lines changed: 1 addition & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -130,35 +130,6 @@ test('disable', function() {
130130
same(el.tabs('option', 'disabled'), true, 'set to true');
131131
});
132132

133-
test('select', function() {
134-
expect(6);
135-
136-
el = $('#tabs1').tabs();
137-
138-
el.tabs('select', 1);
139-
equals(el.tabs('option', 'active'), 1, 'should select tab');
140-
141-
el.tabs('destroy');
142-
el.tabs({ collapsible: true });
143-
el.tabs('select', 0);
144-
equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in the already active tab');
145-
146-
el.tabs('destroy');
147-
el.tabs({ collapsible: true });
148-
el.tabs('select', -1);
149-
equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in -1');
150-
151-
el.tabs('destroy');
152-
el.tabs();
153-
el.tabs('select', 0);
154-
equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true');
155-
el.tabs('select', -1);
156-
equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true');
157-
158-
el.tabs('select', '#fragment-2');
159-
equals(el.tabs('option', 'active'), 1, 'should select tab by id');
160-
});
161-
162133
test('refresh', function() {
163134
expect(5);
164135

@@ -178,7 +149,7 @@ test('refresh', function() {
178149
ul.append('<li><a href="#test1">Test 1</a></li>');
179150
$('<div id="test1">Test Panel 1</div>').insertAfter( ul );
180151
el.tabs('refresh');
181-
el.tabs('select', 0);
152+
el.tabs('option', 'active', 0);
182153
equals( el.tabs('option', 'active'), 0, 'First tab added should be auto active');
183154

184155
ul.append('<li><a href="#test2">Test 2</a></li>');

‎tests/unit/tabs/tabs_options.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,10 @@ test('collapsible', function() {
1313
el.tabs({ collapsible: true });
1414
equals(el.tabs('option', 'collapsible'), true, 'option set');
1515
ok(el.is('.ui-tabs-collapsible'), 'extra class "ui-tabs-collapsible" attached');
16-
el.tabs('select', 0);
16+
17+
el.tabs('option', 'active', false);
1718
equals($('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden');
19+
1820
el.tabs('option', 'collapsible', false);
1921
ok(el.is(':not(.ui-tabs-collapsible)'), 'extra class "ui-tabs-collapsible" not attached');
2022

@@ -37,8 +39,8 @@ test('cookie', function() {
3739
el.tabs({ active: 1, cookie: cookieObj });
3840
equals(cookie(), 1, 'initial cookie value, from active property');
3941

40-
el.tabs('select', 2);
41-
equals(cookie(), 2, 'cookie value updated after select');
42+
el.tabs('option', 'active', 2);
43+
equals(cookie(), 2, 'cookie value updated after activating');
4244

4345
el.tabs('destroy');
4446
$.cookie(cookieName, 1);
@@ -47,7 +49,7 @@ test('cookie', function() {
4749

4850
el.tabs('destroy');
4951
el.tabs({ cookie: cookieObj, collapsible: true });
50-
el.tabs('select', 0);
52+
el.tabs('option', 'active', false);
5153
equals(cookie(), -1, 'cookie value for all tabs unselected');
5254

5355
el.tabs('destroy');

‎tests/unit/tabs/tabs_tickets.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ test('#2715 - id containing colon', function() {
1313
ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' );
1414
ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' );
1515

16-
el.tabs('select', 1).tabs('select', 0);
16+
el.tabs('option', 'active', 1).tabs('option', 'active', 0);
1717
ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' );
1818
ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' );
1919

@@ -30,10 +30,10 @@ test('#???? - panel containing inline style', function() {
3030
el = $('#tabs2').tabs();
3131
equals(inlineStyle('height'), expected, 'init should not remove inline style');
3232

33-
el.tabs('select', 1);
33+
el.tabs('option', 'active', 1);
3434
equals(inlineStyle('height'), expected, 'show tab should not remove inline style');
3535

36-
el.tabs('select', 0);
36+
el.tabs('option', 'active', 0);
3737
equals(inlineStyle('height'), expected, 'hide tab should not remove inline style');
3838

3939
});

‎ui/jquery.ui.tabs.js

Lines changed: 63 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -96,16 +96,16 @@ $.widget( "ui.tabs", {
9696
this.lis.removeClass( "ui-tabs-selected ui-state-active" );
9797
// check for length avoids error when initializing empty list
9898
if ( o.active >= 0 && this.anchors.length ) {
99-
var tab = self.anchors[ o.active ],
100-
panel = self.element.find( self._sanitizeSelector( $( tab ).attr( "aria-controls" ) ) );
99+
this.active = this._findActive( o.active );
100+
var panel = self.element.find( self._sanitizeSelector( this.active.attr( "aria-controls" ) ) );
101101

102102
panel.removeClass( "ui-tabs-hide" );
103103

104104
this.lis.eq( o.active ).addClass( "ui-tabs-selected ui-state-active" );
105105

106106
// seems to be expected behavior that the activate callback is fired
107107
self.element.queue( "tabs", function() {
108-
self._trigger( "activate", null, self._ui( tab, panel[ 0 ] ) );
108+
self._trigger( "activate", null, self._ui( self.active[ 0 ], panel[ 0 ] ) );
109109
});
110110

111111
this.load( o.active );
@@ -120,10 +120,9 @@ $.widget( "ui.tabs", {
120120

121121
_setOption: function( key, value ) {
122122
if ( key == "active" ) {
123-
if (this.options.collapsible && value == this.options.active ) {
124-
return;
125-
}
126-
this.select( value );
123+
// _activate() will handle invalid values and update this.option
124+
this._activate( value );
125+
return
127126
} else {
128127
this.options[ key ] = value;
129128
this.refresh();
@@ -350,10 +349,10 @@ $.widget( "ui.tabs", {
350349
event.preventDefault();
351350
var self = this,
352351
o = this.options,
353-
el = event.currentTarget,
354-
$li = $( el ).closest( "li" ),
352+
clicked = $( event.currentTarget ),
353+
$li = clicked.closest( "li" ),
355354
$hide = self.panels.filter( ":not(.ui-tabs-hide)" ),
356-
$show = self.element.find( self._sanitizeSelector( $( el ).attr( "aria-controls" ) ) );
355+
$show = self.element.find( self._sanitizeSelector( clicked.attr( "aria-controls" ) ) );
357356

358357
// tab is already selected, but not collapsible
359358
if ( ( $li.hasClass( "ui-tabs-selected" ) && !o.collapsible ) ||
@@ -364,12 +363,14 @@ $.widget( "ui.tabs", {
364363
// tab is already loading
365364
$li.hasClass( "ui-state-processing" ) ||
366365
// allow canceling by beforeActivate event
367-
self._trigger( "beforeActivate", event, self._ui( el, $show[ 0 ] ) ) === false ) {
368-
el.blur();
366+
self._trigger( "beforeActivate", event, self._ui( clicked[ 0 ], $show[ 0 ] ) ) === false ) {
367+
clicked[ 0 ].blur();
369368
return;
370369
}
371370

372-
o.active = self.anchors.index( el );
371+
o.active = self.anchors.index( clicked );
372+
373+
self.active = clicked;
373374

374375
if ( self.xhr ) {
375376
self.xhr.abort();
@@ -379,30 +380,31 @@ $.widget( "ui.tabs", {
379380
if ( o.collapsible ) {
380381
if ( $li.hasClass( "ui-tabs-selected" ) ) {
381382
o.active = -1;
383+
self.active = null;
382384

383385
if ( o.cookie ) {
384386
self._cookie( o.active, o.cookie );
385387
}
386388

387389
self.element.queue( "tabs", function() {
388-
self._hideTab( el, $hide );
390+
self._hideTab( clicked, $hide );
389391
}).dequeue( "tabs" );
390392

391-
el.blur();
393+
clicked[ 0 ].blur();
392394
return;
393395
} else if ( !$hide.length ) {
394396
if ( o.cookie ) {
395397
self._cookie( o.active, o.cookie );
396398
}
397399

398400
self.element.queue( "tabs", function() {
399-
self._showTab( el, $show, event );
401+
self._showTab( clicked, $show, event );
400402
});
401403

402404
// TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171
403-
self.load( self.anchors.index( el ) );
405+
self.load( self.anchors.index( clicked ) );
404406

405-
el.blur();
407+
clicked[ 0 ].blur();
406408
return;
407409
}
408410
}
@@ -415,14 +417,14 @@ $.widget( "ui.tabs", {
415417
if ( $show.length ) {
416418
if ( $hide.length ) {
417419
self.element.queue( "tabs", function() {
418-
self._hideTab( el, $hide );
420+
self._hideTab( clicked, $hide );
419421
});
420422
}
421423
self.element.queue( "tabs", function() {
422-
self._showTab( el, $show, event );
424+
self._showTab( clicked, $show, event );
423425
});
424426

425-
self.load( self.anchors.index( el ) );
427+
self.load( self.anchors.index( clicked ) );
426428
} else {
427429
throw "jQuery UI Tabs: Mismatching fragment identifier.";
428430
}
@@ -432,8 +434,31 @@ $.widget( "ui.tabs", {
432434
// in modern browsers; blur() removes focus from address bar in Firefox
433435
// which can become a usability
434436
if ( $.browser.msie ) {
435-
el.blur();
437+
clicked[ 0 ].blur();
438+
}
439+
},
440+
441+
_activate: function( index ) {
442+
var active = this._findActive( index )[ 0 ];
443+
444+
// trying to activate the already active panel
445+
if ( this.active && active === this.active[ 0 ] ) {
446+
return;
436447
}
448+
449+
// trying to collapse, simulate a click on the current active header
450+
active = active || this.active;
451+
452+
this._eventHandler({
453+
target: active,
454+
currentTarget: active,
455+
preventDefault: $.noop
456+
});
457+
},
458+
459+
_findActive: function( selector ) {
460+
return typeof selector === "number" ? this.anchors.eq( selector ) :
461+
typeof selector === "string" ? this.anchors.filter( "[href$='" + selector + "']" ) : $();
437462
},
438463

439464
_getIndex: function( index ) {
@@ -539,19 +564,6 @@ $.widget( "ui.tabs", {
539564
return this;
540565
},
541566

542-
select: function( index ) {
543-
index = this._getIndex( index );
544-
if ( index == -1 ) {
545-
if ( this.options.collapsible && this.options.active != -1 ) {
546-
index = this.options.active;
547-
} else {
548-
return this;
549-
}
550-
}
551-
this.anchors.eq( index ).trigger( this.options.event + ".tabs" );
552-
return this;
553-
},
554-
555567
load: function( index ) {
556568
index = this._getIndex( index );
557569
var self = this,
@@ -834,7 +846,7 @@ if ( $.uiBackCompat !== false ) {
834846
// If selected tab was removed focus tab to the right or
835847
// in case the last tab was removed the tab to the left.
836848
if ( $li.hasClass( "ui-tabs-selected" ) && this.anchors.length > 1) {
837-
this.select( index + ( index + 1 < this.anchors.length ? 1 : -1 ) );
849+
this._activate( index + ( index + 1 < this.anchors.length ? 1 : -1 ) );
838850
}
839851

840852
o.disabled = $.map(
@@ -947,6 +959,21 @@ if ( $.uiBackCompat !== false ) {
947959
}
948960
};
949961
}( jQuery, jQuery.ui.tabs.prototype ) );
962+
963+
// select method
964+
(function( $, prototype ) {
965+
prototype.select = function( index ) {
966+
index = this._getIndex( index );
967+
if ( index == -1 ) {
968+
if ( this.options.collapsible && this.options.selected != -1 ) {
969+
index = this.options.selected;
970+
} else {
971+
return;
972+
}
973+
}
974+
this.anchors.eq( index ).trigger( this.options.event + ".tabs" );
975+
};
976+
}( jQuery, jQuery.ui.tabs.prototype ) );
950977
}
951978

952979
})( jQuery );

0 commit comments

Comments
 (0)