javascript - Dojo tabcontainer 在选项卡列表中添加自定义按钮

Question

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

我想在其中添加一个按钮来创建新选项卡。

我按照这个例子:

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

得到了这个:

如何添加带有“+”号的第三个“假”选项卡，该选项卡将创建一个新选项卡并且不切换选项卡 View 。

这是我想要的快速草图:

感谢您的帮助

Answer 1

这可以通过向 TabContainer 和 ContentPane 添加一些事件处理程序来实现。我将在这里为您提供一个简单的流程。

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

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