Skip to content
Permalink
Browse files
Tabs: Added heightStyle option. Fixed #8345 - Tabs: Add heightStyle o… 
…ption.
  • Loading branch information
@scottgonzalez
Danny Trunk authored and scottgonzalez committed May 28, 2012
1 parent 2662edf commit 6e2f95f59d73d86a2b84faecba3fca593534b8c9
Show file tree
Hide file tree
Showing 7 changed files with 179 additions and 0 deletions.
25 tests/unit/tabs/tabs.html
View file
@@ -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>
1 tests/unit/tabs/tabs_common.js
View file
@@ -4,6 +4,7 @@ TestHelpers.commonWidgetTests( "tabs", {
collapsible: false,
disabled: false,
event: "click",
heightStyle: "content",
hide: null,
show: null,

1 tests/unit/tabs/tabs_common_deprecated.js
View file
@@ -7,6 +7,7 @@ TestHelpers.commonWidgetTests( "tabs", {
cookie: null,
disabled: false,
event: "click",
heightStyle: "content",
hide: null,
fx: null,
idPrefix: "ui-tabs-",
25 tests/unit/tabs/tabs_deprecated.html
View file
@@ -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>
67 tests/unit/tabs/tabs_options.js
View file
@@ -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 ) );
6 tests/unit/tabs/tabs_test_helpers.js
View file
@@ -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() {
54 ui/jquery.ui.tabs.js
View file
@@ -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;
},

0 comments on commit 6e2f95f

Please sign in to comment.