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:
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:
Thanks for your help
This can be achieved by adding some event handlers to your TabContainer
and ContentPane
. I would give you a simple flow here.
ContentPane
in your code with title Add
.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.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.