Question

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;"＆GT;
</div＆GT;

然后使用Javascript显示用户点击的标签：

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

如何在不显示TabContainer的情况下动态显示/隐藏TabContainer？

Answer 1

有解决方案。如果你想显示TabContainer calll：

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

如果你想隐藏TabContainer，请使用'none'。

这对我有用，但这是事实，并不明显：）

Answer 2

旧线程，但我遇到了同样的问题，这就是我解决它的方法。首先，您不能使用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，而不是按照你所做的去做，然后以声明的方式进行。希望这可以帮助那些人。

Answer 3

你应该做

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

或者

dijit.byId("tabContainer").domNode.style.visibility = 'hidden';

更好

Answer 4

好吧，我没有解决这个问题，但我想出了一个解决方法......在点击事件上创建TabContainer，而不是在页面加载时隐藏它，然后在点击事件上显示它。

HTML：

<div id="tabContainer">     
</div>

JS：

var tabContainer = new dijit.layout.TabContainer({id:"tabContainer", style:"width:500px;height:200px;"}, dojo.byId('tabContainer'));  
//add tabs
tabContainer.startup();

Answer 5

设置display：block后执行以下操作：

dijit.byId('tabContainer').resize();

dijit.layout小部件通常不会正确显示，如果它们是display：none（有时甚至在可见性：隐藏时）。你必须在Firebug中乱搞，直到找出有效的方法！

Answer 6

使用 Dojo 1.10 测试成功。使用注册表而不是＆＃34; dijit.byId（）＆＃34;。方法 resize（）仅适用于 dijit.layout.BorderContainer 。

define([
    "dijit/registry" // registry
], function(registry) {

    var show = true;

    if (show) {
        domStyle.set(registry.byId("dijitLayoutContentPane").domNode, {'display': 'block'});
        registry.byId("dijitLayoutBorderContainer").resize();
    } else {
        domStyle.set(registry.byId("dijitLayoutContentPane").domNode, {'display': 'none'});
        registry.byId("dijitLayoutBorderContainer").resize();
    }

}

Answer 7

首先（设置style.display = "none"）是正确的。代替

...然后设置style.display =“block”

当“......用户点击按钮”时，你应该只调用.set_visible ajax TabContainer的JS方法，如：

$find('<%= Tabs.ClientID %>').set_visible(true);

Answer 8

我在设置样式显示后使用了这个：块，效果很好！这样您就不需要知道要调整大小的容器的ID。

this.getParent().resize();

Answer 9

如果你使用 dijit.byId（ “TabContainer的”）调整大小（）; 将显示设置为阻止后，它将恢复选项卡标题。

如果您只是使用，您将保存一些javascript 能见度：隐藏; （虽然tabContainer仍会占用页面上的空间）

我经常使用的另一种选择是代替 display：none / block; 我用身高：0px / auto;

您也可以将位置切换为绝对位置，并在某处设置屏幕外的坐标。这需要更多的css变化，而不仅仅是做高度。如果它适合我的情况，这是我的首选方法。

在这些解决方案之间希望有一个能为你效劳。

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

9 个答案: