Skip to main content

Work with Tabbar

dhtmlxTabbar inherits its API from dhtmlxLayout. So, you can apply any methods of Layout to manipulate Tabbar.

Adding/removing tabs​

You can quickly add/remove tabs of Tabbar on the fly with the help of the corresponding methods - addTab() and removeTab().

The addTab() method takes two parameters:

view(object) an object of a tab. It may include the following properties:
  • tab - the name of a tab
  • tabCss - the name of the CSS class used for a tab
  • css - the name of the CSS class used for a cell
  • header - the header of a cell
index(number) the position to add a tab into

// adding a new tab
tabbar.addTab({tab: "tab-" + nextTab++, css:"panel flex"}, 0);

Related sample: Tabbar. Add Tab

The removeTab() method expects the id of a tab you want to remove as its parameter. You can get the id of a tab via the getId() method:

// removing a tab
var id = tabbar.getId(0);
tabbar.removeTab(id);

Related sample: Tabbar. Remove Tab

Getting the id of a tab​

In order to get the id of a tab, make use of the getId() method. It takes the index of the tab in question as a parameter:

var id = tabbar.getId(0);

Setting/getting the active tab​

It is possible to set the active tab via Tabbar API, i.e. with the help of the setActive() method. It takes the id of a tab as a parameter:

var tabbar = new dhx.Tabbar("tabbar_container", {
    mode: "top",            
    views:[
        { id: "1", tab: "tab-1", css:"panel flex"},
        { id: "2", tab: "tab-2", css:"panel flex"},
        { id: "3", tab: "tab-3", css:"panel flex"},
        { id: "4", tab: "tab-4", css:"panel flex"}
    ]
});

tabbar.setActive("2");

Related sample: Tabbar. Set Active

To identify what tab is currently active, apply the getActive() method. It will return the id of the active tab.

var tabbar = new dhx.Tabbar("tabbar_container", {
    mode: "top",            
    views:[
        { id: "1", tab: "tab-1", css:"panel flex"},
        { id: "2", tab: "tab-2", css:"panel flex"},
        { id: "3", tab: "tab-3", css:"panel flex"},
        { id: "4", tab: "tab-4", css:"panel flex"}
    ]
});

var active = tabbar.getActive(); // -> "2"

Related sample: Tabbar. Get Active

Enabling/disabling a tab​

To enable a tab, use the enableTab() method:

tabbar.enableTab("London");

To disable a tab, use the disableTab() method:

tabbar.disableTab("London");
// -> true|false

Related sample: Tabbar. Disable Tab

Checking if a tab is disabled​

To check if a tab is disabled, pass the id of the tab as an argument to the isDisabled() method:

tabbar.isDisabled("London"); // -> returns true/false

To check if a currently active tab is disabled, call the isDisabled() method without parameters:

tabbar.isDisabled(); // -> returns true/false

Related sample: Tabbar. Is Disabled Tab

Attaching a component to a cell​

You can easily attach any DHTMLX component (except for Message, Popup, Window) to a cell of Tabbar using the attach method of a cell:

var dataview = new dhx.DataView(null, {
    template: dataviewTemplate,
    itemsInRow: 3,
    gap: "10px"
});

dataview.data.parse(dataset);

tabbar.getCell("dataview").attach(dataview);

Related sample: Tabbar. Attach

note

The Message, Popup, Window components can't be attached to the Tabbar cell because these components can't have the parent container due to their architecture principles.