library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Tabs: CSS Consistency Updates. Fixes #7146 Tabs: CSS Consistency Updates

Browse Source
This commit is contained in:
David Petersen 2011-03-29 07:44:01 -04:00
parent cb0588f2dd
commit e9ae04a394
6 changed files with 45 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

7
themes/base/jquery.ui.tabs.css vendored
View File

@ -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
ui/jquery.ui.tabs.js vendored
View File

@ -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
@ -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() {
@ -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 ) {
@ -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 ] ) );
}
},
@ -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" );
}
},
@ -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();
@ -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;
@ -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( " " ) );
}
});
@ -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 ) {
@ -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 );
});
@ -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 );
@ -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 ] ) );
});
@ -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 ) );
}