From: Danny Trunk Date: Mon, 28 May 2012 19:11:20 +0000 (-0400) Subject: Tabs: Added heightStyle option. Fixed #8345 - Tabs: Add heightStyle option. X-Git-Tag: 1.9.0-beta.1~94 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=6e2f95f59d73d86a2b84faecba3fca593534b8c9;p=jquery-ui.git Tabs: Added heightStyle option. Fixed #8345 - Tabs: Add heightStyle option. --- diff --git a/tests/unit/tabs/tabs.html b/tests/unit/tabs/tabs.html index b9fa507d8..3a55f3b79 100644 --- a/tests/unit/tabs/tabs.html +++ b/tests/unit/tabs/tabs.html @@ -31,6 +31,14 @@ + @@ -120,6 +128,23 @@

Lorem ipsum

+ diff --git a/tests/unit/tabs/tabs_common.js b/tests/unit/tabs/tabs_common.js index b98ff3575..a589515f8 100644 --- 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 index 718ae8272..5b41014da 100644 --- 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 index e58382efb..bb4088350 100644 --- a/tests/unit/tabs/tabs_deprecated.html +++ b/tests/unit/tabs/tabs_deprecated.html @@ -30,6 +30,14 @@ + @@ -119,6 +127,23 @@

Lorem ipsum

+ diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js index df6827c57..8365a42d7 100644 --- 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 ); + $( "

Lorem Ipsum

" ) + .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 ); + $( "

Lorem Ipsum

" ) + .css({ + height: 50, + marginTop: 20, + marginBottom: 30 + }) + .prependTo( "#tabs8Wrapper" ); + $( "

Lorem Ipsum

" ) + .css({ + height: 50, + marginTop: 20, + marginBottom: 30, + position: "absolute" + }) + .prependTo( "#tabs8Wrapper" ); + $( "

Lorem Ipsum

" ) + .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 index 508043943..0c9309186 100644 --- 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 index a693899da..1224f47b9 100644 --- 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; },