Skip to content

Commit bc65675

Browse files
scottgonzalezscottgonzalez
committed
Tabs: Fixed issues with collapsible and active options.
1 parent a337006 commit bc65675

File tree

2 files changed

+122
-45
lines changed

2 files changed

+122
-45
lines changed

‎tests/unit/tabs/tabs_options.js

Lines changed: 112 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,122 @@
1-
/*
2-
* tabs_options.js
3-
*/
4-
(function($) {
1+
(function( $ ) {
52

6-
module("tabs: options");
3+
module( "tabs: options" );
74

8-
test('collapsible', function() {
9-
expect(4);
5+
test( "{ active: default }", function() {
6+
expect( 4 );
7+
8+
var element = $( "#tabs1" ).tabs();
9+
equals( element.tabs( "option", "active" ), 0, "should be 0 by default" );
10+
tabs_state( element, 1, 0, 0 );
11+
element.tabs( "destroy" );
12+
13+
window.location.hash = "#fragment-3";
14+
element = $( "#tabs1" ).tabs();
15+
equals( element.tabs( "option", "active" ), 2, "should be 2 based on URL" );
16+
tabs_state( element, 0, 0, 1 );
17+
});
18+
19+
test( "{ active: false }", function() {
20+
expect( 7 );
21+
22+
var element = $( "#tabs1" ).tabs({
23+
active: false,
24+
collapsible: true
25+
});
26+
tabs_state( element, 0, 0, 0 );
27+
equal( element.find( ".ui-tabs-nav .ui-state-active" ).size(), 0, "no tabs selected" );
28+
strictEqual( element.tabs( "option", "active" ), false );
29+
30+
element.tabs( "option", "collapsible", false );
31+
tabs_state( element, 1, 0, 0 );
32+
equal( element.tabs( "option", "active" ), 0 );
33+
34+
element.tabs( "destroy" );
35+
element.tabs({
36+
active: false
37+
});
38+
tabs_state( element, 1, 0, 0 );
39+
strictEqual( element.tabs( "option", "active" ), 0 );
40+
});
41+
42+
test( "{ active: Number }", function() {
43+
expect( 8 );
44+
45+
var element = $( "#tabs1" ).tabs({
46+
active: 2
47+
});
48+
equals( element.tabs( "option", "active" ), 2 );
49+
tabs_state( element, 0, 0, 1 );
50+
51+
element.tabs( "option", "active", 0 );
52+
equals( element.tabs( "option", "active" ), 0 );
53+
tabs_state( element, 1, 0, 0 );
1054

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

13-
el.tabs({ collapsible: true });
14-
equals(el.tabs('option', 'collapsible'), true, 'option set');
15-
ok(el.is('.ui-tabs-collapsible'), 'extra class "ui-tabs-collapsible" attached');
59+
element.tabs( "option", "active", 10 );
60+
equals( element.tabs( "option", "active" ), 1 );
61+
tabs_state( element, 0, 1, 0 );
62+
});
63+
64+
if ( $.uiBackCompat === false ) {
65+
test( "{ active: -Number }", function() {
66+
var element = $( "#tabs1" ).tabs({
67+
active: -1
68+
});
69+
equals( element.tabs( "option", "active" ), 2 );
70+
tabs_state( element, 0, 0, 1 );
71+
72+
element.tabs( "option", "active", -2 );
73+
equals( element.tabs( "option", "active" ), 1 );
74+
tabs_state( element, 0, 1, 0 );
75+
76+
element.tabs( "option", "active", -10 );
77+
equals( element.tabs( "option", "active" ), 1 );
78+
tabs_state( element, 0, 1, 0 );
79+
80+
element.tabs( "option", "active", -3 );
81+
equals( element.tabs( "option", "active" ), 0 );
82+
tabs_state( element, 1, 0, 0 );
83+
});
84+
}
85+
86+
test( "{ collapsible: false }", function() {
87+
expect( 4 );
88+
89+
var element = $( "#tabs1" ).tabs({
90+
active: 1
91+
});
92+
element.tabs( "option", "active", false );
93+
equal( element.tabs( "option", "active" ), 1 );
94+
tabs_state( element, 0, 1, 0 );
95+
96+
element.find( ".ui-state-active a" ).eq( 1 ).click();
97+
equal( element.tabs( "option", "active" ), 1 );
98+
tabs_state( element, 0, 1, 0 );
99+
});
100+
101+
test( "{ collapsible: true }", function() {
102+
expect( 6 );
103+
104+
var element = $( "#tabs1" ).tabs({
105+
active: 1,
106+
collapsible: true
107+
});
16108

17-
el.tabs('option', 'active', false);
18-
equals($('div:hidden', '#tabs1').length, 3, 'all panels should be hidden');
109+
element.tabs( "option", "active", false );
110+
equal( element.tabs( "option", "active" ), false );
111+
tabs_state( element, 0, 0, 0 );
19112

20-
el.tabs('option', 'collapsible', false);
21-
ok(el.is(':not(.ui-tabs-collapsible)'), 'extra class "ui-tabs-collapsible" not attached');
113+
element.tabs( "option", "active", 1 );
114+
equal( element.tabs( "option", "active" ), 1 );
115+
tabs_state( element, 0, 1, 0 );
22116

117+
element.find( ".ui-state-active a" ).click();
118+
equal( element.tabs( "option", "active" ), false );
119+
tabs_state( element, 0, 0, 0 );
23120
});
24121

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

49-
test('active', function() {
50-
expect(8);
51-
52-
el = $('#tabs1').tabs();
53-
equals(el.tabs('option', 'active'), 0, 'should be 0 by default');
54-
55-
el.tabs('destroy');
56-
el.tabs({ active: false });
57-
equals(el.tabs('option', 'active'), false, 'should be false for all tabs deactive');
58-
equals( $('li.ui-tabs-active', el).length, 0, 'no tab should be active' );
59-
equals( $('div:hidden', '#tabs1').length, 3, 'all panels should be hidden' );
60-
61-
el.tabs('destroy');
62-
el.tabs({ active: null });
63-
equals(el.tabs('option', 'active'), false, 'should be false for all tabs deactive with value null (deprecated)');
64-
65-
el.tabs('destroy');
66-
el.tabs({ active: 1 });
67-
equals(el.tabs('option', 'active'), 1, 'should be specified tab');
68-
69-
el.tabs('destroy');
70-
el.tabs({ active: 99 });
71-
equals(el.tabs('option', 'active'), 0, 'active should default to zero if given value is out of index');
72-
73-
el.tabs('destroy');
74-
el.tabs({ collapsible: true });
75-
el.tabs('option', 'active', 0);
76-
equals(el.tabs('option', 'active'), 0, 'should not collapse tab if value is same as active');
77-
});
78-
79146
})(jQuery);

‎ui/jquery.ui.tabs.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,11 @@ $.widget( "ui.tabs", {
7878
}
7979
options.active = active;
8080

81+
// don't allow collapsible: false and active: false
82+
if ( !options.collapsible && options.active === false ) {
83+
options.active = 0;
84+
}
85+
8186
// Take disabling tabs via class attribute from HTML
8287
// into account and update option properly.
8388
if ( $.isArray( options.disabled ) ) {
@@ -123,6 +128,11 @@ $.widget( "ui.tabs", {
123128
return;
124129
}
125130

131+
// setting collapsible: false while collapsed; open first panel
132+
if ( key === "collapsible" && !value && this.options.active === false ) {
133+
this._activate( 0 );
134+
}
135+
126136
this.options[ key ] = value;
127137
this.refresh();
128138
},

0 commit comments

Comments
 (0)