如何使dijit Accordionpane的高度动态化

Question

我不知道如何告诉accordioncontainer将其折叠面板的高度设置为auto，这样窗格的高度就会根据其内容而动态变化。

在下面的代码中，我向accordioncontainer添加了两个窗格。一个面板的高度为10px，另一个面板的高度为90px，但在这两种情况下，折叠面板的高度都计算为10px。看起来它总是取第一个的高度。

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

Answer 1

我重写了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 2

这目前是不可能的。我写了一个博客/示例代码来解释为什么以及如何生成一组标题窗格，以扩展到它们的自然高度(而不是AccordionContainer容器的高度)：

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

它需要制作一个单独的TitleGroup小部件(自定义，博客中的代码)，并将标题窗格放在里面。每个组件的行为都很像AccordionPane (具有title="“attributes、href="”加载功能等)，并委托标题点击来管理同级组件的打开/关闭状态。

Answer 3

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

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

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