Tabs: Added heightStyle option. Fixed #8345 - Tabs: Add heightStyle o…

…ption.
jquery · May 28, 2012 · 6e2f95f59d73d86a2b84faecba3fca593534b8c9 · 6e2f95f
1 parent 2662edf
commit 6e2f95f59d73d86a2b84faecba3fca593534b8c9
diff --git a/tests/unit/tabs/tabs.html b/tests/unit/tabs/tabs.html
@@ -31,6 +31,14 @@
 	<script src="tabs_options.js"></script>
 
 	<script src="../swarminject.js"></script>
+	<style>
+	#tabs8, #tabs8 * {
+		margin: 0;
+		padding: 0;
+		font-size: 12px;
+		line-height: 15px;
+	}
+	</style>
 </head>
 <body>
 
@@ -120,6 +128,23 @@ <h2 id="qunit-userAgent"></h2>
 	<div id="tabs7-1"></div>
 </div>
 
+<div id="tabs8Wrapper">
+	<div id="tabs8">
+		<ul id="tabs8-list">
+			<li><a href="#tabs8-1">1</a></li>
+			<li><a href="#tabs8-2">2</a></li>
+		</ul>
+		<div id="tabs8-1">
+			<p>Lorem ipsum</p>
+			<p>Lorem ipsum</p>
+			<p>Lorem ipsum</p>
+		</div>
+		<div id="tabs8-2">
+			<p>Lorem ipsum</p>
+		</div>
+	</div>
+</div>
+
 </div>
 </body>
 </html>
