Check documentation for the latest version of dhtmlxSuite Object Constructor DHTMLX Docs

Object Constructor

var myToolbar = new dhtmlXToolbarObject(parent, skin);


  • parent - {string} id of HTML element which will be used as parent (or object itself), mandatory
  • skin - {string} name of skin, optional
  • icon_path - {string} defines the URL where necessary user embedded icons are located (setIconsPath)
  • xml - {string}, URL of the data file in the XML format (loadStruct)
<div id='my_toolbar_here' style="width: 500px;"></div>
//common init code
var myToolbar = new dhtmlXToolbarObject("my_toolbar_here");

Toolbar can also be initialized by object notation:

myToolbar = new dhtmlXToolbarObject({
        alert("Toolbar item was clicked");  

Specifying Toolbar Items

Toolbar's items can be defined through items collection

myToolbar = new dhtmlXToolbarObject({
        {id: "new", type: "buttonSelect", text: "New", img: "new.gif", 
            img_disabled: "new_dis.gif"},
        {id: "sep1", type: "separator" },
        {id: "open", type: "button", img: "open.gif"},
        {id: "autosave", type: "buttonTwoState", text: "Autosave", img: "save.gif"},
        {id: "inp", type: "buttonInput", text: "Input"},
        {id: "sld", type: "slider", text_min: "10 MBit", text_max: "100 MBit"},
        {id: "info", type: "text", text: "dhtmlxToolbar Demo"}

Each item can have the following attributes:

  • id - {string} id of menu item
  • type - (string) type of menu item
  • text - {string} caption of menu item
  • img - {string} url of image related to menu item
  • img_disabled - {string} url which will be used for item in disabled state

Related sample:  Object API extended init

Back to top