1

Theme Tester Demoに似たコンテンツタブペインを生成するためにDojoを使用しています。ここのタブはすべて閉じることができます。Dijit LayoutDijit

問題は、タブを閉じると、前のタブ (横にあるタブ) ではなく、リストの最初のタブに戻ることです。

Firefox や Chrome で新しいタブを開き、最後のタブを閉じてみるようなものと考えることができます。タブを閉じると、タブを操作するための予測可能な動作である前のタブにフォーカスが変わります。しかし、dijit.TabContainers を使用すると、デフォルトで前のタブではなく最初のタブに戻ります。UI の基本を考えると、これは重大な欠陥です。

ドキュメントで確認しdojoましたが、これに関するヒントは見つかりませんでした。方法はありますか？

4

2 に答える 2

3

わかりましたので、 dijit.layout.ContentPane (タブ)の [X] ボタンがクリックされると、イベントonCloseが生成されます。dijit.layout.TabContainerはこのイベントをリッスンしているため、これが発生すると、コールバックcloseChild()が実行されます。次に、関数removeChild()が実行されます。この最後の関数はオーバーライドする必要があります。

tabContainer は、この 2 つの関数をdijit.layout.StackContainerから継承します。API ドキュメントを確認する必要があります。

したがって、閉じるタブのデフォルトの動作を変更できるようにするには、デフォルトの機能をオーバーライドする必要があります。以下の例ではこれを行います。ロジックを追加する場所については、コメントをお読みください。

例えば

<script>
    require([
        "dojo/parser",

        "dojo/_base/lang", //this is the one that has the extend function
        "dojo/topic", //this is needed inside the overrided function

        "dijit/layout/TabContainer",
        "dijit/layout/ContentPane", 

        "dojo/domReady!"
    ], function(Parser, lang, topic, tabContainer, contentPane){
        Parser.parse();

        // this will extend the tabContainer class and we will override the method in question
        lang.extend(tabContainer, {

            // this function, i copied it from the dijit.layout.StackContainer class
            removeChild: function(/*dijit._Widget*/ page){

                // for this to work i had to add as first argument the string "startup"
                this.inherited("startup", arguments);

                if(this._started){
                    // also had to call the dojo.topic class in the require statement
                    topic.publish(this.id + "-removeChild", page);  
                }

                if(this._descendantsBeingDestroyed){ return; }

                if(this.selectedChildWidget === page){
                    this.selectedChildWidget = undefined;
                    if(this._started){
                        var children = this.getChildren();
                        if(children.length){

                            // this is what you want to add your logic
                            // the var children (array) contains a list of all the tabs
                            // the index selects the tab starting from left to right 
                            // left most being the 0 index   

                            this.selectChild(children[0]);
                        }
                    }
                }

                if(this._started){
                    this.layout();
                }
            }
        });

        // now you can use your modified tabContainer WALAAAAAAA!
        // from here on, normal programmatic tab creation
        var tc = new tabContainer({
            style: "height: 100%; width: 100%;",
        }, "tab-container-div-id");

        var cp1 = new contentPane({
            title: "First Tab",
            closable: true
        });
        tc.addChild(cp1);

        var cp2 = new contentPane({
            title: "Second Tab",
            closable: true
        });
        tc.addChild(cp2);

        var cp3 = new contentPane({
            title: "Third Tab",
            selected: true,
            closable: true
        });
        tc.addChild(cp3);

        tc.startup();
    });
</script>
于 2012-04-13T18:45:14.030 に答える
0

Dojo 1.10 では、(最初のタブに戻るのではなく) 前のタブに戻ることが TabContainers の通常の動作です。

おそらく、古い動作を取得するために使用できますdojo/aspect(警告: テストされていません):

require( [ 'dijit/registry', 'dojo/aspect', 'dojo/_base/lang' ],
    function( registry, aspect, lang )
    {
        var tabContainer = registry.byId( 'tab_container');
        aspect.before( tabContainer, 'removeChild', lang.hitch( tabContainer, function( page )
        {
            if(this.selectedChildWidget === page)
            {
                this.selectedChildWidget = undefined;
                if(this._started)
                {
                    var children = this.getChildren();
                    this.selectChild( children[0] );
                }
            }

            return page;
        } ) );
    }
);

onCloseまたは、代わりに、タブの拡張ポイントを使用することもできますContentPane:

require( [ 'dijit/registry', 'dojo/_base/lang' ],
    function( registry, lang ) {
        newTabPane.onClose = lang.hitch(this, function () {
            // select first
            var tabContainer = registry.byId('tab_container'),
                all_tabs = tabContainer.getChildren();
            tabContainer.selectChild( all_tabs[0] );

            // allow save to go ahead
            return true;
        });
    }
);

明らかに、これらのアプローチはどちらも、少し調整するだけで、閉じているタブで特定の異なるペインを選択できるようになります...

于 2015-10-15T09:45:22.217 に答える