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 - addCell and removeCell.

The addCell 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.addCell({tab: "tab-" + nextTab++, css:"panel flex"}, 0);

The removeCell 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.removeCell(id);

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");

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"
Back to top