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:

  • tab - (string) 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:  Add tab - DHTMLX Tabbar

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:  Remove tab - DHTMLX Tabbar

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:  Set active - DHTMLX Tabbar

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:  Get active - DHTMLX Tabbar

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:  Disable tab - DHTMLX Tabbar

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:  Is disabled tab - DHTMLX Tabbar

Back to top