Attaching Menu/Toolbar/Status

There is a possibility to attach a menu, a toolbar and a ribbon to a tab's top and status bar to a tab's bottom. Several components can be attached at a time.

Attaching a menu

1) Include dhtmlxMenu source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxmenu.css">
    <script src="dhtmlxmenu.js"></script>
</head>


2) Call the corresponding function:

var myMenu = myTabbar.tabs(id).attachMenu({
    // menu configuration
});


3) Learn more about dhtmlxMenu from the related documentation.

Attaching a toolbar

1) Include dhtmlxToolbar source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxtoolbar.css">
    <script src="dhtmlxtoolbar.js"></script>
</head>


2) Call the corresponding function:

var myToolbar = myTabbar.tabs(id).attachToolbar({
    // toolbar configuration
});


3) Learn more about dhtmlxToolbar from the related documentation.

Attaching a ribbon

1) Include dhtmlxRibbon source files on the page:

<head>
    <link rel="stylesheet" type="text/css" href="dhtmlxribbon.css">
    <script src="dhtmlxribbon.js"></script>
</head>


2) Call the corresponding function:

var myRibbon = myTabbar.tabs(id).attachRibbon({
    // ribbon configuration
});


3) Learn more about dhtmlxRibbon from the related documentation.

Attaching a status bar

1) There's no need to include extra JS/CSS files.


2) Call the corresponding function:

var sbObj = myTabbar.tabs(id).attachStatusBar({
    // status bar configuration, optional
    text:   "some text here",   // status bar text
    height: 35                  // custom height
});
 
// set status bar text
sbObj.setText("New text");
 
// get status bar text
var text = sbObj.getText();

Operations with attached components

1) You can show/hide any attached control without unloading it from memory, for example:

myTabbar.tabs(id).showMenu();
myTabbar.tabs(id).hideMenu();


2) You can detach and unload the attached control completely, for example:

// initialization
var myMenu = myTabbar.tabs(id).attachMenu({...});
 
// detaching later
myTabbar.tabs(id).detachMenu();
myMenu = null;


3) You can get link to the component's instance:

var myMenu = myTabbar.tabs(id).getAttachedMenu();
if (myMenu == null) {
    // not initialized
    myMenu = myTabbar.tabs(id).attachMenu({...});
}
Back to top