From 94a1786d5614aefeb1c14e492126bfe8aa28a804 Mon Sep 17 00:00:00 2001 From: Alex Dovenmuehle Date: Fri, 17 Dec 2010 21:38:29 -0500 Subject: [PATCH] Accordion: API Redesign. Made style changes and changed 'fill' implementation to use $.siblings() --- tests/unit/accordion/accordion_options.js | 9 +++++ ui/jquery.ui.accordion.js | 49 +++++++++++++---------- 2 files changed, 36 insertions(+), 22 deletions(-) diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/accordion_options.js index b806a4513..2544ec67d 100644 --- a/tests/unit/accordion/accordion_options.js +++ b/tests/unit/accordion/accordion_options.js @@ -129,6 +129,15 @@ test("{ fillSpace: true } with sibling", function() { equalHeights($('#navigation').accordion({ fillSpace: true}), 320, 332); }); +test("{ fillSpace: true } with multiple siblings", function() { + $("#navigationWrapper").height(500); + var sibling = $("

Lorem Ipsum

"); + $("#navigationWrapper").prepend( sibling.height(100) ); + $("#navigationWrapper").prepend( sibling.clone().height(50) ); + //sibling.outerHeight(true) == 126 + equalHeights($('#navigation').accordion({ fillSpace: true}), 244, 256); +}); + test("{ header: '> li > :first-child,> :not(li):even' }, default", function() { state($("#list1").accordion(), 1, 0, 0); state($("#navigation").accordion(), 1, 0, 0); diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index 3abb088d1..ccad15262 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -17,11 +17,11 @@ $.widget( "ui.accordion", { options: { active: 0, animated: "slide", - autoHeight: true, - clearStyle: false, + autoHeight: true, //DEPRECATED - use heightStyle: "auto" + clearStyle: false, //DEPRECATED - use heightStyle: "content" collapsible: false, event: "click", - fillSpace: false, + fillSpace: false, //DEPRECATED - use heightStyle: "fill" //heightStyle: "auto", header: "> li > :first-child,> :not(li):even", icons: { @@ -30,19 +30,6 @@ $.widget( "ui.accordion", { } }, - _mergeHeightStyle: function() { - options = this.options; - - if (options.fillSpace) - return "fill"; - - if (options.clearStyle) - return "content"; - - if (options.autoHeight) - return "auto"; - }, - _create: function() { var self = this, options = self.options; @@ -182,13 +169,29 @@ $.widget( "ui.accordion", { .css( "display", "" ) .removeAttr( "role" ) .removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-accordion-disabled ui-state-disabled" ); - if ( options.heightStyle != "content" ) { + if ( options.heightStyle !== "content" ) { contents.css( "height", "" ); } return $.Widget.prototype.destroy.call( this ); }, + _mergeHeightStyle: function() { + var options = this.options; + + if ( options.fillSpace ) { + return "fill"; + } + + if ( options.clearStyle ) { + return "content"; + } + + if ( options.autoHeight ) { + return "auto"; + } + }, + _setOption: function( key, value ) { $.Widget.prototype._setOption.apply( this, arguments ); @@ -249,13 +252,15 @@ $.widget( "ui.accordion", { var options = this.options, maxHeight; - if ( options.heightStyle == "fill" ) { + if ( options.heightStyle === "fill" ) { if ( $.browser.msie ) { var defOverflow = this.element.parent().css( "overflow" ); this.element.parent().css( "overflow", "hidden"); } - parent = this.element.parent(); - maxHeight = parent.height() - parent.children(':visible').not(this.element).outerHeight(true); + maxHeight = this.element.parent().height(); + this.element.siblings( ":visible" ).each(function() { + maxHeight -= $( this ).outerHeight( true ); + }); if ($.browser.msie) { this.element.parent().css( "overflow", defOverflow ); } @@ -270,7 +275,7 @@ $.widget( "ui.accordion", { $( this ).innerHeight() + $( this ).height() ) ); }) .css( "overflow", "auto" ); - } else if ( options.heightStyle == "auto" ) { + } else if ( options.heightStyle === "auto" ) { maxHeight = 0; this.headers.next() .each(function() { @@ -493,7 +498,7 @@ $.widget( "ui.accordion", { return; } - if ( this.options.heightStyle == "content" ) { + if ( this.options.heightStyle === "content" ) { this.toShow.add( this.toHide ).css({ height: "", overflow: "" -- 2.39.5