Configuring Tabs

Closing Button for Each Tab

1) You can enable close button for all tabs from init:

// on init stage
var myTabbar = new dhtmlXTabBar({
    parent:         "tabbarObj",
    close_button:   true
});

2) You can enable close button with the help of the enableTabCloseButton() method

// in code but before tabs adding
myTabbar.enableTabCloseButton(true);

3) If you enabled closing button but want to hide it on certain tab, you need to specify close:false for this tab:

// on init stage
var myTabbar = new dhtmlXTabBar({
    parent:         "tabbarObj",
    close_button:   true,
    tabs: [
        {id: "a1", text: "Tab 1", active: true},
        {id: "a2", text: "Tab 2"},
        {id: "a3", text: "Tab 3", close: false} // tab w/o close button
    ]
});
 
// from js
// params: id, text, width, position, active, close);
myTabbar.addTab(
    "a4",       // id
    "Tab 4",    // tab text
    null,       // auto width
    null,       // last position
    false,      // inactive
    false       // disable close button <-- this one
);

Related sample:  Closing button

Setting/Getting Tab's Text

To set the text of a tab use the setText() method:

myTabbar.tabs(id).setText(text);

To get the text of a tab use the getText() method:

var text = myTabbar.tabs(id).getText();

Showing/Hiding Existing Tab

To show a tab use the show() method:

myTabbar.tabs(id).show();

To hide a tab use the hide() method:

myTabbar.tabs(id).hide();

Adding/Removing Tab

To add a tab use the addTab() method:

myTabbar.addTab("tabId", "Tab Text");

To remove a tab from tabbar use the close() method:

myTabbar.tabs(id).close();

Enabling/Disabling Tab

To enable a tab use the enable() method:

myTabbar.tabs(id).enable();

To disable a tab use the disable() method:

myTabbar.tabs(id).disable();

Setting/Getting the Active Tab

To select a tab use the setActive() method:

myTabbar.tabs(id).setActive();

To get the active tab use the method getActiveTab():

// get active tab
var actvId = myTabbar.getActiveTab();

Back to top