如何使用 DOJO 动态显示和隐藏整个 TabContainer? [英] How do I dynamically show and hide an entire TabContainer using DOJO?

问题描述

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

DOJO seems to have some quirks here. I specifically need to have the TabContainer hidden when the page loads, but then become visible after the user clicks a button. The first thing I tried is setting style.display = "none" to start, and then setting style.display = "block" on the click event. Unfortunately, this only partially works- the page will render an invisible box in the right location/dimensions, but not render the actual contents. The box's contents only get rendered when triggered by something else (for example, going to a different FF tab or suspending/resuming firebug will make the box render).

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

If the style.display property is set to be visible on page load, everything works fine. You can toggle the display property and it shows or hides the tabcontainer properly. But if it's set to "none" on page load, it screws up.

我尝试了一种解决方法，在 HTML 中将 style.display 属性设置为"，然后在 Javascript 中立即将其设置为none"，但仍然失败 - 更改发生得太快，需要在tabcontainer 渲染(可能需要一两秒钟).

I tried a workaround of setting the style.display property to "" in the HTML but then immediately setting it to "none" in the Javascript, but it still fails- the change occurs too soon and it needs to happen after the tabcontainer renders (which can take a second or two).

一些剥离的示例代码:

HTML:
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px;高度:100px；显示:无；">
</div>

然后是在用户点击时显示标签的 Javascript:

and then the Javascript to show the tab on a user click:

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

如何动态显示/隐藏 TabContainer 而不让它以显示状态启动?

How can I dynamically show/hide a TabContainer without having it start in the shown state?

推荐答案

有解决方案.如果要显示 TabContainer 调用:

There is solution for this. If you want to show TabContainer calll:

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

如果要隐藏 TabContainer，请使用无".

and use 'none' if you want to hide TabContainer.

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

This works for me, but that is truth, it is not obvious :)

这篇关于如何使用 DOJO 动态显示和隐藏整个 TabContainer?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！