8

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

4

9 回答 9

9

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

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

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

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

于 2009-09-02T07:11:59.150 回答
6

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

于 2011-06-21T19:28:22.537 回答
4

你应该做

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

也许

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

更好

于 2009-08-11T16:12:46.320 回答
1

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

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

如果 dijit.layout 小部件是 display:none（有时甚至是可见性：hidden），它们通常不会正确布置自己。你必须在 Firebug 中摆弄，直到你弄清楚什么是有效的！

于 2009-08-11T21:39:29.123 回答
1

好吧，我没有解决这个问题，但我想出了一个解决方法......在点击事件上创建 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();
于 2009-08-11T20:04:04.713 回答
1

使用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();
    }

}
于 2014-07-28T14:32:28.843 回答
0

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

this.getParent().resize();

于 2012-06-28T21:32:11.757 回答
0

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

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

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

$find('<%= Tabs.ClientID %>').set_visible(true);
于 2009-09-06T17:32:56.567 回答
0

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

如果你只使用可见性，你会节省一点 javascript: hidden; （虽然 tabContainer 仍然会占用页面空间）

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

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

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

于 2014-02-05T22:07:27.127 回答