The methods and events
Now open up the Chrome browser with the developer tools visible console, and we will begin to learn about the DTHMLX toolbar object. We will attach a toolbar, add toolbar items, and bind events.
Initialization choices
The DHTMLX toolbar can be initiated in two ways. The first way is by attaching it to a DOM element. The second way is by attaching it to an existing DHTMLX layout or cell.
Initialization on a DOM element
First we will attach a toolbar to a DOM element. For these exercises, we will be using the same web page as the application. To test attaching a toolbar to a DOM element, we must first clear the page and create an element inside the body
tag. We will do this with JavaScript.
Type and run the following code line in the console:
document.body.innerHTML = "<div id='myToolbarCont'></div>";
We just cleared the contents of the body and replaced it with a div
tag that has the id
attribute of myToolbarCont
.
Next initialize and attach a toolbar to that div...