github/jquery-ui
1
1
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2026-04-20 03:02:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Danny Trunk
2012-05-28 15:11:20 -04:00
committed by Scott González
parent 2662edf739
commit 6e2f95f59d
7 changed files with 179 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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