diff --git a/tests/unit/tabs/tabs_common.js b/tests/unit/tabs/tabs_common.js
@@ -4,6 +4,7 @@ TestHelpers.commonWidgetTests( "tabs", {
 		collapsible: false,
 		disabled: false,
 		event: "click",
+		heightStyle: "content",
 		hide: null,
 		show: null,
 

diff --git a/tests/unit/tabs/tabs_common_deprecated.js b/tests/unit/tabs/tabs_common_deprecated.js
@@ -7,6 +7,7 @@ TestHelpers.commonWidgetTests( "tabs", {
 		cookie: null,
 		disabled: false,
 		event: "click",
+		heightStyle: "content",
 		hide: null,
 		fx: null,
 		idPrefix: "ui-tabs-",

diff --git a/tests/unit/tabs/tabs_deprecated.html b/tests/unit/tabs/tabs_deprecated.html
@@ -30,6 +30,14 @@
 	<script src="tabs_deprecated.js"></script>
 
 	<script src="../swarminject.js"></script>
+	<style>
+	#tabs8, #tabs8 * {
+		margin: 0;
+		padding: 0;
+		font-size: 12px;
+		line-height: 15px;
+	}
+	</style>
 </head>
 <body>
 
@@ -119,6 +127,23 @@ <h2 id="qunit-userAgent"></h2>
 	<div id="tabs7-1"></div>
 </div>
 
+<div id="tabs8Wrapper">
+	<div id="tabs8">
+		<ul id="tabs8-list">
+			<li><a href="#tabs8-1">1</a></li>
+			<li><a href="#tabs8-2">2</a></li>
+		</ul>
+		<div id="tabs8-1">
+			<p>Lorem ipsum</p>
+			<p>Lorem ipsum</p>
+			<p>Lorem ipsum</p>
+		</div>
+		<div id="tabs8-2">
+			<p>Lorem ipsum</p>
+		</div>
+	</div>
+</div>
+
 </div>
 </body>
 </html>
diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js
@@ -1,6 +1,7 @@
 (function( $ ) {
 
 var disabled = TestHelpers.tabs.disabled,
+	equalHeight = TestHelpers.tabs.equalHeight,
 	state = TestHelpers.tabs.state;
 
 module( "tabs: options" );
@@ -211,6 +212,72 @@ test( "{ event: custom }", function() {
 	state( element, 0, 1, 0 );
 });
 
+test( "{ heightStyle: 'auto' }", function() {
+	expect( 2 );
+	var element = $( "#tabs8" ).tabs({ heightStyle: "auto" });
+	equalHeight( element, 45 );
+});
+
+test( "{ heightStyle: 'content' }", function() {
+	expect( 2 );
+	var element = $( "#tabs8" ).tabs({ heightStyle: "content" }),
+		sizes = element.find( ".ui-tabs-panel" ).map(function() {
+			return $( this ).height();
+		}).get();
+	equal( sizes[ 0 ], 45 );
+	equal( sizes[ 1 ], 15 );
+});
+
+test( "{ heightStyle: 'fill' }", function() {
+	expect( 2 );
+	$( "#tabs8Wrapper" ).height( 500 );
+	var element = $( "#tabs8" ).tabs({ heightStyle: "fill" });
+	equalHeight( element, 485 );
+});
+
+test( "{ heightStyle: 'fill' } with sibling", function() {
+	expect( 2 );
+	$( "#tabs8Wrapper" ).height( 500 );
+	$( "<p>Lorem Ipsum</p>" )
+		.css({
+			height: 50,
+			marginTop: 20,
+			marginBottom: 30
+		})
+		.prependTo( "#tabs8Wrapper" );
+	var element = $( "#tabs8" ).tabs({ heightStyle: "fill" });
+	equalHeight( element, 385 );
+});
+
+test( "{ heightStyle: 'fill' } with multiple siblings", function() {
+	expect( 2 );
+	$( "#tabs8Wrapper" ).height( 500 );
+	$( "<p>Lorem Ipsum</p>" )
+		.css({
+			height: 50,
+			marginTop: 20,
+			marginBottom: 30
+		})
+		.prependTo( "#tabs8Wrapper" );
+	$( "<p>Lorem Ipsum</p>" )
+		.css({
+			height: 50,
+			marginTop: 20,
+			marginBottom: 30,
+			position: "absolute"
+		})
+		.prependTo( "#tabs8Wrapper" );
+	$( "<p>Lorem Ipsum</p>" )
+		.css({
+			height: 25,
+			marginTop: 10,
+			marginBottom: 15
+		})
+		.prependTo( "#tabs8Wrapper" );
+	var element = $( "#tabs8" ).tabs({ heightStyle: "fill" });
+	equalHeight( element, 335 );
+});
+
 // TODO: add animation tests
 
 }( jQuery ) );
diff --git a/tests/unit/tabs/tabs_test_helpers.js b/tests/unit/tabs/tabs_test_helpers.js
@@ -38,6 +38,12 @@ TestHelpers.tabs = {
 		deepEqual( actual, expected );
 	},
 
+	equalHeight: function( tabs, height ) {
+		tabs.find( ".ui-tabs-panel" ).each(function() {
+			equal( $( this ).outerHeight(), height );
+		});
+	},
+
 	state: function( tabs ) {
 		var expected = $.makeArray( arguments ).slice( 1 ),
 			actual = tabs.find( ".ui-tabs-nav li" ).map(function() {

diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js
@@ -34,6 +34,7 @@ $.widget( "ui.tabs", {
 		active: null,
 		collapsible: false,
 		event: "click",
+		heightStyle: "content",
 		hide: null,
 		show: null,
 
@@ -150,6 +151,10 @@ $.widget( "ui.tabs", {
 		if ( key === "event" ) {
 			this._setupEvents( value );
 		}
+
+		if ( key === "heightStyle" ) {
+			this._setupHeightStyle( value );
+		}
 	},
 
 	_tabId: function( tab ) {
@@ -202,6 +207,7 @@ $.widget( "ui.tabs", {
 
 		this._setupDisabled( options.disabled );
 		this._setupEvents( options.event );
+		this._setupHeightStyle( options.heightStyle );
 
 		// remove all handlers, may run on existing tabs
 		this.lis.unbind( ".tabs" );
@@ -290,6 +296,50 @@ $.widget( "ui.tabs", {
 		this._bind( this.anchors, events );
 	},
 
+	_setupHeightStyle: function( heightStyle ) {
+		var maxHeight, overflow,
+			parent = this.element.parent();
+
+		if ( heightStyle === "fill" ) {
+			// IE 6 treats height like minHeight, so we need to turn off overflow
+			// in order to get a reliable height
+			// we use the minHeight support test because we assume that only
+			// browsers that don't support minHeight will treat height as minHeight
+			if ( !$.support.minHeight ) {
+				overflow = parent.css( "overflow" );
+				parent.css( "overflow", "hidden");
+			}
+			maxHeight = parent.height();
+			this.element.siblings( ":visible" ).each(function() {
+				var elem = $( this ),
+					position = elem.css( "position" );
+
+				if ( position === "absolute" || position === "fixed" ) {
+					return;
+				}
+				maxHeight -= elem.outerHeight( true );
+			});
+			if ( overflow ) {
+				parent.css( "overflow", overflow );
+			}
+
+			this.element.children().not( this.panels ).each(function() {
+				maxHeight -= $( this ).outerHeight( true );
+			});
+
+			this.panels.each(function() {
+				$( this ).height( Math.max( 0, maxHeight -
+					$( this ).innerHeight() + $( this ).height() ) );
+			})
+			.css( "overflow", "auto" );
+		} else if ( heightStyle === "auto" ) {
+			maxHeight = 0;
+			this.panels.each(function() {
+				maxHeight = Math.max( maxHeight, $( this ).height( "" ).height() );
+			}).height( maxHeight );
+		}
+	},
+
 	_eventHandler: function( event ) {
 		var options = this.options,
 			active = this.active,
@@ -448,6 +498,10 @@ $.widget( "ui.tabs", {
 			}
 		});
 
+		if ( this.options.heightStyle !== "content" ) {
+			this.panels.css( "height", "" );
+		}
+
 		return this;
 	},