ui.tabs.js issues

ui.tabs.js issues


Hi,
I am trying to use the jquery UI tabs but having some problems.
I have a tab container on the page with two existing tabs. These work as
expected. A requirement is that tabs can be added to the existing tab
container. The code is below. After looking through the code for
ui.tabs.js, here are some questions:
* How do you get the length after adding a tab? I used the 'length'
property. But the length does not get automatically incremented. Is it
expected that the user add to the length property? Why not increment in
the add function?
* Adding a tab, incrementing the length property and calling tabsClick
the *first* time works. But the following error occurs (when the tabsAdd
method is called) in firebug:
instance has no properties
instance[method.toLowerCase()].apply(instance, args);
ui.tabs.js line 35
Should I be adding tabs in a different way?
* Adding a tab requires putting the class 'ui-tabs-container' on the div
being added. Shouldn't that be handled in the tabsAdd function?
* is there a way to get the tab's content area to have a height that
extends to the bottom of the wrapping div. I don't want to use pixels as
I want it to stretch with resizing.
thanks,
-Rob
Here is the code:
buf = [];
buf.push('<div style="display:none;" id="');//
buf.push(targetName);
buf.push('-tab"><iframe id="');
buf.push(targetName);
buf.push('-frame" src="projects/');
buf.push(Ripple.currentProjectGroupName);
buf.push('/projects/');
buf.push(Ripple.currentProjectName);
buf.push('/layouts/');
buf.push(layout);
buf.push('.xhtml"></iframe></div>');
$("#" + tabContainerId).append(buf.join(""));
console.log("Ripple.tabs.length: ", Ripple.tabs.length);
Ripple.tabs.tabsAdd("#"+ targetName + "-tab", targetName);
Ripple.tabs.length = Ripple.tabs.length + 1;
console.log("Ripple.tabs.length: ", Ripple.tabs.length);
Ripple.tabs.tabsClick(Ripple.tabs.length + 1);

.....
$(function ($) {
...
Ripple.tabs = $("#tabContainer > ul").tabs({
fxFade: true,
fxSlide: true,
fxSpeed: 500
});
$("#tabContainer").height("100%");
$("#tabContainer").bottom("0px");
$(".ui-tabs-container").height("100%");
$(".ui-tabs-container").bottom("0px");
console.log("Ripple.tabs: " + Ripple.tabs);

});