Search code examples
javascriptdojodijit.formtabcontainer

Dojo tabcontainer add custom button in tablist

I’m using the DOJO framework and am wondering on how to add custom stuff in the "tabbar" of the Tabcontainer Widget?

I would like to add a button in there to create a new tab.

I followed this example:

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

and got this:

enter image description here

How can I add a third "fake" tab with a "+" sign that will add create a new tab and do not switch the tabview.

Here is a quick and bag sketch of what I want:

enter image description here

Thanks for your help

Solution

  • This can be achieved by adding some event handlers to your TabContainer and ContentPane. I would give you a simple flow here.

    • Add a third ContentPane in your code with title Add.
    • Add a onClick event to your TabContainer to track the last selected tab. If last selected tab is with title 'Add', you do nothing here. You would need the last selected tab in the next point.
    • Add onShow event on the ContentPane with title 'Add' to track when this button is clicked(tab is selected). In this, you would trigger the Add new tab flow. And switch to the last selected tab that you are tracking in the onClick event of TabContainer. This would give an impression that the tab is not switched and you are actually adding a new tab.

    This should provide the functionality that you are looking for.