From bc65675330e758c406098e929ee8b4c1741c87fd Mon Sep 17 00:00:00 2001 From: =?utf8?q?Scott=20Gonz=C3=A1lez?= Date: Mon, 11 Apr 2011 13:49:22 -0400 Subject: [PATCH] Tabs: Fixed issues with collapsible and active options. --- tests/unit/tabs/tabs_options.js | 157 +++++++++++++++++++++++--------- ui/jquery.ui.tabs.js | 10 ++ 2 files changed, 122 insertions(+), 45 deletions(-) diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js index ce556fc3e..3cce96e1c 100644 --- a/tests/unit/tabs/tabs_options.js +++ b/tests/unit/tabs/tabs_options.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); diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js index 646854f49..699c1a5ee 100755 --- a/ui/jquery.ui.tabs.js +++ b/ui/jquery.ui.tabs.js @@ -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(); }, -- 2.39.5