I am using the Accordion widget with the fillSpace option, but found
the lack of a way to *easily* resize the widget a strange deficiency.
After reviewing the code, I found that a very minor adjustment
provides an ideal solution.
By just *moving* the code that sets the height into a separate
"size()" method, the widget can be resized at any time - like so:
$Object.accordion('size');
I further recommend that a size() method become a *standard* for any
widget that sets absolute width or height, meaning code is required to
resize them when their container is resized. This would provide a
standard way to resize widgets, just as there is a standard way to
enable, disable and destroy them.
Below is the modified 'widget object' code (I skipped the other
functions because they are unchanged). NOTE the new size() method at
the end. The *only other change* is that where this code *used to be*
inside init(), there is now a call to this.size() instead; That's it -
no new logic or code (though I did move the maxHeight & maxWidth var
declarations).
$.widget("ui.accordion", {
init: function() {
var options = this.options;
if ( options.navigation ) {
var current =
this.element.find("a").filter(options.navigationFilter);
if ( current.length ) {
if ( current.filter(options.header).length ) {
options.active = current;
} else {
options.active =
current.parent().parent().prev();
current.addClass("current");
}
}
}
// calculate active if not specified, using the first header
options.headers = this.element.find(options.header);
options.active = findActive(options.headers, options.active);
// IE7-/Win - Extra vertical space in Lists fixed
if ($.browser.msie) {
this.element.find('a').css('zoom', '1');
}
if (!this.element.hasClass("ui-accordion")) {
this.element.addClass("ui-accordion");
$("<span class='ui-accordion-left'/
>").insertBefore(options.headers);
$("<span
class='ui-accordion-right'/>").appendTo(options.headers);
options.headers.addClass("ui-accordion-header").attr("tabindex",
"0");
}
this.size();
options.headers
.not(options.active || "")
.next()
.hide();
options.active.parent().andSelf().addClass(options.selectedClass);
if (options.event) {
this.element.bind((options.event) + ".accordion",
clickHandler);
}
},
activate: function(index) {
// call clickHandler with custom event
clickHandler.call(this.element[0], {
target: findActive( this.options.headers, index )[0]
});
},
destroy: function() {
this.options.headers.next().css("display", "");
if ( this.options.fillSpace || this.options.autoHeight ) {
this.options.headers.next().css("height", "");
}
$.removeData(this.element[0], "accordion");
this.element.removeClass("ui-accordion").unbind(".accordion");
}
, size: function () {
var options = this.options;
var maxHeight = 0, maxPadding = 0;
if ( options.fillSpace ) {
maxHeight = this.element.parent().height();
options.headers.each(function() {
maxHeight -= $(this).outerHeight();
});
options.headers.next().each(function() {
maxPadding = Math.max(maxPadding,
$(this).innerHeight() - $
(this).height());
}).height(maxHeight - maxPadding);
} else if ( options.autoHeight ) {
options.headers.next().each(function() {
maxHeight = Math.max(maxHeight,
$(this).outerHeight());
}).height(maxHeight);
}
}
});
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
