]> source.dussan.org Git - jquery-ui.git/commitdiff
Tabs: Cleaned up add and remove methods.
authorScott González <scott.gonzalez@gmail.com>
Fri, 29 Apr 2011 01:35:04 +0000 (21:35 -0400)
committerScott González <scott.gonzalez@gmail.com>
Fri, 29 Apr 2011 01:35:04 +0000 (21:35 -0400)
tests/unit/tabs/tabs.html
tests/unit/tabs/tabs_deprecated.html
tests/unit/tabs/tabs_deprecated.js
ui/jquery.ui.tabs.js

index 3e38f5f254d6d465380b4fc5a7420798df59e02a..565a0b427c618971ec2cdadd258bd6c5c0494b98 100644 (file)
@@ -34,7 +34,7 @@
                                panel = $( $.ui.tabs.prototype._sanitizeSelector(
                                        "#" + tab.find( "a" ).attr( "aria-controls" ) ) ),
                                tabIsActive = tab.hasClass( "ui-state-active" ),
-                               panelIsActive = panel.is( ":visible" );
+                               panelIsActive = panel.css( "display" ) !== "none";
 
                        if ( tabIsActive && panelIsActive ) {
                                return 1;
index aae11c33d8450b31bce4e325c303873189488678..e71fea3d4826a500246981cabeea48ae33ef997a 100644 (file)
@@ -33,7 +33,7 @@
                                panel = $( $.ui.tabs.prototype._sanitizeSelector(
                                        "#" + tab.find( "a" ).attr( "aria-controls" ) ) ),
                                tabIsActive = tab.hasClass( "ui-state-active" ),
-                               panelIsActive = panel.is( ":visible" );
+                               panelIsActive = panel.css( "display" ) !== "none";
 
                        if ( tabIsActive && panelIsActive ) {
                                return 1;
index c221868fc0002a55d3ff4574a8a18b35b8aa4945..359847d146084fa501cc687a592602814fd6d2b9 100644 (file)
@@ -247,42 +247,78 @@ test('select', function() {
        equals( evenObj.originalEvent.type, "click", "select triggered by click" );
 });
 
-module("tabs (deprecated): methods");
-
-test('add', function() {
-       expect(4);
-
-       el = $('#tabs1').tabs();
-       el.tabs('add', '#new', 'New');
-
-       var added = $('li:last', el).simulate('mouseover');
-       ok(added.is('.ui-state-hover'), 'should add mouseover handler to added tab');
-       added.simulate('mouseout');
-       var other = $('li:first', el).simulate('mouseover');
-       ok(other.is('.ui-state-hover'), 'should not remove mouseover handler from existing tab');
-       other.simulate('mouseout');
+module( "tabs (deprecated): methods" );
+
+test( "add", function() {
+       expect( 18 );
+
+       var element = $( "#tabs1" ).tabs();
+       tabs_state( element, 1, 0, 0 );
+
+       // add without index
+       element.tabs( "add", "#new", "New" );
+       tabs_state( element, 1, 0, 0, 0 );
+       var tab = element.find( ".ui-tabs-nav li" ).last(),
+               anchor = tab.find( "a" );
+       equals( tab.text(), "New", "label" );
+       equals( anchor.attr( "href" ), "#new", "href" );
+       equals( anchor.attr( "aria-controls" ), "new", "aria-controls" );
+       ok( !tab.hasClass( "ui-state-hover" ), "not hovered" );
+       anchor.simulate( "mouseover" );
+       ok( tab.hasClass( "ui-state-hover" ), "hovered" );
+       anchor.simulate( "click" );
+       tabs_state( element, 0, 0, 0, 1 );
+
+       // add remote tab with index
+       element.tabs( "add", "data/test.html", "New Remote", 1 );
+       tabs_state( element, 0, 0, 0, 0, 1 );
+       tab = element.find( ".ui-tabs-nav li" ).eq( 1 );
+       anchor = tab.find( "a" );
+       equals( tab.text(), "New Remote", "label" );
+       equals( anchor.attr( "href" ), "data/test.html", "href" );
+       ok( /^ui-tabs-\d+$/.test( anchor.attr( "aria-controls" ) ), "aria controls" );
+       ok( !tab.hasClass( "ui-state-hover" ), "not hovered" );
+       anchor.simulate( "mouseover" );
+       ok( tab.hasClass( "ui-state-hover" ), "hovered" );
+       anchor.simulate( "click" );
+       tabs_state( element, 0, 1, 0, 0, 0 );
+
+       // add to empty tab set
+       element = $( "<div><ul></ul></div>" ).tabs();
+       equals( element.tabs( "option", "active" ), false, "active: false on init" );
+       element.tabs( "add", "#first", "First" );
+       tabs_state( element, 1 );
+       equals( element.tabs( "option", "active" ), 0, "active: 0 after add" );
+});
 
-       equals($('a', added).attr('href'), '#new', 'should not expand href to full url of current page');
+test( "#5069 - ui.tabs.add creates two tab panels when using a full URL", function() {
+       expect( 2 );
 
-       ok(false, "missing test - untested code is broken code.");
+       var element = $( "#tabs2" ).tabs();
+       equals( element.children( "div" ).length, element.find( ".ui-tabs-nav li" ).length );
+       element.tabs( "add", "/new", "New" );
+       equals( element.children( "div" ).length, element.find( ".ui-tabs-nav li" ).length );
 });
 
-test('remove', function() {
-       expect(4);
+test( "remove", function() {
+       expect( 8 );
 
-       el = $('#tabs1').tabs();
+       var element = $( "#tabs1" ).tabs({ active: 1 });
+       tabs_state( element, 0, 1, 0 );
 
-       el.tabs('remove', 0);
-       equals(el.tabs('length'), 2, 'remove tab');
-       equals($('li a[href$="fragment-1"]', el).length, 0, 'remove associated list item');
-       equals($('#fragment-1').length, 0, 'remove associated panel');
+       element.tabs( "remove", 1 );
+       tabs_state( element, 0, 1 );
+       equals( element.tabs( "option", "active" ), 1 );
+       equals( element.find( ".ui-tabs-nav li a[href$='fragment-2']" ).length, 0,
+               "remove correct list item" );
+       equals( element.find( "#fragment-2" ).length, 0, "remove correct panel" );
 
-       // TODO delete tab -> focus tab to right
-       // TODO delete last tab -> focus tab to left
+       element.tabs( "remove", 1 );
+       tabs_state( element, 1 );
+       equals( element.tabs( "option", "active"), 0 );
 
-       el.tabs('select', 1);
-       el.tabs('remove', 1);
-       equals(el.tabs('option', 'selected'), 0, 'update selected property');
+       element.tabs( "remove", 0 );
+       equals( element.tabs( "option", "active" ), false );
 });
 
 test('select', function() {
@@ -314,17 +350,6 @@ test('select', function() {
        equals(el.tabs('option', 'active'), 1, 'should select tab by id');
 });
 
-
-test('#5069 - ui.tabs.add creates two tab panels when using a full URL', function() {
-       // http://dev.jqueryui.com/ticket/5069
-       expect(2);
-
-       el = $('#tabs2').tabs();
-       equals(el.children('div').length, el.find('> ul > li').length, 'After creation, number of panels should be equal to number of tabs');
-       el.tabs('add', '/ajax_html_echo', 'Test');
-       equals(el.children('div').length, el.find('> ul > li').length, 'After add, number of panels should be equal to number of tabs');
-});
-
 test( "length", function() {
        expect( 2 );
 
index 490ca71a3d9a6c7b253743f895fa473cef67fba9..7946cc6673b5de72f02bb026c2d6265414a8d4cb 100755 (executable)
@@ -826,33 +826,39 @@ if ( $.uiBackCompat !== false ) {
                                index = this.anchors.length;
                        }
 
-                       var self = this,
-                               o = this.options,
-                               $li = $( o.tabTemplate.replace( /#\{href\}/g, url ).replace( /#\{label\}/g, label ) ),
-                               id = !url.indexOf( "#" ) ? url.replace( "#", "" ) : this._tabId( $( "a", $li )[ 0 ] );
+                       var options = this.options,
+                               li = $( options.tabTemplate
+                                       .replace( /#\{href\}/g, url )
+                                       .replace( /#\{label\}/g, label ) ),
+                               id = !url.indexOf( "#" ) ?
+                                       url.replace( "#", "" ) :
+                                       this._tabId( li.find( "a" )[ 0 ] );
 
-                       $li.addClass( "ui-state-default ui-corner-top" ).data( "destroy.tabs", true );
+                       li.addClass( "ui-state-default ui-corner-top" ).data( "destroy.tabs", true );
+                       li.find( "a" ).attr( "aria-controls", id );
 
                        // try to find an existing element before creating a new one
-                       var $panel = self.element.find( "#" + id );
-                       if ( !$panel.length ) {
-                               $panel = self._createPanel( id );
+                       var panel = this.element.find( "#" + id );
+                       if ( !panel.length ) {
+                               panel = this._createPanel( id );
                        }
-                       $panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ).hide();
+                       panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ).hide();
 
                        if ( index >= this.lis.length ) {
-                               $li.appendTo( this.list );
-                               $panel.appendTo( this.list[ 0 ].parentNode );
+                               li.appendTo( this.list );
+                               panel.appendTo( this.list[ 0 ].parentNode );
                        } else {
-                               $li.insertBefore( this.lis[ index ] );
-                               $panel.insertBefore( this.panels[ index ] );
+                               li.insertBefore( this.lis[ index ] );
+                               panel.insertBefore( this.panels[ index ] );
                        }
-
-                       o.disabled = $.map( o.disabled, function( n, i ) {
+                       options.disabled = $.map( options.disabled, function( n ) {
                                return n >= index ? ++n : n;
                        });
 
                        this.refresh();
+                       if ( this.lis.length === 1 && options.active === false ) {
+                               this.option( "active", 0 );
+                       }
 
                        this._trigger( "add", null, this._ui( this.anchors[ index ], this.panels[ index ] ) );
                        return this;
@@ -860,27 +866,27 @@ if ( $.uiBackCompat !== false ) {
 
                prototype.remove = function( index ) {
                        index = this._getIndex( index );
-                       var o = this.options,
-                               $li = this.lis.eq( index ).remove(),
-                               $panel = this.panels.eq( index ).remove();
+                       var options = this.options,
+                               tab = this.lis.eq( index ).remove(),
+                               panel = this.panels.eq( index ).remove();
 
                        // 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-active" ) && this.anchors.length > 1) {
+                       if ( tab.hasClass( "ui-tabs-active" ) && this.anchors.length > 1) {
                                this._activate( index + ( index + 1 < this.anchors.length ? 1 : -1 ) );
                        }
 
-                       o.disabled = $.map(
-                               $.grep( o.disabled, function(n, i) {
-                                       return n != index;
+                       options.disabled = $.map(
+                               $.grep( options.disabled, function( n ) {
+                                       return n !== index;
                                }),
-                               function( n, i ) {
+                               function( n ) {
                                        return n >= index ? --n : n;
                                });
 
                        this.refresh();
 
-                       this._trigger( "remove", null, this._ui( $li.find( "a" )[ 0 ], $panel[ 0 ] ) );
+                       this._trigger( "remove", null, this._ui( tab.find( "a" )[ 0 ], panel[ 0 ] ) );
                        return this;
                };
        }( jQuery, jQuery.ui.tabs.prototype ) );