Question

我正在使用Dojo的{{1}}来生成类似于Dijit Layout Theme Tester Demo的内容标签窗格。这里的所有标签都是可以关闭的。

问题是：当我关闭标签时，它会返回列表中的第一个标签，而不是之前的标签（旁边可用）。

你可以把它想象成在Firefox或Chrome中打开一个新选项卡并尝试关闭最后一个选项卡....在关闭选项卡上，它会将焦点更改为上一个选项卡，这是使用选项卡的可预测行为。但是对于Dijit s，默认情况下它会返回到第一个选项卡而不是之前的选项卡。当您考虑UI基础知识时，这是一个严重的缺陷。

我已使用dijit.TabContainer个文档进行了检查，但未发现任何暗示。知道怎么做吗？

Answer 1

好的，当单击 dijit.layout.ContentPane （选项卡）上的[X]按钮时，会生成 onClose 事件， dijit.layout .TabContainer 正在监听此事件，所以当发生这种情况时，它会执行回调 closeChild（）然后函数 removeChild（） 被执行，最后一个是你应该覆盖的那个。

tabContainer从 dijit.layout.StackContainer 继承这两个函数，你应该检查API文档。

因此，为了能够修改结束选项卡的默认行为，您应该覆盖默认功能，在下面的示例中我执行此操作。阅读评论，了解有关添加逻辑的位置的信息。

E.g。

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

Answer 2

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

显然，这两种方法都可以让您在关闭的标签上选择一个特定的不同窗格，而只需稍加调整......

关闭选项卡以关注前一个选项卡而不是第一个选项卡时，如何更改dojo内容选项卡焦点？

2 个答案: