height - 如何使 dijit Accordionpane 的高度动态化

Question

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

在下面的代码中，我将两个窗格添加到手风琴容器。一个高度为 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);

我正在使用道场 1.3.2

Answer 1

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

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

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

Answer 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';
}

Answer 3

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

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

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

Answer 4

现在你也可以只使用dijit.TitlePane没有容器的 s 。open: false当您实例化窗格以关闭它们时，您可以通过。我认为将它们封闭在一个dojox.widget.TitleGroup将模拟一次打开 1 个的行为。