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

Question

我正在使用 DOJO 框架，想知道如何在 Tabcontainer 小部件的 "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();
});

得到这个：

如何添加带有“+”号的第三个 "fake" 选项卡，这将添加创建一个新选项卡并不切换选项卡视图。

这是我想要的东西的快速草图：

感谢您的帮助

Answer 1

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

在您的代码中添加第三个 ContentPane，标题为 Add。
将 onClick 事件添加到您的 TabContainer 以跟踪最后选择的选项卡。如果最后选择的选项卡的标题为 'Add'，则您无需在此执行任何操作。您将需要在下一点中最后选择的选项卡。
在标题为 'Add' 的 ContentPane 上添加 onShow 事件以跟踪何时单击此按钮（已选择选项卡）。在此，您将触发添加新选项卡流程。并切换到您在 TabContainer 的 onClick 事件中跟踪的最后一个选定选项卡。这会给人一种标签没有切换的印象，而您实际上是在添加一个新标签。

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

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

Dojo tabcontainer add custom button in tablist

javascript

dojo

dijit.form

tabcontainer