1

以下 Accordioncontainer 代码。我正在尝试关闭所有窗格。请帮我

  <div style="width: 300px; height: 300px">
    <div data-dojo-type="dijit/layout/AccordionContainer" style="height: 300px;">
        <div data-dojo-type="dijit/layout/ContentPane" title="Heeh, this is a content pane">
            Hi!
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" title="This is as well" selected="true">
            Hi how are you?
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" title="This too">
            Hi how are you? .....Great, thx
        </div>
    </div>
</div>
4

2 回答 2

3

我采取了不同的方法，我有一个完整的实现，只是希望手风琴容器在重新单击标题栏时关闭窗格，所以我找到了具有我想要的行为的方法（实际上在父类 djijt.layout .StackContainer) 并通过覆盖新子类中的方法对其进行调整。

define([
    "dojo/_base/declare",
    "dojo/when",
    "dijit/registry",
    "dijit/layout/AccordionContainer"
], function(declare, when, registry, AccordionContainer) {
    return declare("yourproject.CloseableAccordionContainer", [AccordionContainer], {

        // tweak the AccordionContainer so you can close panes
        selectChild: function(/*dijit/_WidgetBase|String*/ page, /*Boolean*/ animate) {
        // summary:
        //      If the selected widget is already showing, hide it. 
        //      Otherwise perform normally.
        page = registry.byId(page);

            if (this.selectedChildWidget == page) {
                // If the selected child is re-selected, hide or show it based
                // on current visibility. Had to disable animation but could
                // be enabled by overriding the _transition method
                var d;
                if(page.selected) {
                    d = this._transition(false, page, false);
                } else {
                    d = this._transition(page, false, false);
                }

                // d may be null, or a scalar like true.
                // Return a promise in all cases
                return when(d || true);     // Promise
            } else {
                return this.inherited(arguments);
            }
        }
    });
});

定义了此类后，您应该能够执行以下操作：

<div style="width: 300px; height: 300px">
    <div data-dojo-type="yourproject/CloseableAccordionContainer" style="height: 300px;">
        <div data-dojo-type="dijit/layout/ContentPane" title="Heeh, this is a content pane">
            Hi!
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" title="This is as well" selected="true">
            Hi how are you?
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" title="This too">
            Hi how are you? .....Great, thx
        </div>
    </div>
</div>

如果您使用这种方法来覆盖正常的 Dojo 行为，请确保在所有目标平台上进行测试，可能会有您不知道的副作用。请记住，这是 OOP 的全部要点 - 扩展而不是重新定义，但是您需要深入研究 Dojo 代码库以找出正在发生的事情以及您应该做什么。这种变化对我来说看起来很安全，并且不会破坏键盘输入等......

于 2014-07-25T02:56:59.467 回答
1

你不能用手风琴容器做到这一点。您可以通过使用 dojox/widget/TitleGroup 和 dijit/TitlePane 来实现您想要的，如下所示：

<div style="width: 300px; height: 300px">
    <div data-dojo-type="dojox/widget/TitleGroup">
        <div data-dojo-type="dijit/TitlePane" open='false' title="Heeh, this is a content pane">
            Hi!
        </div>
        <div data-dojo-type="dijit/TitlePane" open='false' title="This is as well" selected="true">
            Hi how are you?
        </div>
        <div data-dojo-type="dijit/TitlePane" open='false' title="This too">
            Hi how are you? .....Great, thx
        </div>
    </div>
</div>
于 2013-02-17T19:59:08.073 回答