Initialization

To add dhtmlxToolbar into an application, you need to take the following simple steps:

Download the Toolbar package and unpack it into a folder of your project
Include source files
Create a container
Initialize Toolbar with the object constructor
Load data into Toolbar

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with dhtmlxToolbar</title>         
        <script type="text/javascript" src="../../codebase/suite.js"></script>
        <link rel="stylesheet" href="../../codebase/suite.css">
    </head>
    <body>
        <div id="toolbar_container"></div>
        <script>            // creating dhtmlxToolbar
            var toolbar = new dhx.Toolbar("toolbar_container");
        </script>
    </body>
</html>

Include source files

Create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:

suite.js
suite.css

<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Create a container

Add a container for the Toolbar and give it an id, e.g. "toolbar_container":

<div id="toolbar_container"></div>

Initialize Toolbar

Initialize Toolbar with the dhx.Toolbar object constructor. The constructor takes as a parameter the HTML object on the page that serves as the toolbar container.

var toolbar = new dhx.Toolbar("toolbar_container");

Load data into Toolbar

There are two handy ways of loading data, i.e. a set of controls into Toolbar:

from an external file with the help of the load() method of tree collection:

var toolbar = new dhx.Toolbar("toolbar_container");
toolbar.data.load("../common/dataset.json");

from a local source using the parse() method of tree collection:

var data = [
    {
        type: "button",
        icon: "dxi-plus",
        value: "new"
    },
    {
        type: "button",
        icon: "dxi-folder-open",
        value: "open"
    },
    {
        type: "button",
        icon: "dxi-vault",
        value: "save"
    },
    {
        type: "button",
        icon: "dxi-delete",
        value: "delete"
    }
]
 
var toolbar = new dhx.Toolbar("toolbar_container", {css:"dhx_toolbar--bordered" });
toolbar.data.parse(data);

Detailed information on loading data into Toolbar is given in the article Data Loading.