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

【问题标题】：How do I dynamically show and hide an entire TabContainer using DOJO?如何使用 DOJO 动态显示和隐藏整个 TabContainer？
【发布时间】：2010-11-18 16:05:54
【问题描述】：

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

如果 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 而不让它以显示状态启动？

【问题讨论】：

第一阶段是“使用 jQuery”。第三阶段是利润。
多次看到这个建议，但我被 DOJO 卡住了。
是的，我不是认真的。 :) 对整个“使用 jQuery”的文化有点嘲讽（虽然我很喜欢 jQuery……）。

标签： javascript html dojo tabs tabcontainer

【解决方案1】：

对此有解决方案。如果要显示 TabContainer 调用：

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

如果要隐藏 TabContainer，请使用“无”。

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

【讨论】：

只是 1.8+ 的更新，require(["dojo/dom-style"], function(domStyle) { domStyle.set(dijit.byId("tabContainer").domNode, {'display': 'block'}); dijit.byId("tabContainer").resize(); } p.s. - 我知道我也应该将dijit.byId("tabContainer") 编辑为require(["dojo/dom-attr"], function(domAttr){}); 但你明白了

【解决方案2】：

旧线程，但我遇到了同样的问题，这就是我解决它的方法。首先，您不能使用 display:none。根据 DOJO 的人员，您必须使用可见性：使用 dijits 隐藏，否则这将不起作用。所以，你想要这个：

<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px; height:100px;visibility:hidden;">

然后，为了显示这一点，您执行以下操作：

dojo.style("tabContainer", "visibility", "visible");

现在，这带来的问题是您已经发现的。这会在您的视口中保留一个 500 像素宽的不可见 div。因此，如果您使用边框容器，页面中将有 500 像素的空白间隙。为了解决这个问题，我必须以编程方式创建我的 dijit 并将它们注入到一个空的 div 中，而不是做你所做的事情并以声明的方式去做。希望这可以帮助那里的人。

【讨论】：

@streetlight - 我与 DOJO 合作已有几年了。你只需要尝试一下。抱歉，无法提供更多帮助。

【解决方案3】：

你应该这样做

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

或许

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

更好

【讨论】：

第一个选项也不起作用。第二个选项，修改为我假设你想要的（“可见”而不是“隐藏”）效果更好一点，但仍然不正确。使用可见性属性可以使 TabContainer 正确隐藏和显示，但在隐藏时仍会占用页面空间（一个不可见的框）。
您可以将位置更改为绝对位置。但这使它成为一种丑陋的黑客攻击。

【解决方案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();

【讨论】：

【解决方案5】：

在你设置 display:block 之后：

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

dijit.layout 小部件在 display:none（有时甚至在 visibility:hidden）时通常不会正确布局。你必须在 Firebug 中摆弄，直到你弄清楚什么是有效的！

【讨论】：

【解决方案6】：

使用 Dojo 1.10 成功测试。使用注册表而不是“dijit.byId()”。 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();
    }

}

【讨论】：

【解决方案7】：

第一件事（设置style.display = "none"）是对的。代替

...然后设置 style.display = "block"

当“...用户单击按钮”时，您应该调用 ajax TabContainer 的.set_visible JS 方法，例如：

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

【讨论】：

【解决方案8】：

我在设置样式 display:block 后使用了这个，效果很好！这样您就无需知道要调整大小的容器的 ID。

this.getParent().resize();

【讨论】：

【解决方案9】：

如果你使用 dijit.byId("tabContainer").resize(); 将显示设置为阻止后，它将带回选项卡标题。

如果你只是使用，你会节省一点 javascript 可见性：隐藏；（虽然tabContainer仍然会占用页面空间）

我经常使用的另一种替代方法是显示：无/块；我用高度：0px/自动；

您也可以将位置切换为绝对位置，并在某处设置离屏坐标。这需要比简单地做高度更多的css更改。如果它适用于我的情况，那是我的首选方法。

希望在这些解决方案之间有一个适合您。

【讨论】：