Question

我无法弄清楚如何告诉accordioncontainer将其accordion窗格的高度设置为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

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

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而没有容器。实例化窗格时，可以传递open: false以关闭它们。我认为将它们封装在dojox.widget.TitleGroup中会模仿一次打开1的行为。

如何使dijit Accordionpane的高度动态化

4 个答案: