如何使 dijit Accordionpane 的高度动态化

发布于 2024-08-03 03:16:09 字数 781 浏览 7 评论 0原文

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

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

I can't figure out how to tell the accordioncontainer to set height of its accordion pane to auto so that the height of the pane is dynamic depending on its content.

In the following code I am adding two panes to an accordioncontainer. One has height of 10px and another has 90px but in both cases the height of the accordion pane is calculated to 10px. Looks like its always taking the height of the first one.

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>"});
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);

I am using dojo 1.3.2

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

万人眼中万个我 2024-08-10 03:16:09

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

: com/blog/2008/10/21/quick-fixes-and-dojo-support/" rel="nofollow noreferrer">http://www.sitepen.com/blog/2008/10/21/quick-fixes- and-dojo-support/

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

It is not currently possible. I wrote a blog / sample code to explain why and how to generate a group of TitlePane's that expand to their natural height (rather than the height of the container for the AccordionContainer):

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

It requires making a single TitleGroup widget (custom, code in blog), and placing TitlePane's inside. Each behave mostly like an AccordionPane (with title="" attributes, href="" loading capabilities, etc) and delegates title clicks to manage the open/closed state of siblings.

放低过去 2024-08-10 03:16:09

我重写了 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';
}

I Overrode the _getTargetHeight function of dijit.layout.AccordionContainer and always return 'auto' for height. Animation of sliding panes won't work correctly but its not that noticeable.

_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';
}
爱本泡沫多脆弱 2024-08-10 03:16:09

尝试将手风琴容器本身的尺寸设置为足够大以容纳您的内容加上必要的标题窗格,例如

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

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

try setting the dimensions on the Accordion Container itself to a size that is big enough to hold your content plus the necessary title panes, e.g.

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

The startup() call on the container should start up the child panes for you.

英雄似剑 2024-08-10 03:16:09

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

Now you can also just use dijit.TitlePanes with no container at all. You can pass open: false when you instantiate the panes to start them off closed. I think enclosing them in a dojox.widget.TitleGroup will emulate the behavior of having 1 open at a time.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文