logo标签列表

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

javascripthtmldojotabstabcontainer
8

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

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

我尝试了一种解决方法，在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”。第三阶段是利润。 - cletus
我已经看到了这个建议几次，但是我还是卡在 DOJO 上了。 - Brian Schroth
是的，我不是认真的。 :) 这有点儿嘲讽整个“使用jQuery”文化（尽管我很喜欢jQuery...）。 - cletus
9个回答
9
这个问题有解决方案。如果你想展示TabContainer，请调用以下代码：
dijit.byId("tabContainer").domNode.style.display = 'block';
dijit.byId("tabContainer").resize();

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

这对我来说有效，但实话实说，它并不明显 :)

1
只是1.8+的更新，require(["dojo/dom-style"], function(domStyle) { domStyle.set(dijit.byId("tabContainer").domNode, {'display': 'block'}); dijit.byId("tabContainer").resize(); }附注：我知道我还应该编辑 dijit.byId("tabContainer") 为 require(["dojo/dom-attr"], function(domAttr){}); 但你懂我的意思。 - Sam007
6

虽然这是一篇旧帖子，但我也遇到了同样的问题，并且找到了解决方法。首先，你不能使用 display:none。根据 DOJO 的人们说法，你必须使用 visibility:hidden 来处理 dijits，否则它将无效。所以，你需要这样做：

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

然后，要展示这一点，你需要执行以下操作：
dojo.style("tabContainer", "visibility", "visible");

现在，这个问题带来的困扰正如你所发现的那样。这会在你的视口中保留一个宽度为500像素的不可见div。因此，如果你正在使用bordercontainer，在你的页面上会有这个空的500像素间隙。为了解决这个问题，我不得不通过编程方式创建我的小部件，并将它们注入到一个空的div中，而不是像你所做的那样以声明方式创建。希望这能帮助到某个人。
@streetlight- 几年没用过DOJO了，你得自己去试试。很抱歉不能再提供更多帮助。 - Perry
4

您应该做什么

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

或者说

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

更好的是

第一个选项也不起作用。第二个选项修改后是我认为你想要的（'visible'而不是'hidden'），效果稍微好一点，但仍然不正确。使用visibility属性会使TabContainer正确隐藏和显示，但在隐藏时仍然占据页面上的空间（一个不可见的框）。 - Brian Schroth
你可以将位置改为绝对定位。但这会让它变成一个丑陋的hack。 - Marijn
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();
1

在你设置 display:block 之后，执行以下操作：

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

dijit.layout小部件通常在display:none（有时甚至在visibility:hidden）的情况下无法正确布局。您必须在Firebug中摆弄一番，直到找出有效的解决方法！

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

}
0

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

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

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

$find('<%= Tabs.ClientID %>').set_visible(true);
0
我在设置样式display:block后使用了它，效果很棒！这种方式无需知道容器的ID即可调整大小。

this.getParent().resize();

0

如果您在将显示设置为块之后使用dijit.byId("tabContainer").resize();，它将恢复选项卡标题。

如果您只使用visibility: hidden;，则可以节省一些JavaScript（尽管tabContainer仍将占用页面上的空间）

我经常使用的另一种替代方法是，不使用display: none/block;而是使用height: 0px/auto;

您还可以将位置切换为绝对位置，并将坐标设置为屏幕外的某个位置。这需要比仅更改高度多得多的CSS更改。如果在我的情况下起作用，则这是我首选的方法。

希望这些解决方案中的一个适合您。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接