如何使 dijit Accordionpane 的高度动态化答案

【问题标题】：How to make height of a dijit Accordionpane dynamic如何使 dijit Accordionpane 的高度动态化
【发布时间】：2009-09-01 19:11:22
【问题描述】：

我不知道如何告诉手风琴容器将其手风琴窗格的高度设置为自动，以便窗格的高度根据其内容是动态的。

在下面的代码中，我将两个窗格添加到手风琴容器中。一个高度为 10 像素，另一个高度为 90 像素，但在这两种情况下，手风琴窗格的高度都计算为 10 像素。看起来它总是占据第一个的高度。

var accordionContainer = new dijit.layout.AccordionContainer({'id':'accContainer'}).placeAt("test");
var accordPane = new dijit.layout.ContentPane({"title": "test", "content":"<div style='height:10px'>sdfsdfsdf</div&gt;"});
var accordPane2 = new dijit.layout.ContentPane({"title": "test1", "content":"<div style='height:90px'>sdfsdfsdf</div>"});

accordionContainer.addChild(accordPane);
accordionContainer.addChild(accordPane2, 1);
accordPane.startup();
accordPane2.startup();
accordionContainer.startup();
accordionContainer.selectChild(accordPane2);

我使用的是dojo 1.3.2

【问题讨论】：

标签： height dojo accordionpane

【解决方案1】：

目前不可能。我写了一篇博客/示例代码来解释为什么以及如何生成一组扩展至其自然高度（而不是 AccordionContainer 容器的高度）的 TitlePane：

http://www.sitepen.com/blog/2008/10/21/quick-fixes-and-dojo-support/

它需要制作一个 TitleGroup 小部件（自定义，博客中的代码），并将 TitlePane 放置在里面。每个行为都类似于 AccordionPane（具有 title="" 属性、href="" 加载功能等）并委托标题点击来管理兄弟姐妹的打开/关闭状态。

【讨论】：

谢谢但丁。使用您在博客中描述的标题窗格可能是正确的做法，但由于时间限制，我选择扩展 AccordionContainer 小部件并覆盖其 _getTargetHeight 函数并返回“auto”而不是实际高度。如果您发现这样做有任何副作用，请查看下面的解决方案并发表评论。谢谢。
如果它对你有用，那就划算。这里唯一需要注意的是方法 getTargetHeight 是一个“私有”方法（用下划线表示）并且_可能 将来可能会发生变化。只有公共 API总是保留在弃用政策中。并不是说它会改变，只是允许 Dijit 改变那些。您可能需要针对 Dojo/Dijit 的未来版本调整补丁以适应这种行为。（或者它可能成为一个特性并且该功能可能是多余的，谁知道，它是“私有的”:)）

【解决方案2】：

我覆盖了 dijit.layout.AccordionContainer 的 _getTargetHeight 函数，并始终返回 'auto' 作为高度。滑动窗格的动画将无法正常工作，但并不那么明显。

_getTargetHeight: function(/* Node */ node){
// summary:
//For the given node, returns the height that should be
//set to achieve our vertical space (subtract any padding
//we may have).
//This is used by the animations.

//var cs = dojo.getComputedStyle(node);
//return Math.max(this._verticalSpace - dojo._getPadBorderExtents(node, cs).h, 0);
return 'auto';
}

【讨论】：

【解决方案3】：

尝试将 Accordion Container 本身的尺寸设置为足以容纳您的内容和必要的标题窗格的大小，例如

#accContainer{
  height: 120px;
  width: 200px;
}

容器上的 startup() 调用应该会为您启动子窗格。

【讨论】：

感谢您的回复，但我的 Accordion Container 的高度是动态的，因为直到运行时我才知道将有多少窗格添加到容器中。

【解决方案4】：

现在您也可以只使用dijit.TitlePanes 而根本没有容器。当您实例化窗格以关闭它们时，您可以传递open: false。我认为将它们包含在 dojox.widget.TitleGroup 中将模拟一次打开 1 个的行为。

【讨论】：