Skip to content

Commit

Permalink
Tabs: CSS Consistency Updates. Fixes #7146 Tabs: CSS Consistency Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@petersendidit
petersendidit committed Mar 29, 2011
1 parent cb0588f commit e9ae04a
Show file tree
Hide file tree
Showing 6 changed files with 45 additions and 48 deletions.
2 changes: 1 addition & 1 deletion tests/unit/tabs/tabs_deprecated.js
View file
Expand Up @@ -125,7 +125,7 @@ test('selected', function() {
el = $('#tabs1').tabs({ selected: -1 });
equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected');
equals( $('li.ui-tabs-selected', el).length, 0, 'no tab should be selected' );
equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
equals( $('div:hidden', '#tabs1').length, 3, 'all panels should be hidden' );

el.tabs('destroy');
el.tabs({ selected: null });
Expand Down
26 changes: 13 additions & 13 deletions tests/unit/tabs/tabs_methods.js
View file
Expand Up @@ -14,11 +14,11 @@ test('init', function() {
ok( el.is('.ui-tabs.ui-widget.ui-widget-content.ui-corner-all'), 'attach classes to container');
ok( $('ul', el).is('.ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all'), 'attach classes to list' );
ok( $('div:eq(0)', el).is('.ui-tabs-panel.ui-widget-content.ui-corner-bottom'), 'attach classes to panel' );
ok( $('li:eq(0)', el).is('.ui-tabs-selected.ui-state-active.ui-corner-top'), 'attach classes to active li');
ok( $('li:eq(0)', el).is('.ui-tabs-active.ui-state-active.ui-corner-top'), 'attach classes to active li');
ok( $('li:eq(1)', el).is('.ui-state-default.ui-corner-top'), 'attach classes to inactive li');
equals( el.tabs('option', 'active'), 0, 'active option set' );
equals( $('li', el).index( $('li.ui-tabs-selected', el) ), 0, 'second tab active');
equals( $('div', el).index( $('div.ui-tabs-hide', '#tabs1') ), 1, 'second panel should be hidden' );
equals( $('li', el).index( $('li.ui-tabs-active', el) ), 0, 'second tab active');
equals( $('div', el).index( $('div:hidden', '#tabs1') ), 1, 'second panel should be hidden' );
});

test('init with hash', function() {
Expand All @@ -32,11 +32,11 @@ test('init with hash', function() {

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

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

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

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

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

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

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

test('destroy', function() {
Expand All @@ -66,8 +66,8 @@ test('destroy', function() {

ok( el.is(':not(.ui-tabs, .ui-widget, .ui-widget-content, .ui-corner-all, .ui-tabs-collapsible)'), 'remove classes from container');
ok( $('ul', el).is(':not(.ui-tabs-nav, .ui-helper-reset, .ui-helper-clearfix, .ui-widget-header, .ui-corner-all)'), 'remove classes from list' );
ok( $('div:eq(1)', el).is(':not(.ui-tabs-panel, .ui-widget-content, .ui-corner-bottom, .ui-tabs-hide)'), 'remove classes to panel' );
ok( $('li:eq(0)', el).is(':not(.ui-tabs-selected, .ui-state-active, .ui-corner-top)'), 'remove classes from active li');
ok( $('div:eq(1)', el).is(':not(.ui-tabs-panel, .ui-widget-content, .ui-corner-bottom)'), 'remove classes to panel' );
ok( $('li:eq(0)', el).is(':not(.ui-tabs-active, .ui-state-active, .ui-corner-top)'), 'remove classes from active li');
ok( $('li:eq(1)', el).is(':not(.ui-state-default, .ui-corner-top)'), 'remove classes from inactive li');
ok( $('li:eq(2)', el).is(':not(.ui-state-hover, .ui-state-focus)'), 'remove classes from mouseovered or focused li');
});
Expand Down
4 changes: 2 additions & 2 deletions tests/unit/tabs/tabs_options.js
View file
Expand Up @@ -15,7 +15,7 @@ test('collapsible', function() {
ok(el.is('.ui-tabs-collapsible'), 'extra class "ui-tabs-collapsible" attached');

el.tabs('option', 'active', false);
equals($('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden');
equals($('div:hidden', '#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');
Expand Down Expand Up @@ -56,7 +56,7 @@ test('active', function() {
el.tabs({ active: -1 });
equals(el.tabs('option', 'active'), -1, 'should be -1 for all tabs deactive');
equals( $('li.ui-tabs-selected', el).length, 0, 'no tab should be active' );
equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
equals( $('div:hidden', '#tabs1').length, 3, 'all panels should be hidden' );

el.tabs('destroy');
el.tabs({ active: null });
Expand Down
2 changes: 1 addition & 1 deletion tests/unit/tabs/tabs_tickets.js
View file
Expand Up @@ -92,7 +92,7 @@ test('#6710 - selectors are global', function() {
</div>\
</div>');
container.find('#tabs_6710').tabs();
ok( container.find('#tabs-2_6710').hasClass('ui-tabs-hide'), 'should find panels and add corresponding classes' );
ok( container.find('#tabs-2_6710').is(':hidden'), 'should find panels and add corresponding classes' );
});


Expand Down
7 changes: 3 additions & 4 deletions themes/base/jquery.ui.tabs.css
View file
Expand Up @@ -11,8 +11,7 @@
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.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; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.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; }
.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... */
.ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: 0; padding-bottom: 1px; }
.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; }
.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... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }
52 changes: 25 additions & 27 deletions ui/jquery.ui.tabs.js
View file
Expand Up @@ -59,8 +59,8 @@ $.widget( "ui.tabs", {
}
});
}
if ( typeof o.active !== "number" && this.lis.filter( ".ui-tabs-selected" ).length ) {
o.active = this.lis.index( this.lis.filter( ".ui-tabs-selected" ) );
if ( typeof o.active !== "number" && this.lis.filter( ".ui-tabs-active" ).length ) {
o.active = this.lis.index( this.lis.filter( ".ui-tabs-active" ) );
}
o.active = o.active || ( this.lis.length ? 0 : -1 );
} else if ( o.active === null ) { // usage of null is deprecated, TODO remove in next release
Expand All @@ -87,16 +87,16 @@ $.widget( "ui.tabs", {
this._refresh();

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

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

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

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

_sanitizeSelector: function( hash ) {
// we need this because an id may contain a ":"
return hash.replace( /:/g, "\\:" );
return hash ? hash.replace( /:/g, "\\:" ) : "";
},

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

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

if ( this.showFx ) {
self.running = true;
show.hide().removeClass( "ui-tabs-hide" ) // avoid flicker that way
show.hide()
.animate( showFx, showFx.duration || "normal", function() {
self._resetStyle( show, showFx );
self.running = false;
self._trigger( "activate", event, self._ui( clicked, show[ 0 ] ) );
});
} else {
show.removeClass( "ui-tabs-hide" );
show.show();
self._trigger( "activate", event, self._ui( clicked, show[ 0 ] ) );
}
},
Expand All @@ -302,14 +302,13 @@ $.widget( "ui.tabs", {
self.running = true;
$hide.animate( hideFx, hideFx.duration || "normal", function() {
self.running = false;
self.lis.removeClass( "ui-tabs-selected ui-state-active" );
$hide.addClass( "ui-tabs-hide" );
self.lis.removeClass( "ui-tabs-active ui-state-active" );
self._resetStyle( $hide, hideFx );
self.element.dequeue( "tabs" );
});
} else {
self.lis.removeClass( "ui-tabs-selected ui-state-active" );
$hide.addClass( "ui-tabs-hide" );
self.lis.removeClass( "ui-tabs-active ui-state-active" );
$hide.hide();
self.element.dequeue( "tabs" );
}
},
Expand All @@ -335,17 +334,17 @@ $.widget( "ui.tabs", {
o = this.options,
clicked = $( event.currentTarget ),
$li = clicked.closest( "li" ),
$hide = self.panels.filter( ":not(.ui-tabs-hide)" ),
$hide = self.element.find( self._sanitizeSelector( $( this.active ).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 ) ||
if ( ( $li.hasClass( "ui-tabs-active" ) && !o.collapsible ) ||
// can't switch durning an animation
self.running ||
// tab is disabled
$li.hasClass( "ui-state-disabled" ) ||
// tab is already loading
$li.hasClass( "ui-state-processing" ) ||
$li.hasClass( "ui-tabs-loading" ) ||
// allow canceling by beforeActivate event
self._trigger( "beforeActivate", event, self._ui( clicked[ 0 ], $show[ 0 ] ) ) === false ) {
clicked[ 0 ].blur();
Expand All @@ -362,7 +361,7 @@ $.widget( "ui.tabs", {

// if tab may be closed
if ( o.collapsible ) {
if ( $li.hasClass( "ui-tabs-selected" ) ) {
if ( $li.hasClass( "ui-tabs-active" ) ) {
o.active = -1;
self.active = null;

Expand Down Expand Up @@ -468,13 +467,12 @@ $.widget( "ui.tabs", {
$( this ).removeClass([
"ui-state-default",
"ui-corner-top",
"ui-tabs-selected",
"ui-tabs-active",
"ui-state-active",
"ui-state-disabled",
"ui-tabs-panel",
"ui-widget-content",
"ui-corner-bottom",
"ui-tabs-hide"
"ui-corner-bottom"
].join( " " ) );
}
});
Expand Down Expand Up @@ -563,7 +561,7 @@ $.widget( "ui.tabs", {

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

this.xhr
.success( function( response ) {
Expand All @@ -582,7 +580,7 @@ $.widget( "ui.tabs", {
delete this.xhr;
}

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

self._trigger( "load", null, eventData );
});
Expand Down Expand Up @@ -774,7 +772,7 @@ if ( $.uiBackCompat !== false ) {
if ( !$panel.length ) {
$panel = self._createPanel( id );
}
$panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" );
$panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ).hide();

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

if ( this.anchors.length == 1 ) {
o.active = o.selected = 0;
$li.addClass( "ui-tabs-selected ui-state-active" );
$panel.removeClass( "ui-tabs-hide" );
$li.addClass( "ui-tabs-active ui-state-active" );
$panel.show();
this.element.queue( "tabs", function() {
self._trigger( "activate", null, self._ui( self.anchors[ 0 ], self.panels[ 0 ] ) );
});
Expand All @@ -813,7 +811,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) {
if ( $li.hasClass( "ui-tabs-active" ) && this.anchors.length > 1) {
this._activate( index + ( index + 1 < this.anchors.length ? 1 : -1 ) );
}

Expand Down

0 comments on commit e9ae04a

Please sign in to comment.