Skip to content

Commit e9ae04a

Browse files
petersendiditpetersendidit
committed
Tabs: CSS Consistency Updates. Fixes #7146 Tabs: CSS Consistency Updates
1 parent cb0588f commit e9ae04a

6 files changed

Lines changed: 45 additions & 48 deletions

File tree

‎tests/unit/tabs/tabs_deprecated.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ test('selected', function() {
125125
el = $('#tabs1').tabs({ selected: -1 });
126126
equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected');
127127
equals( $('li.ui-tabs-selected', el).length, 0, 'no tab should be selected' );
128-
equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
128+
equals( $('div:hidden', '#tabs1').length, 3, 'all panels should be hidden' );
129129

130130
el.tabs('destroy');
131131
el.tabs({ selected: null });

‎tests/unit/tabs/tabs_methods.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ test('init', function() {
1414
ok( el.is('.ui-tabs.ui-widget.ui-widget-content.ui-corner-all'), 'attach classes to container');
1515
ok( $('ul', el).is('.ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all'), 'attach classes to list' );
1616
ok( $('div:eq(0)', el).is('.ui-tabs-panel.ui-widget-content.ui-corner-bottom'), 'attach classes to panel' );
17-
ok( $('li:eq(0)', el).is('.ui-tabs-selected.ui-state-active.ui-corner-top'), 'attach classes to active li');
17+
ok( $('li:eq(0)', el).is('.ui-tabs-active.ui-state-active.ui-corner-top'), 'attach classes to active li');
1818
ok( $('li:eq(1)', el).is('.ui-state-default.ui-corner-top'), 'attach classes to inactive li');
1919
equals( el.tabs('option', 'active'), 0, 'active option set' );
20-
equals( $('li', el).index( $('li.ui-tabs-selected', el) ), 0, 'second tab active');
21-
equals( $('div', el).index( $('div.ui-tabs-hide', '#tabs1') ), 1, 'second panel should be hidden' );
20+
equals( $('li', el).index( $('li.ui-tabs-active', el) ), 0, 'second tab active');
21+
equals( $('div', el).index( $('div:hidden', '#tabs1') ), 1, 'second panel should be hidden' );
2222
});
2323

2424
test('init with hash', function() {
@@ -32,11 +32,11 @@ test('init with hash', function() {
3232

3333
equals(el.tabs('option', 'active'), 1, 'second tab should be active');
3434

35-
ok(!$('#tabs1 ul li:eq(0)').is('.ui-tabs-selected.ui-state-active'), 'first tab should not be selected nor active');
36-
ok($('#tabs1 div:eq(0)').is('.ui-tabs-hide'), 'first div for first tab should be hidden');
35+
ok(!$('#tabs1 ul li:eq(0)').is('.ui-tabs-active.ui-state-active'), 'first tab should not be selected nor active');
36+
ok($('#tabs1 div:eq(0)').is(':hidden'), 'first div for first tab should be hidden');
3737

38-
ok($('#tabs1 ul li:eq(1)').is('.ui-tabs-selected.ui-state-active'), 'second tab should be selected and active');
39-
ok(!$('#tabs1 div:eq(1)').is('.ui-tabs-hide'), 'second div for second tab should not be hidden');
38+
ok($('#tabs1 ul li:eq(1)').is('.ui-tabs-active.ui-state-active'), 'second tab should be selected and active');
39+
ok(!$('#tabs1 div:eq(1)').is(':hidden'), 'second div for second tab should not be hidden');
4040
});
4141

4242
test('init mismatched order with hash', function() {
@@ -50,11 +50,11 @@ test('init mismatched order with hash', function() {
5050

5151
equals(el.tabs('option', 'active'), 1, 'second tab should be active');
5252

53-
ok(!$('#tabs7-list li:eq(0)').is('.ui-tabs-selected.ui-state-active'), 'first tab should not be selected nor active');
54-
ok($('#tabs7 div:eq(1)').is('.ui-tabs-hide'), 'second div for first tab should be hidden');
53+
ok(!$('#tabs7-list li:eq(0)').is('.ui-tabs-active.ui-state-active'), 'first tab should not be selected nor active');
54+
ok($('#tabs7 div:eq(1)').is(':hidden'), 'second div for first tab should be hidden');
5555

56-
ok($('#tabs7-list li:eq(1)').is('.ui-tabs-selected.ui-state-active'), 'second tab should be selected and active');
57-
ok(!$('#tabs7 div:eq(0)').is('.ui-tabs-hide'), 'first div for second tab should not be hidden');
56+
ok($('#tabs7-list li:eq(1)').is('.ui-tabs-active.ui-state-active'), 'second tab should be selected and active');
57+
ok(!$('#tabs7 div:eq(0)').is(':hidden'), 'first div for second tab should not be hidden');
5858
});
5959

6060
test('destroy', function() {
@@ -66,8 +66,8 @@ test('destroy', function() {
6666

6767
ok( el.is(':not(.ui-tabs, .ui-widget, .ui-widget-content, .ui-corner-all, .ui-tabs-collapsible)'), 'remove classes from container');
6868
ok( $('ul', el).is(':not(.ui-tabs-nav, .ui-helper-reset, .ui-helper-clearfix, .ui-widget-header, .ui-corner-all)'), 'remove classes from list' );
69-
ok( $('div:eq(1)', el).is(':not(.ui-tabs-panel, .ui-widget-content, .ui-corner-bottom, .ui-tabs-hide)'), 'remove classes to panel' );
70-
ok( $('li:eq(0)', el).is(':not(.ui-tabs-selected, .ui-state-active, .ui-corner-top)'), 'remove classes from active li');
69+
ok( $('div:eq(1)', el).is(':not(.ui-tabs-panel, .ui-widget-content, .ui-corner-bottom)'), 'remove classes to panel' );
70+
ok( $('li:eq(0)', el).is(':not(.ui-tabs-active, .ui-state-active, .ui-corner-top)'), 'remove classes from active li');
7171
ok( $('li:eq(1)', el).is(':not(.ui-state-default, .ui-corner-top)'), 'remove classes from inactive li');
7272
ok( $('li:eq(2)', el).is(':not(.ui-state-hover, .ui-state-focus)'), 'remove classes from mouseovered or focused li');
7373
});

‎tests/unit/tabs/tabs_options.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ test('collapsible', function() {
1515
ok(el.is('.ui-tabs-collapsible'), 'extra class "ui-tabs-collapsible" attached');
1616

1717
el.tabs('option', 'active', false);
18-
equals($('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden');
18+
equals($('div:hidden', '#tabs1').length, 3, 'all panels should be hidden');
1919

2020
el.tabs('option', 'collapsible', false);
2121
ok(el.is(':not(.ui-tabs-collapsible)'), 'extra class "ui-tabs-collapsible" not attached');
@@ -56,7 +56,7 @@ test('active', function() {
5656
el.tabs({ active: -1 });
5757
equals(el.tabs('option', 'active'), -1, 'should be -1 for all tabs deactive');
5858
equals( $('li.ui-tabs-selected', el).length, 0, 'no tab should be active' );
59-
equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
59+
equals( $('div:hidden', '#tabs1').length, 3, 'all panels should be hidden' );
6060

6161
el.tabs('destroy');
6262
el.tabs({ active: null });

‎tests/unit/tabs/tabs_tickets.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ test('#6710 - selectors are global', function() {
9292
</div>\
9393
</div>');
9494
container.find('#tabs_6710').tabs();
95-
ok( container.find('#tabs-2_6710').hasClass('ui-tabs-hide'), 'should find panels and add corresponding classes' );
95+
ok( container.find('#tabs-2_6710').is(':hidden'), 'should find panels and add corresponding classes' );
9696
});
9797

9898

‎themes/base/jquery.ui.tabs.css‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@
1111
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
1212
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
1313
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
14-
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
15-
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
16-
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
14+
.ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: 0; padding-bottom: 1px; }
15+
.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; }
16+
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
1717
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
18-
.ui-tabs .ui-tabs-hide { display: none !important; }

‎ui/jquery.ui.tabs.js‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@ $.widget( "ui.tabs", {
5959
}
6060
});
6161
}
62-
if ( typeof o.active !== "number" && this.lis.filter( ".ui-tabs-selected" ).length ) {
63-
o.active = this.lis.index( this.lis.filter( ".ui-tabs-selected" ) );
62+
if ( typeof o.active !== "number" && this.lis.filter( ".ui-tabs-active" ).length ) {
63+
o.active = this.lis.index( this.lis.filter( ".ui-tabs-active" ) );
6464
}
6565
o.active = o.active || ( this.lis.length ? 0 : -1 );
6666
} else if ( o.active === null ) { // usage of null is deprecated, TODO remove in next release
@@ -87,16 +87,16 @@ $.widget( "ui.tabs", {
8787
this._refresh();
8888

8989
// highlight selected tab
90-
this.panels.addClass( "ui-tabs-hide" );
91-
this.lis.removeClass( "ui-tabs-selected ui-state-active" );
90+
this.panels.hide();
91+
this.lis.removeClass( "ui-tabs-active ui-state-active" );
9292
// check for length avoids error when initializing empty list
9393
if ( o.active >= 0 && this.anchors.length ) {
9494
this.active = this._findActive( o.active );
9595
var panel = self.element.find( self._sanitizeSelector( this.active.attr( "aria-controls" ) ) );
9696

97-
panel.removeClass( "ui-tabs-hide" );
97+
panel.show();
9898

99-
this.lis.eq( o.active ).addClass( "ui-tabs-selected ui-state-active" );
99+
this.lis.eq( o.active ).addClass( "ui-tabs-active ui-state-active" );
100100

101101
// seems to be expected behavior that the activate callback is fired
102102
self.element.queue( "tabs", function() {
@@ -131,7 +131,7 @@ $.widget( "ui.tabs", {
131131

132132
_sanitizeSelector: function( hash ) {
133133
// we need this because an id may contain a ":"
134-
return hash.replace( /:/g, "\\:" );
134+
return hash ? hash.replace( /:/g, "\\:" ) : "";
135135
},
136136

137137
_ui: function( tab, panel ) {
@@ -279,18 +279,18 @@ $.widget( "ui.tabs", {
279279
_showTab: function( clicked, show, event ) {
280280
var self = this;
281281

282-
$( clicked ).closest( "li" ).addClass( "ui-tabs-selected ui-state-active" );
282+
$( clicked ).closest( "li" ).addClass( "ui-tabs-active ui-state-active" );
283283

284284
if ( this.showFx ) {
285285
self.running = true;
286-
show.hide().removeClass( "ui-tabs-hide" ) // avoid flicker that way
286+
show.hide()
287287
.animate( showFx, showFx.duration || "normal", function() {
288288
self._resetStyle( show, showFx );
289289
self.running = false;
290290
self._trigger( "activate", event, self._ui( clicked, show[ 0 ] ) );
291291
});
292292
} else {
293-
show.removeClass( "ui-tabs-hide" );
293+
show.show();
294294
self._trigger( "activate", event, self._ui( clicked, show[ 0 ] ) );
295295
}
296296
},
@@ -302,14 +302,13 @@ $.widget( "ui.tabs", {
302302
self.running = true;
303303
$hide.animate( hideFx, hideFx.duration || "normal", function() {
304304
self.running = false;
305-
self.lis.removeClass( "ui-tabs-selected ui-state-active" );
306-
$hide.addClass( "ui-tabs-hide" );
305+
self.lis.removeClass( "ui-tabs-active ui-state-active" );
307306
self._resetStyle( $hide, hideFx );
308307
self.element.dequeue( "tabs" );
309308
});
310309
} else {
311-
self.lis.removeClass( "ui-tabs-selected ui-state-active" );
312-
$hide.addClass( "ui-tabs-hide" );
310+
self.lis.removeClass( "ui-tabs-active ui-state-active" );
311+
$hide.hide();
313312
self.element.dequeue( "tabs" );
314313
}
315314
},
@@ -335,17 +334,17 @@ $.widget( "ui.tabs", {
335334
o = this.options,
336335
clicked = $( event.currentTarget ),
337336
$li = clicked.closest( "li" ),
338-
$hide = self.panels.filter( ":not(.ui-tabs-hide)" ),
337+
$hide = self.element.find( self._sanitizeSelector( $( this.active ).attr( "aria-controls" ) ) ),
339338
$show = self.element.find( self._sanitizeSelector( clicked.attr( "aria-controls" ) ) );
340339

341340
// tab is already selected, but not collapsible
342-
if ( ( $li.hasClass( "ui-tabs-selected" ) && !o.collapsible ) ||
341+
if ( ( $li.hasClass( "ui-tabs-active" ) && !o.collapsible ) ||
343342
// can't switch durning an animation
344343
self.running ||
345344
// tab is disabled
346345
$li.hasClass( "ui-state-disabled" ) ||
347346
// tab is already loading
348-
$li.hasClass( "ui-state-processing" ) ||
347+
$li.hasClass( "ui-tabs-loading" ) ||
349348
// allow canceling by beforeActivate event
350349
self._trigger( "beforeActivate", event, self._ui( clicked[ 0 ], $show[ 0 ] ) ) === false ) {
351350
clicked[ 0 ].blur();
@@ -362,7 +361,7 @@ $.widget( "ui.tabs", {
362361

363362
// if tab may be closed
364363
if ( o.collapsible ) {
365-
if ( $li.hasClass( "ui-tabs-selected" ) ) {
364+
if ( $li.hasClass( "ui-tabs-active" ) ) {
366365
o.active = -1;
367366
self.active = null;
368367

@@ -468,13 +467,12 @@ $.widget( "ui.tabs", {
468467
$( this ).removeClass([
469468
"ui-state-default",
470469
"ui-corner-top",
471-
"ui-tabs-selected",
470+
"ui-tabs-active",
472471
"ui-state-active",
473472
"ui-state-disabled",
474473
"ui-tabs-panel",
475474
"ui-widget-content",
476-
"ui-corner-bottom",
477-
"ui-tabs-hide"
475+
"ui-corner-bottom"
478476
].join( " " ) );
479477
}
480478
});
@@ -563,7 +561,7 @@ $.widget( "ui.tabs", {
563561

564562
if ( this.xhr ) {
565563
// load remote from here on
566-
this.lis.eq( index ).addClass( "ui-state-processing" );
564+
this.lis.eq( index ).addClass( "ui-tabs-loading" );
567565

568566
this.xhr
569567
.success( function( response ) {
@@ -582,7 +580,7 @@ $.widget( "ui.tabs", {
582580
delete this.xhr;
583581
}
584582

585-
self.lis.eq( index ).removeClass( "ui-state-processing" );
583+
self.lis.eq( index ).removeClass( "ui-tabs-loading" );
586584

587585
self._trigger( "load", null, eventData );
588586
});
@@ -774,7 +772,7 @@ if ( $.uiBackCompat !== false ) {
774772
if ( !$panel.length ) {
775773
$panel = self._createPanel( id );
776774
}
777-
$panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" );
775+
$panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ).hide();
778776

779777
if ( index >= this.lis.length ) {
780778
$li.appendTo( this.list );
@@ -792,8 +790,8 @@ if ( $.uiBackCompat !== false ) {
792790

793791
if ( this.anchors.length == 1 ) {
794792
o.active = o.selected = 0;
795-
$li.addClass( "ui-tabs-selected ui-state-active" );
796-
$panel.removeClass( "ui-tabs-hide" );
793+
$li.addClass( "ui-tabs-active ui-state-active" );
794+
$panel.show();
797795
this.element.queue( "tabs", function() {
798796
self._trigger( "activate", null, self._ui( self.anchors[ 0 ], self.panels[ 0 ] ) );
799797
});
@@ -813,7 +811,7 @@ if ( $.uiBackCompat !== false ) {
813811

814812
// If selected tab was removed focus tab to the right or
815813
// in case the last tab was removed the tab to the left.
816-
if ( $li.hasClass( "ui-tabs-selected" ) && this.anchors.length > 1) {
814+
if ( $li.hasClass( "ui-tabs-active" ) && this.anchors.length > 1) {
817815
this._activate( index + ( index + 1 < this.anchors.length ? 1 : -1 ) );
818816
}
819817

0 commit comments

Comments
 (0)