]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 2662edf)
Tabs: Added heightStyle option. Fixed #8345 - Tabs: Add heightStyle option.
authorDanny Trunk <dtrunk90@googlemail.com>
Mon, 28 May 2012 19:11:20 +0000 (15:11 -0400)
committerScott González <scott.gonzalez@gmail.com>
Mon, 28 May 2012 19:11:20 +0000 (15:11 -0400)
tests/unit/tabs/tabs.html patch | blob | history
tests/unit/tabs/tabs_common.js patch | blob | history
tests/unit/tabs/tabs_common_deprecated.js patch | blob | history
tests/unit/tabs/tabs_deprecated.html patch | blob | history
tests/unit/tabs/tabs_options.js patch | blob | history
tests/unit/tabs/tabs_test_helpers.js patch | blob | history
ui/jquery.ui.tabs.js patch | blob | history

diff --git a/tests/unit/tabs/tabs.html b/tests/unit/tabs/tabs.html
index b9fa507d8ea26760aed5b1fb35408aaacfb6f1c6..3a55f3b79186846bebf8cd0c60d34b18c0c3fdd6 100644 (file)
--- 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 @@
        <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
index b98ff35751e764d3cad8936c5ce2ef57013c232a..a589515f8067682165424a6a81d4832277810af0 100644 (file)
--- 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 718ae82724dc9c3d3e189c6d92c7dce03e0200c0..5b41014da6ec120d8954b3620cbcb9cc35b0352c 100644 (file)
--- 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 e58382efb1b684f07ffb8721c11b8b5c526b711d..bb40883508b68db20b271984b87f736581ee66a2 100644 (file)
--- 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 @@
        <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
index df6827c576d5024aeb6676e539b35078036ac196..8365a42d716dcf5fb1f932d4f108235b7aa7a3b3 100644 (file)
--- 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
index 5080439430806e996d0f5f0fa36e2408a8511c59..0c9309186150fc607e51e909e8eb847d8387a32e 100644 (file)
--- 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 a693899da0c71cf7285978254cb04e1cfa259329..1224f47b9e824731ad572c55b88da778f09acd8e 100644 (file)
--- 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;
        },
 
The official jQuery user interface library: https://github.com/jquery/jquery-ui