dojo 显示/隐藏一个 ContentPane 而另一个 ContentPane 是流动的答案

【问题标题】：dojo Show/Hide One ContentPane While Another ContentPane Is Liquiddojo 显示/隐藏一个 ContentPane 而另一个 ContentPane 是流动的
【发布时间】：2011-10-02 07:52:50
【问题描述】：

我已经为破解这个难题苦苦挣扎了好几个星期，所以我不确定这是不可能的，还是我缺乏编码能力……或两者兼而有之。我不是程序员，我是 Dojo Toolkit 的新手。

我有一个使用 BorderContainer 布局的网站。我正在尝试创建一种效果，我可以使用按钮打开和关闭将包含控件的下拉类型框。我需要在页面加载时隐藏此下拉菜单，然后在您单击按钮时打开。

我的问题是，当我打开下拉菜单时，它会将其下方的内容窗格推离浏览器窗口的底部。当下拉菜单打开时，我需要下部 ContentPane 保持在浏览器窗口的剩余空间内。此外，我希望下拉菜单位于其下方内容的可滚动容器之外，这就是为什么我将其设置为位于其下方的嵌套 BorderContainer 之外的原因。

我创建了代码的简化版本来展示我的挑战（请参阅下面的链接）。如果加载页面，您可以看到中心 ContentPane 滚动内容。但是，如果您随后单击该按钮，则会在内容上方展开一个下拉 div。然后，当您滚动时，您会注意到您看不到完整的窗格，因为它位于浏览器窗口底部下方的无人区。我假设因为 div 在加载时设置为 display:none，所以页面加载时不考虑它的大小。然后，当您通过按下按钮打开它时，它的大小是相加的，下面的窗格不知道如何调整大小或考虑新元素。

我尝试过使用可见性属性，但是当它仍然关闭时，它会为 div 留下空隙。我已经修改了一些代码来控制显示承诺的高度，但是我的每个下拉框都会有不同的大小，所以我希望将高度设置为“自动”而不是指定的像素大小。

有谁知道我该如何做到这一点，以便下部窗格可以适应空间而无需推开屏幕？

以下是页面示例：

http://equium.com/scaffold.html

（我在尝试在此处插入完整的 HTML 页面作为代码示例时遇到了一些问题，所以如果这是一种更好的处理方式，并且有人可以让我知道嵌入所有代码的最佳方式，我将不胜感激它。）

先谢谢了，我真的很感谢任何人的反馈。

【问题讨论】：

标签： drop-down-menu dojo liquid-layout border-container

【解决方案1】：

您可能想看一下dojox.layout.ExpandoPane（但请注意，我认为它仅在一段时间内仅适用于顶部和左侧区域）。

另外，我建议稍微简化/更改您的布局。请参阅此处的示例：

http://jsfiddle.net/taFzv/

（可能需要一些调整才能得到你想要的。）

您遇到的真正问题可能是 BorderContainer 不知道视图的某些部分已调整大小。 ExpandoPane 通过告诉 BorderContainer 在动画完成后重新布局来解决这个问题。

【讨论】：

感谢肯的建议。我将对此进行试验并重新发布我的发现。我在 ExpandoPanes 方面没有取得很大成功，但我承认我并没有非常努力地正确理解它们的工作原理。再次感谢。

【解决方案2】：

在 IE8.0 下运行。当下拉框打开时，在页面上按住鼠标并拖动到底部，您可以看到内容被推到页面外。看起来浏览器无法检测到它，也无法将其添加到“滚动条”帐户。

【讨论】：

【解决方案3】：

我建议取出所有 BorderContainers，除了您的顶级之一，即以 mainPage 作为 id 的那个。

将您的 {stuff here} div 放入 mainPage BorderContainer 中，在 ContentPane 之后使用关闭/打开按钮。确保将其设为 dojotype dijit.layout.ContentPane，设置 layoutpriority，并将区域设置为顶部。单击打开/关闭按钮时将高度设置为 0/x，而不是设置显示。

再次尝试您的页面。如果这不能解决它，您可能需要调用布局、调整大小或两者，以向 BorderContainer 指示它需要评估其所有子级并正确调整“中心”窗格的大小。像 dijit.byId("mainPage").layout();在您更改任何 BorderContainer 子项的高度后，只要有人按下关闭/打开按钮，请执行此操作。

【讨论】：

凯文，感谢这些想法。我会试一试。我的“mainPage”容器的一个技巧是它实际上包含了更多的站点结构，我从这个示例中排除了这些结构只是为了演示问题。这并不一定会使您的建议无效，它只是解释了为什么在此示例中我似乎有一些不必要的结构。我确实认为你的第二个建议可能是我必须做的才能得到我想要的。我会在做一些测试后发回我的结果。再次感谢。

【解决方案4】：

也许dijit.form.DropDownButton 会满足您的需求。单击按钮时，会显示一个工具提示，可以填充您想要的任何内容。正如您所指定的，下拉工具提示仅在您单击按钮时显示，并且根本不会与底层布局混淆。工具提示位于页面“顶部”。

【讨论】：