diff options
| -rw-r--r-- | tests/unit/tabs/tabs_methods.js | 116 | ||||
| -rwxr-xr-x | ui/jquery.ui.tabs.js | 36 |
2 files changed, 81 insertions, 71 deletions
diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/tabs_methods.js index 9d6864218..361ace45b 100644 --- a/tests/unit/tabs/tabs_methods.js +++ b/tests/unit/tabs/tabs_methods.js @@ -85,55 +85,73 @@ test( "disable( index )", function() { tabs_disabled( element, true ); }); -test('refresh', function() { - expect( 13 ); - - var el = $('<div id="tabs"><ul></ul></div>').tabs(), - ul = el.find('ul'); - - equals(el.tabs('option', 'active'), false, 'Initially empty, no active tab'); - - ul.append('<li><a href="data/test.html">Test 1</a></li>'); - el.tabs('refresh'); - equals( el.tabs('option', 'active'), 0, 'First tab added should be auto active'); - ok( $( "li:eq(0)", el).is('.ui-tabs-active'), 'First tab should be auto active'); - equals( el.find('.ui-tabs-panel').length, 1, 'Panel created after refresh'); - - ul.find('li').remove(); - el.tabs('refresh'); - equals( el.find('.ui-tabs-panel').length, 0, 'Panel removed after refresh'); - equals( el.tabs('option', 'active'), false, 'No tabs are active'); - - // Hide second tab - $('<li><a href="#test1">Test 1</a></li><li><a href="#test2">Test 2</a></li><li><a href="#test3">Test 3</a></li>') - .appendTo( ul ); - $('<div id="test1">Test Panel 1</div><div id="test2">Test Panel 2</div><div id="test3">Test Panel 3</div>') - .insertAfter( ul ); - el.tabs('refresh'); - equals( el.tabs('option', 'active'), 0, 'Second tab added should not be auto active'); - equals( $( "#test2", el ).css("display"), "none", 'Second panel is hidden'); - - // Make second tab active and then remove the first one - el.tabs('option', 'active', 1); - el.find('a[href="#test1"]').parent().remove(); - el.tabs('refresh'); - equals( el.tabs('option', 'active'), 0, 'Active index correctly updated'); - ok( el.find('a[href="#test2"]').parent().is('.ui-tabs-active'), 'Tab is still active'); - - // Refresh with disabled tabs - el.tabs('disable', 1); - same( el.tabs('option', 'disabled'), [ 1 ], 'Second tab disabled'); - - el.find('a[href="#test3"]').remove(); - ul.append('<li><a href="#test4">Test 4</a></li>'); - $('<div id="test4">Test Panel 4</div>').insertAfter( ul ); - el.tabs('refresh'); - equals( el.tabs('option', 'disabled'), false, 'Not disabled'); - - ul.append('<li class="ui-state-disabled"><a href="#test3">Test 3</a></li>'); - $('<div id="test3">Test Panel 3</div>').insertAfter( ul ); - el.tabs('refresh'); - same( el.tabs('option', 'disabled'), [ 2 ], 'Second tab disabled'); +test( "refersh", function() { + expect( 27 ); + + var element = $( "#tabs1" ).tabs(); + tabs_state( element, 1, 0, 0 ); + tabs_disabled( element, false ); + + // disable tab via markup + element.find( ".ui-tabs-nav li" ).eq( 1 ).addClass( "ui-state-disabled" ); + element.tabs( "refresh" ); + tabs_state( element, 1, 0, 0 ); + tabs_disabled( element, [ 1 ] ); + + // add remote tab + element.find( ".ui-tabs-nav" ).append( "<li id='newTab'><a href='data/test.html'>new</a></li>" ); + element.tabs( "refresh" ); + tabs_state( element, 1, 0, 0, 0 ); + tabs_disabled( element, [ 1 ] ); + equals( element.find( "#" + $( "#newTab a" ).attr( "aria-controls" ) ).length, 1, + "panel added for remote tab" ); + + // remove all tabs + element.find( ".ui-tabs-nav li, .ui-tabs-panel" ).remove(); + element.tabs( "refresh" ); + tabs_state( element ); + equals( element.tabs( "option", "active" ), false, "no active tab" ); + + // add tabs + element.find( ".ui-tabs-nav" ) + .append( "<li class='ui-state-disabled'><a href='#newTab2'>new 2</a></li>" ) + .append( "<li><a href='#newTab3'>new 3</a></li>" ) + .append( "<li><a href='#newTab4'>new 4</a></li>" ) + .append( "<li><a href='#newTab5'>new 5</a></li>" ); + element + .append( "<div id='newTab2'>new 2</div>" ) + .append( "<div id='newTab3'>new 3</div>" ) + .append( "<div id='newTab4'>new 4</div>" ) + .append( "<div id='newTab5'>new 5</div>" ); + element.tabs( "refresh" ); + tabs_state( element, 0, 0, 0, 0 ); + tabs_disabled( element, [ 0 ] ); + + // activate third tab + element.tabs( "option", "active", 2 ); + tabs_state( element, 0, 0, 1, 0 ); + tabs_disabled( element, [ 0 ] ); + + // remove fourth tab, third tab should stay active + element.find( ".ui-tabs-nav li" ).eq( 3 ).remove(); + element.find( ".ui-tabs-panel" ).eq( 3 ).remove(); + element.tabs( "refresh" ); + tabs_state( element, 0, 0, 1 ); + tabs_disabled( element, [ 0 ] ); + + // remove third (active) tab, second tab should become active + element.find( ".ui-tabs-nav li" ).eq( 2 ).remove(); + element.find( ".ui-tabs-panel" ).eq( 2 ).remove(); + element.tabs( "refresh" ); + tabs_state( element, 0, 1 ); + tabs_disabled( element, [ 0 ] ); + + // remove first tab, previously active tab (now first) should stay active + element.find( ".ui-tabs-nav li" ).eq( 0 ).remove(); + element.find( ".ui-tabs-panel" ).eq( 0 ).remove(); + element.tabs( "refresh" ); + tabs_state( element, 1 ); + tabs_disabled( element, false ); }); test('load', function() { diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js index c7483e0de..490ca71a3 100755 --- a/ui/jquery.ui.tabs.js +++ b/ui/jquery.ui.tabs.js @@ -172,51 +172,43 @@ $.widget( "ui.tabs", { refresh: function() { var self = this, options = this.options, - lis = $( " > li:has(a[href])", this.list ); + lis = this.list.children( ":has(a[href])" ); - // Get disabled tabs from class attribute from HTML - options.disabled = $.map( lis.filter( ".ui-state-disabled" ), function( n ) { - return lis.index( n ); + // get disabled tabs from class attribute from HTML + // this will get converted to a boolean if needed in _refresh() + options.disabled = $.map( lis.filter( ".ui-state-disabled" ), function( tab ) { + return lis.index( tab ); }); this._processTabs(); - this._refresh(); - - // Remove panels that we created that are missing their tab - this.element.find(".ui-tabs-panel:data(destroy.tabs)").each( function( index, panel ) { - var anchor = self.anchors.filter( "[aria-controls='" + panel.id + "']"); - if ( !anchor.length ) { - $( panel ).remove(); - } - }); - this.panels.not( this._getPanelForTab( this.active ) ).hide(); - if ( !this.anchors.length ) { + // was collapsed or no tabs + if ( options.active === false || !this.anchors.length ) { options.active = false; this.active = $(); - } else if ( !this.active || ( this.active && !$.contains( this.list[ 0 ], this.active[ 0 ] ) ) ) { - // Activate previous tab + // was active, but active tab is gone + } else if ( this.active.length && !$.contains( this.list[ 0 ], this.active[ 0 ] ) ) { + // activate previous tab var next = options.active - 1; this._activate( next >= 0 ? next : 0 ); + // was active, active tab still exists } else { - // Make sure active index is correct + // make sure active index is correct options.active = this.anchors.index( this.active ); } }, _refresh: function() { - var that = this, - options = that.options; + var options = this.options; this.element.toggleClass( "ui-tabs-collapsible", options.collapsible ); - this.list.addClass("ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" ); + this.list.addClass( "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" ); this.lis.addClass( "ui-state-default ui-corner-top" ); this.panels.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ); this._setupDisabled( options.disabled ); - this._setupEvents( options.event ); // remove all handlers, may run on existing tabs |