javascript - 如何使用 DOJO 动态显示和隐藏整个 TabContainer？

Question

DOJO 在这里似乎有些怪癖。我特别需要在页面加载时隐藏 TabContainer，但在用户单击按钮后变得可见。我尝试的第一件事是设置 style.display = "none"开始，然后在点击事件上设置 style.display = "block"。不幸的是，这只能部分起作用——页面将在正确的位置/尺寸中呈现一个不可见的框，但不会呈现实际内容。框的内容只有在被其他东西触发时才会呈现(例如，转到不同的 FF 选项卡或暂停/恢复 Firebug 将使框呈现)。

如果 style.display 属性设置为在页面加载时可见，则一切正常。您可以切换 display 属性，它会正确显示或隐藏 tabcontainer。但如果它在页面加载时设置为“无”，它就会搞砸。

我尝试了一种变通方法，即在 HTML 中将 style.display 属性设置为“”，然后立即在 Javascript 中将其设置为“none”，但它仍然失败 - 更改发生得太快，需要在tabcontainer 呈现(可能需要一两秒钟)。

一些剥离的示例代码:

HTML:
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px;
height:100px;display:none;" >
</div >

然后是在用户点击时显示选项卡的 Javascript:

function initTabs()  
{  
var tabContainer = dojo.byId('tabContainer');  
tabContainer.style.display = 'block';  
}  

如何动态显示/隐藏 TabContainer 而无需它以显示状态启动？

Answer 1

有解决办法。如果你想显示 TabContainer 调用:

dijit.byId("tabContainer").domNode.style.display = 'block';
dijit.byId("tabContainer").resize();

如果您想隐藏 TabContainer，请使用“none”。

这对我有用，但这是事实，它并不明显:)