How to Start with Toolbar

New Toolbar Object Creation

To create a Toolbar object you should take 4 steps. Shortly, they look as:

The steps that need to be taken for dhtmlxToolbar's initialization are the following:

Step 1.Including Related Files

Each DHTMLX component can be used standalone or as a part of the general library.

If you use dhtmlxToolbar standalone you need to include 2 files:

dhtmlxtoolbar.js
dhtmlxtoolbar.css

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" href="../codebase/skins/dhtmlxtoolbar.css">
        <script src="../codebase/dhtmlxtoolbar.js"></script>
    </head>
    <body>
    ...
    </body>
</html>

If you use dhtmlxToolbar as a part of "dhtmlxSuite" package, you need to include 2 files:

dhtmlx.js
dhtmlx.css

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

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" 
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js" 
    type="text/javascript"></script>

In case the toolbar's icons are placed vertically after initialization, you should check, if you've included the css file in the right way.

If it's all right, there may be some problems with the used skin.

Step 2. Defining a Toolbar Container

The next step: an HTML container for your future toolbar. To implement this step we can choose one of the ways:

Create a new HTML container.
```
 <div id="toolbarObj"></div>
```
In this example the object is a <div> element on page, which is placed in the <body> tag.

Put a toolbar into some DHTMLX container component: layout, window, accordion, tabbar.

// attach to Layout
dhxLayout.attachToolbar();
dhxLayout.cells(id).attachToolbar();
// attach to Window
dhxWins.window(id).attachToolbar();
// attach to Accordion
dhxAcc.cells(id).attachToolbar();
// attach to Tabbar
dhxTabbar.cells(id).attachToolbar();

Step 3. Creating Object Constructor

The next step is to create a new dhtmlXToolbarObject and place it after the <div> element (object) that we've created:

var myToolbar = new dhtmlXToolbarObject(baseId, skin);

"baseId" defines an HTML object on page to which the toolbar is attached (the main toolbar container in the code mentioned above).
"skin" is the optional parameter which defines the skin, that will be applied to the toolbar. If this argument is not set, the component will be created with the default skin ("dhx_skyblue").

So, in our case the code will look like this:

var myToolbar = new dhtmlXToolbarObject("toolbarObj");

Toolbar object constructor is considered in detail in the article Object Constructor.

Step 4. Setting Image Path

The setIconsPath() method should be used to set the full path to the directory, where toolbar image files are located. By means of this method the user is able to set path to the directory, where icons images are stored.

The following code string should be placed before any of data loading methods:

myToolbar.setIconsPath("[full path to icons image files directory]");

In case icons are placed vertically after toolbar initialization, check, if you've included the css file in the right way. If it's all right, there are possibly some problems with the used skin.

Related sample: Object API simple init