From e9ae04a394e63e5b012f28fc40a04e71c4f935d9 Mon Sep 17 00:00:00 2001 From: David Petersen Date: Tue, 29 Mar 2011 07:44:01 -0400 Subject: [PATCH] Tabs: CSS Consistency Updates. Fixes #7146 Tabs: CSS Consistency Updates --- tests/unit/tabs/tabs_deprecated.js | 2 +- tests/unit/tabs/tabs_methods.js | 26 +++++++-------- tests/unit/tabs/tabs_options.js | 4 +-- tests/unit/tabs/tabs_tickets.js | 2 +- themes/base/jquery.ui.tabs.css | 7 ++-- ui/jquery.ui.tabs.js | 52 ++++++++++++++---------------- 6 files changed, 45 insertions(+), 48 deletions(-) diff --git a/tests/unit/tabs/tabs_deprecated.js b/tests/unit/tabs/tabs_deprecated.js index 9885ff6a0..b784c724e 100644 --- a/tests/unit/tabs/tabs_deprecated.js +++ b/tests/unit/tabs/tabs_deprecated.js @@ -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 }); diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/tabs_methods.js index 69dcc872e..c33bebe65 100644 --- a/tests/unit/tabs/tabs_methods.js +++ b/tests/unit/tabs/tabs_methods.js @@ -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'); }); diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js index 5196ec9bb..98cd3b4ca 100644 --- a/tests/unit/tabs/tabs_options.js +++ b/tests/unit/tabs/tabs_options.js @@ -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 }); diff --git a/tests/unit/tabs/tabs_tickets.js b/tests/unit/tabs/tabs_tickets.js index 9ff4d6f92..36ddd6e84 100644 --- a/tests/unit/tabs/tabs_tickets.js +++ b/tests/unit/tabs/tabs_tickets.js @@ -92,7 +92,7 @@ test('#6710 - selectors are global', function() { \ '); 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' ); }); diff --git a/themes/base/jquery.ui.tabs.css b/themes/base/jquery.ui.tabs.css index 12666facd..d4c039f30 100644 --- a/themes/base/jquery.ui.tabs.css +++ b/themes/base/jquery.ui.tabs.css @@ -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; } diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js index 066bd5299..f9926ebef 100755 --- a/ui/jquery.ui.tabs.js +++ b/ui/jquery.ui.tabs.js @@ -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 ) ); } -- 2.39.5