Skip to content
Permalink
Browse files

Tabs: Fixed issues with collapsible and active options.

  • Loading branch information
scottgonzalez committed Apr 11, 2011
1 parent a337006 commit bc65675330e758c406098e929ee8b4c1741c87fd
Showing with 122 additions and 45 deletions.
  1. +112 −45 tests/unit/tabs/tabs_options.js
  2. +10 −0 ui/jquery.ui.tabs.js
@@ -1,25 +1,122 @@
/*
* tabs_options.js
*/
(function($) {
(function( $ ) {

module("tabs: options");
module( "tabs: options" );

test('collapsible', function() {
expect(4);
test( "{ active: default }", function() {
expect( 4 );

var element = $( "#tabs1" ).tabs();
equals( element.tabs( "option", "active" ), 0, "should be 0 by default" );
tabs_state( element, 1, 0, 0 );
element.tabs( "destroy" );

window.location.hash = "#fragment-3";
element = $( "#tabs1" ).tabs();
equals( element.tabs( "option", "active" ), 2, "should be 2 based on URL" );
tabs_state( element, 0, 0, 1 );
});

test( "{ active: false }", function() {
expect( 7 );

var element = $( "#tabs1" ).tabs({
active: false,
collapsible: true
});
tabs_state( element, 0, 0, 0 );
equal( element.find( ".ui-tabs-nav .ui-state-active" ).size(), 0, "no tabs selected" );
strictEqual( element.tabs( "option", "active" ), false );

element.tabs( "option", "collapsible", false );
tabs_state( element, 1, 0, 0 );
equal( element.tabs( "option", "active" ), 0 );

element.tabs( "destroy" );
element.tabs({
active: false
});
tabs_state( element, 1, 0, 0 );
strictEqual( element.tabs( "option", "active" ), 0 );
});

test( "{ active: Number }", function() {
expect( 8 );

var element = $( "#tabs1" ).tabs({
active: 2
});
equals( element.tabs( "option", "active" ), 2 );
tabs_state( element, 0, 0, 1 );

element.tabs( "option", "active", 0 );
equals( element.tabs( "option", "active" ), 0 );
tabs_state( element, 1, 0, 0 );

el = $('#tabs1');
element.find( ".ui-tabs-nav a" ).eq( 1 ).click();
equals( element.tabs( "option", "active" ), 1 );
tabs_state( element, 0, 1, 0 );

el.tabs({ collapsible: true });
equals(el.tabs('option', 'collapsible'), true, 'option set');
ok(el.is('.ui-tabs-collapsible'), 'extra class "ui-tabs-collapsible" attached');
element.tabs( "option", "active", 10 );
equals( element.tabs( "option", "active" ), 1 );
tabs_state( element, 0, 1, 0 );
});

if ( $.uiBackCompat === false ) {
test( "{ active: -Number }", function() {
var element = $( "#tabs1" ).tabs({
active: -1
});
equals( element.tabs( "option", "active" ), 2 );
tabs_state( element, 0, 0, 1 );

element.tabs( "option", "active", -2 );
equals( element.tabs( "option", "active" ), 1 );
tabs_state( element, 0, 1, 0 );

element.tabs( "option", "active", -10 );
equals( element.tabs( "option", "active" ), 1 );
tabs_state( element, 0, 1, 0 );

element.tabs( "option", "active", -3 );
equals( element.tabs( "option", "active" ), 0 );
tabs_state( element, 1, 0, 0 );
});
}

test( "{ collapsible: false }", function() {
expect( 4 );

var element = $( "#tabs1" ).tabs({
active: 1
});
element.tabs( "option", "active", false );
equal( element.tabs( "option", "active" ), 1 );
tabs_state( element, 0, 1, 0 );

element.find( ".ui-state-active a" ).eq( 1 ).click();
equal( element.tabs( "option", "active" ), 1 );
tabs_state( element, 0, 1, 0 );
});

test( "{ collapsible: true }", function() {
expect( 6 );

var element = $( "#tabs1" ).tabs({
active: 1,
collapsible: true
});

el.tabs('option', 'active', false);
equals($('div:hidden', '#tabs1').length, 3, 'all panels should be hidden');
element.tabs( "option", "active", false );
equal( element.tabs( "option", "active" ), false );
tabs_state( element, 0, 0, 0 );

el.tabs('option', 'collapsible', false);
ok(el.is(':not(.ui-tabs-collapsible)'), 'extra class "ui-tabs-collapsible" not attached');
element.tabs( "option", "active", 1 );
equal( element.tabs( "option", "active" ), 1 );
tabs_state( element, 0, 1, 0 );

element.find( ".ui-state-active a" ).click();
equal( element.tabs( "option", "active" ), false );
tabs_state( element, 0, 0, 0 );
});

test('disabled', function() {
@@ -46,34 +143,4 @@ test('fx', function() {
ok(false, "missing test - untested code is broken code.");
});

test('active', function() {
expect(8);

el = $('#tabs1').tabs();
equals(el.tabs('option', 'active'), 0, 'should be 0 by default');

el.tabs('destroy');
el.tabs({ active: false });
equals(el.tabs('option', 'active'), false, 'should be false for all tabs deactive');
equals( $('li.ui-tabs-active', el).length, 0, 'no tab should be active' );
equals( $('div:hidden', '#tabs1').length, 3, 'all panels should be hidden' );

el.tabs('destroy');
el.tabs({ active: null });
equals(el.tabs('option', 'active'), false, 'should be false for all tabs deactive with value null (deprecated)');

el.tabs('destroy');
el.tabs({ active: 1 });
equals(el.tabs('option', 'active'), 1, 'should be specified tab');

el.tabs('destroy');
el.tabs({ active: 99 });
equals(el.tabs('option', 'active'), 0, 'active should default to zero if given value is out of index');

el.tabs('destroy');
el.tabs({ collapsible: true });
el.tabs('option', 'active', 0);
equals(el.tabs('option', 'active'), 0, 'should not collapse tab if value is same as active');
});

})(jQuery);
@@ -78,6 +78,11 @@ $.widget( "ui.tabs", {
}
options.active = active;

// don't allow collapsible: false and active: false
if ( !options.collapsible && options.active === false ) {
options.active = 0;
}

// Take disabling tabs via class attribute from HTML
// into account and update option properly.
if ( $.isArray( options.disabled ) ) {
@@ -123,6 +128,11 @@ $.widget( "ui.tabs", {
return;
}

// setting collapsible: false while collapsed; open first panel
if ( key === "collapsible" && !value && this.options.active === false ) {
this._activate( 0 );
}

this.options[ key ] = value;
this.refresh();
},

0 comments on commit bc65675

Please sign in to comment.
You can’t perform that action at this time.