7 html javascript dojo tabs tabcontainer
DOJO似乎有些怪癖.我特别需要在页面加载时隐藏TabContainer,但在用户单击按钮后变为可见.我尝试的第一件事是设置style.display ="none"来启动,然后在click事件上设置style.display ="block".不幸的是,这只是部分工作 - 页面将在正确的位置/维度中呈现不可见的框,但不呈现实际内容.该框的内容仅在被其他内容触发时才会呈现(例如,转到另一个FF选项卡或暂停/恢复firebug将使框渲染).
如果将style.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的情况下动态显示/隐藏TabContainer？
有解决方案.如果要显示TabContainer calll:
dijit.byId("tabContainer").domNode.style.display = 'block';
dijit.byId("tabContainer").resize();
如果要隐藏TabContainer,请使用"none".
这对我有用,但这是事实,它并不明显:)
旧线程,但我遇到了同样的问题,这就是我解决它的方式.首先,您不能使用display:none.根据DOJO的人员,你必须使用可见性:用dijit隐藏,否则这将无效.所以,你想要这个:
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px; height:100px;visibility:hidden;">
然后,要显示此信息,请执行以下操作:
dojo.style("tabContainer", "visibility", "visible");
现在,这个问题就是你已经发现的问题.这会在视口中保留一个宽度为500px的不可见div.因此,如果您使用的是bordercontainer,页面中将会出现空白的500px空白.要解决这个问题,我必须以编程方式创建我的dijits并将它们注入一个空div,而不是按照你所做的去做,然后以声明的方式进行.希望这有助于那里的人.
你应该做
dijit.byId("tabContainer").domNode.style.display = 'block'
也许
dijit.byId("tabContainer").domNode.style.visibility = 'hidden';
甚至更好