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

diff --git a/tests/unit/tabs/tabs_deprecated.js b/tests/unit/tabs/tabs_deprecated.js
index 9885ff6a02a29064caae08872ed816b087affeea..b784c724e9ac943eac91fe7ba3e213cc1e2b4629 100644 (file)
--- 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 69dcc872e36a6896d4a2635966f29c5e4e688ad5..c33bebe65daf1598d6432a18ce8d452840a28231 100644 (file)
--- 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 5196ec9bb43e0c71ad9edb2f0e02737c2dfd6d25..98cd3b4ca20b2eca03369b4394e83c4671b5b55a 100644 (file)
--- 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 9ff4d6f9259073d5d3d4d7c2e2a91fef15e22f6c..36ddd6e84d3db79380117658cfdbf22957844580 100644 (file)
--- a/tests/unit/tabs/tabs_tickets.js
+++ b/tests/unit/tabs/tabs_tickets.js
@@ -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' );
 });
 
 

diff --git a/themes/base/jquery.ui.tabs.css b/themes/base/jquery.ui.tabs.css
index 12666facd59711c84b2be780ff2634cc408f2916..d4c039f30557cc7585daee7623a0a525153320e0 100644 (file)
--- 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 066bd529951558be946cc9948a79ff822ecd2fdf..f9926ebef7a4c603539f273c5045a4e2b20e734b 100755 (executable)
--- 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 ) );
                        }