Question

以下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>

Answer 1

我采用了不同的方法，我有一个完整的实现，只是想要手风琴容器关闭一个窗格，如果它的标题栏被重新点击，所以我找到了具有我想要的行为的方法（实际上在父类中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代码库以确定正在发生的事情以及您应该做什么。这个改变对我来说看起来很安全，并且不会破坏键盘输入等...

Answer 2

你不能用accordioncontainer做到这一点。您可以使用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>

DOJO如何关闭Accordioncontainer小部件中的所有窗格

2 个答案: