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

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).

DOJO似乎有些怪癖。我特别需要在页面加载时隐藏TabContainer，但在用户单击按钮后变为可见。我尝试的第一件事是设置style.display =“none”开始，然后在click事件上设置style.display =“block”。不幸的是，这只是部分工作 - 页面将在正确的位置/维度中呈现不可见的框，但不呈现实际内容。该框的内容仅在被其他内容触发时才会呈现（例如，转到另一个FF选项卡或暂停/恢复firebug将使框渲染）。

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.

如果将style.display属性设置为在页面加载时可见，则一切正常。您可以切换显示属性，它可以正确显示或隐藏tabcontainer。但如果在页面加载时将其设置为“none”，则会搞砸。

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中将style.display属性设置为“”，然后在Javascript中立即将其设置为“none”，但它仍然失败 - 更改发生得太快而且需要在tabcontainer呈现之后发生（这可能需要一两秒钟）。

Some stripped sample code:

一些剥离的示例代码：

HTML:
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px; height:100px;display:none;">
</div>

HTML：

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

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

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

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

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

9 个解决方案

#1

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

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

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

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

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

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

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

#2

Old thread but I experienced this same issue and this is how I solved it. First, you cannot use display:none. Per the folks at DOJO, you have to use visibility:hidden with dijits or this will not work. So, you want this:

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

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

Then, to show this you do the following:

然后，要显示此信息，请执行以下操作：

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

Now, the problem this poses is what you already found out. This reserves a invisible div in your viewport that is 500px wide. So if you are using a bordercontainer, there will be this empty 500px gap in your page. To resolve this, I had to create my dijits programatically and inject them into a empty div, rather than do what you did and do it declaratively. Hope this helps someone out there.

现在，这个问题就是你已经发现的问题。这会在视口中保留一个宽度为500px的不可见div。因此，如果您使用的是bordercontainer，页面中将会出现空白的500px空白。要解决这个问题，我必须以编程方式创建我的dijits并将它们注入一个空div，而不是按照你所做的去做，并以声明方式进行。希望这有助于那里的人。

#3

you should do

你应该做

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

or perhaps

也许

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

is even better

甚至更好

#4

Well, I did not solve this problem, but I came up with a workaround...Creating the TabContainer on the click event, instead of creating it hidden on page load and then showing it on the click event.

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

HTML:

HTML：

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

JS:

JS：

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

#5

After you set display:block do this:

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

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

dijit.layout widgets often don't lay themselves out properly if they are display:none (and sometimes even when visibility:hidden). You have to fiddle around in Firebug till you figure out what works!

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

#6

Tested sucessfully with Dojo 1.10 . Use registry instead of "dijit.byId()". The method resize() only works on the dijit.layout.BorderContainer.

使用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

The first thing (setting style.display = "none") is right. In place of

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

...then setting style.display = "block"

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

you should just call .set_visible JS method of the ajax TabContainer when "...user clicks a button", like:

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

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

#8

I used this after setting the style display:block and it works great! This way you don't need to know the ID of the container to resize.

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

this.getParent().resize();

this.getParent（）调整大小（）;

#9

If you use dijit.byId("tabContainer").resize(); after you set the display to block it will bring back the tab headers.

如果你使用dijit.byId（“tabContainer”）。resize（）;将显示设置为阻止后，它将返回选项卡标题。

You'll save a little bit of javascript if you just use visibility: hidden; (although the tabContainer will still take up space on the page)

如果您只使用visibility：hidden，您将保存一些javascript; （虽然tabContainer仍会占用页面上的空间）

Another alternative I use pretty frequently is instead of display: none/block; I use height: 0px/auto;

我经常使用的另一个替代方案是display：none / block;我用身高：0px / auto;

You could also switch the position to absolute and set the coordinates for off screen somewhere too. That's require a lot more css changes than simply doing the height though. That's my preferred method if it works in my situation.

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

Between these solutions hopefully one will work for you.

在这些解决方案之间希望能为您服务。