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 に答える