Skip to content

Commit 6e2f95f

Browse files
Danny Trunkscottgonzalez
Danny Trunk
authored and
scottgonzalez
committed
Tabs: Added heightStyle option. Fixed #8345 - Tabs: Add heightStyle option.
1 parent 2662edf commit 6e2f95f

File tree

7 files changed

+179
-0
lines changed

7 files changed

+179
-0
lines changed

‎tests/unit/tabs/tabs.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,14 @@
3131
<script src="tabs_options.js"></script>
3232

3333
<script src="../swarminject.js"></script>
34+
<style>
35+
#tabs8, #tabs8 * {
36+
margin: 0;
37+
padding: 0;
38+
font-size: 12px;
39+
line-height: 15px;
40+
}
41+
</style>
3442
</head>
3543
<body>
3644

@@ -120,6 +128,23 @@ <h2 id="qunit-userAgent"></h2>
120128
<div id="tabs7-1"></div>
121129
</div>
122130

131+
<div id="tabs8Wrapper">
132+
<div id="tabs8">
133+
<ul id="tabs8-list">
134+
<li><a href="#tabs8-1">1</a></li>
135+
<li><a href="#tabs8-2">2</a></li>
136+
</ul>
137+
<div id="tabs8-1">
138+
<p>Lorem ipsum</p>
139+
<p>Lorem ipsum</p>
140+
<p>Lorem ipsum</p>
141+
</div>
142+
<div id="tabs8-2">
143+
<p>Lorem ipsum</p>
144+
</div>
145+
</div>
146+
</div>
147+
123148
</div>
124149
</body>
125150
</html>

‎tests/unit/tabs/tabs_common.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ TestHelpers.commonWidgetTests( "tabs", {
44
collapsible: false,
55
disabled: false,
66
event: "click",
7+
heightStyle: "content",
78
hide: null,
89
show: null,
910

‎tests/unit/tabs/tabs_common_deprecated.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ TestHelpers.commonWidgetTests( "tabs", {
77
cookie: null,
88
disabled: false,
99
event: "click",
10+
heightStyle: "content",
1011
hide: null,
1112
fx: null,
1213
idPrefix: "ui-tabs-",

‎tests/unit/tabs/tabs_deprecated.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,14 @@
3030
<script src="tabs_deprecated.js"></script>
3131

3232
<script src="../swarminject.js"></script>
33+
<style>
34+
#tabs8, #tabs8 * {
35+
margin: 0;
36+
padding: 0;
37+
font-size: 12px;
38+
line-height: 15px;
39+
}
40+
</style>
3341
</head>
3442
<body>
3543

@@ -119,6 +127,23 @@ <h2 id="qunit-userAgent"></h2>
119127
<div id="tabs7-1"></div>
120128
</div>
121129

130+
<div id="tabs8Wrapper">
131+
<div id="tabs8">
132+
<ul id="tabs8-list">
133+
<li><a href="#tabs8-1">1</a></li>
134+
<li><a href="#tabs8-2">2</a></li>
135+
</ul>
136+
<div id="tabs8-1">
137+
<p>Lorem ipsum</p>
138+
<p>Lorem ipsum</p>
139+
<p>Lorem ipsum</p>
140+
</div>
141+
<div id="tabs8-2">
142+
<p>Lorem ipsum</p>
143+
</div>
144+
</div>
145+
</div>
146+
122147
</div>
123148
</body>
124149
</html>

‎tests/unit/tabs/tabs_options.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
(function( $ ) {
22

33
var disabled = TestHelpers.tabs.disabled,
4+
equalHeight = TestHelpers.tabs.equalHeight,
45
state = TestHelpers.tabs.state;
56

67
module( "tabs: options" );
@@ -211,6 +212,72 @@ test( "{ event: custom }", function() {
211212
state( element, 0, 1, 0 );
212213
});
213214

215+
test( "{ heightStyle: 'auto' }", function() {
216+
expect( 2 );
217+
var element = $( "#tabs8" ).tabs({ heightStyle: "auto" });
218+
equalHeight( element, 45 );
219+
});
220+
221+
test( "{ heightStyle: 'content' }", function() {
222+
expect( 2 );
223+
var element = $( "#tabs8" ).tabs({ heightStyle: "content" }),
224+
sizes = element.find( ".ui-tabs-panel" ).map(function() {
225+
return $( this ).height();
226+
}).get();
227+
equal( sizes[ 0 ], 45 );
228+
equal( sizes[ 1 ], 15 );
229+
});
230+
231+
test( "{ heightStyle: 'fill' }", function() {
232+
expect( 2 );
233+
$( "#tabs8Wrapper" ).height( 500 );
234+
var element = $( "#tabs8" ).tabs({ heightStyle: "fill" });
235+
equalHeight( element, 485 );
236+
});
237+
238+
test( "{ heightStyle: 'fill' } with sibling", function() {
239+
expect( 2 );
240+
$( "#tabs8Wrapper" ).height( 500 );
241+
$( "<p>Lorem Ipsum</p>" )
242+
.css({
243+
height: 50,
244+
marginTop: 20,
245+
marginBottom: 30
246+
})
247+
.prependTo( "#tabs8Wrapper" );
248+
var element = $( "#tabs8" ).tabs({ heightStyle: "fill" });
249+
equalHeight( element, 385 );
250+
});
251+
252+
test( "{ heightStyle: 'fill' } with multiple siblings", function() {
253+
expect( 2 );
254+
$( "#tabs8Wrapper" ).height( 500 );
255+
$( "<p>Lorem Ipsum</p>" )
256+
.css({
257+
height: 50,
258+
marginTop: 20,
259+
marginBottom: 30
260+
})
261+
.prependTo( "#tabs8Wrapper" );
262+
$( "<p>Lorem Ipsum</p>" )
263+
.css({
264+
height: 50,
265+
marginTop: 20,
266+
marginBottom: 30,
267+
position: "absolute"
268+
})
269+
.prependTo( "#tabs8Wrapper" );
270+
$( "<p>Lorem Ipsum</p>" )
271+
.css({
272+
height: 25,
273+
marginTop: 10,
274+
marginBottom: 15
275+
})
276+
.prependTo( "#tabs8Wrapper" );
277+
var element = $( "#tabs8" ).tabs({ heightStyle: "fill" });
278+
equalHeight( element, 335 );
279+
});
280+
214281
// TODO: add animation tests
215282

216283
}( jQuery ) );

‎tests/unit/tabs/tabs_test_helpers.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,12 @@ TestHelpers.tabs = {
3838
deepEqual( actual, expected );
3939
},
4040

41+
equalHeight: function( tabs, height ) {
42+
tabs.find( ".ui-tabs-panel" ).each(function() {
43+
equal( $( this ).outerHeight(), height );
44+
});
45+
},
46+
4147
state: function( tabs ) {
4248
var expected = $.makeArray( arguments ).slice( 1 ),
4349
actual = tabs.find( ".ui-tabs-nav li" ).map(function() {

‎ui/jquery.ui.tabs.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ $.widget( "ui.tabs", {
3434
active: null,
3535
collapsible: false,
3636
event: "click",
37+
heightStyle: "content",
3738
hide: null,
3839
show: null,
3940

@@ -150,6 +151,10 @@ $.widget( "ui.tabs", {
150151
if ( key === "event" ) {
151152
this._setupEvents( value );
152153
}
154+
155+
if ( key === "heightStyle" ) {
156+
this._setupHeightStyle( value );
157+
}
153158
},
154159

155160
_tabId: function( tab ) {
@@ -202,6 +207,7 @@ $.widget( "ui.tabs", {
202207

203208
this._setupDisabled( options.disabled );
204209
this._setupEvents( options.event );
210+
this._setupHeightStyle( options.heightStyle );
205211

206212
// remove all handlers, may run on existing tabs
207213
this.lis.unbind( ".tabs" );
@@ -290,6 +296,50 @@ $.widget( "ui.tabs", {
290296
this._bind( this.anchors, events );
291297
},
292298

299+
_setupHeightStyle: function( heightStyle ) {
300+
var maxHeight, overflow,
301+
parent = this.element.parent();
302+
303+
if ( heightStyle === "fill" ) {
304+
// IE 6 treats height like minHeight, so we need to turn off overflow
305+
// in order to get a reliable height
306+
// we use the minHeight support test because we assume that only
307+
// browsers that don't support minHeight will treat height as minHeight
308+
if ( !$.support.minHeight ) {
309+
overflow = parent.css( "overflow" );
310+
parent.css( "overflow", "hidden");
311+
}
312+
maxHeight = parent.height();
313+
this.element.siblings( ":visible" ).each(function() {
314+
var elem = $( this ),
315+
position = elem.css( "position" );
316+
317+
if ( position === "absolute" || position === "fixed" ) {
318+
return;
319+
}
320+
maxHeight -= elem.outerHeight( true );
321+
});
322+
if ( overflow ) {
323+
parent.css( "overflow", overflow );
324+
}
325+
326+
this.element.children().not( this.panels ).each(function() {
327+
maxHeight -= $( this ).outerHeight( true );
328+
});
329+
330+
this.panels.each(function() {
331+
$( this ).height( Math.max( 0, maxHeight -
332+
$( this ).innerHeight() + $( this ).height() ) );
333+
})
334+
.css( "overflow", "auto" );
335+
} else if ( heightStyle === "auto" ) {
336+
maxHeight = 0;
337+
this.panels.each(function() {
338+
maxHeight = Math.max( maxHeight, $( this ).height( "" ).height() );
339+
}).height( maxHeight );
340+
}
341+
},
342+
293343
_eventHandler: function( event ) {
294344
var options = this.options,
295345
active = this.active,
@@ -448,6 +498,10 @@ $.widget( "ui.tabs", {
448498
}
449499
});
450500

501+
if ( this.options.heightStyle !== "content" ) {
502+
this.panels.css( "height", "" );
503+
}
504+
451505
return this;
452506
},
453507

0 commit comments

Comments
 (0)