如何使 dijit Accordionpane 的高度动态化

StackOverflow https://stackoverflow.com/questions/1364140

  •  20-09-2019
  •  | 
  •  

题

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

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

有帮助吗？

解决方案 2

我推翻dijit.layout.AccordionContainer的_getTargetHeight功能和总是返回“自动”的高度。滑动窗格的动画将无法正常工作，但它不是明显。

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

其他提示

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

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

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

试穿手风琴容器本身的尺寸设置为一个大小是大到足以容纳你的内容加上标题所需的窗格，e.g。

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

在启动（）在容器上调用应该启动子窗格你。

现在，你也可以只用dijit.TitlePanes没有任何容器。当实例的窗格，开始它们关闭关闭您可以通过open: false。我认为在dojox.widget.TitleGroup包围它们将模拟不必每次1个开放的行为。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top