Dojo tabcontainer在tablist中添加自定义按钮

Question

我正在使用DOJO框架，我想知道如何在Tabcontainer Widget的“tabbar”中添加自定义内容？

我想在其中添加一个按钮来创建新标签。

我按照这个例子：

require(["dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function(TabContainer, ContentPane){
    var tc = new TabContainer({
        style: "height: 100%; width: 100%;"
    }, "tc1-prog");

    var cp1 = new ContentPane({
         title: "Food",
         content: "We offer amazing food"
    });
    tc.addChild(cp1);

    var cp2 = new ContentPane({
         title: "Drinks",
         content: "We are known for our drinks."
    });
    tc.addChild(cp2);

    tc.startup();
});

得到了这个：

如何添加带有“+”符号的第三个“假”标签，该标签将添加创建新标签并不切换标签视图。

这是我想要的快速和包包草图：

感谢您的帮助

Answer 1

这可以通过向TabContainer和ContentPane添加一些事件处理程序来实现。我会在这里给你一个简单的流程。

• 在代码中添加第三个ContentPane，标题为Add。
• 向onClick添加TabContainer个活动，以跟踪上次选择的标签。如果上次选择的标签带有标题＆＃39;添加＆＃39;，则此处不执行任何操作。您需要在下一点选择最后一个选项卡。
• 在onShow上添加ContentPane个活动标题＆＃39;添加＆＃39;跟踪单击此按钮的时间（选中选项卡）。在此，您将触发添加新选项卡流。并切换到您在onClick TabContainer事件中跟踪的最后一个选定标签。这会给人留下一个印象，即标签未切换，而您实际上是在添加新标签。

这应该提供您正在寻找的功能。