mirror of
https://github.com/jquery/jquery-ui.git
synced 2025-01-07 20:34:24 +00:00
Tabs: Fixed issues with collapsible and active options.
This commit is contained in:
Scott González
parent
a3370064d8
commit
bc65675330
@ -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 );
|
||||
|
||||
el = $('#tabs1');
|
||||
var element = $( "#tabs1" ).tabs();
|
||||
equals( element.tabs( "option", "active" ), 0, "should be 0 by default" );
|
||||
tabs_state( element, 1, 0, 0 );
|
||||
element.tabs( "destroy" );
|
||||
|
||||
el.tabs({ collapsible: true });
|
||||
equals(el.tabs('option', 'collapsible'), true, 'option set');
|
||||
ok(el.is('.ui-tabs-collapsible'), 'extra class "ui-tabs-collapsible" attached');
|
||||
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 );
|
||||
});
|
||||
|
||||
el.tabs('option', 'active', false);
|
||||
equals($('div:hidden', '#tabs1').length, 3, 'all panels should be hidden');
|
||||
test( "{ active: false }", function() {
|
||||
expect( 7 );
|
||||
|
||||
el.tabs('option', 'collapsible', false);
|
||||
ok(el.is(':not(.ui-tabs-collapsible)'), 'extra class "ui-tabs-collapsible" not attached');
|
||||
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 );
|
||||
|
||||
element.find( ".ui-tabs-nav a" ).eq( 1 ).click();
|
||||
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 );
|
||||
});
|
||||
|
||||
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
|
||||
});
|
||||
|
||||
element.tabs( "option", "active", false );
|
||||
equal( element.tabs( "option", "active" ), false );
|
||||
tabs_state( element, 0, 0, 0 );
|
||||
|
||||
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);
|
||||
|
||||
10
ui/jquery.ui.tabs.js
vendored
10
ui/jquery.ui.tabs.js
vendored
@ -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();
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user