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;
 	},