<div id="toolbarBox" style="width:600;height:30"></div> <script> //horisontal toolbar toolbar=new dhtmlXToolbarObject("toolbarBox","100%","20","Demo"); toolbar.loadXML("config.xml"); toolbar.showBar(); //vertical toolbar toolbar=new dhtmlXToolbarObject("toolbarBox","100%","20","Demo",1); toolbar.loadXML("config.xml"); toolbar.showBar(); </script> Parameters passed to the constructor are:

object to attach toolbar to (should be loaded before calling constructor)

width of the toolbar

height of the toolbar

toolbar caption (optional)

vertical mode flag (optional)

Additional initialisation methods:

loadXML(url) - load toolbar configuration from xml

showBar() - show toolbar

<div id="toolbarBox" style="width:200;height:200"></div> <script> toolbar=new dhtmlXToolbarObject("toolbarBox","100%","20","Demo"); ... toolbar.setOnClickHandler(onClick);//set function object to call on toolbar button select toolbar.setOnShowHandler(onShow);//set function to call on toolbar show toolbar.setOnHideHandler(onHide);//set function to call on toolbar hide toolbar.setItemAction(itemId, itemOnClickAction); //set on select action for single button </script>

Selected button ID will be passed to function specified as argument for setOnClickHandler(funcObj)

<script> toolbar=new dhtmlXToolbarObject("toolbarBox","100%","20","Demo"); ... toolbar.addItem(new dhtmlXImageButtonObject('icon21.gif',20,18,0,'new_Id','New tooltip')) toolbar.addItem(new dhtmlXImageTextButtonObject('icon21.gif','New button',20,18,0,'new_Id','New tooltip')) </script>

For list of initialisation parameters for different button types see documentation on relative objects

<script> toolbar=new dhtmlXToolbarObject('treeBox',"100%","100%",0); toolbar.loadXML("config.xml"); </script> XML Syntax: <?xml version='1.0' encoding='iso-8859-1'?> <toolbar name="Demo toolbar" width="100%" height="20" disableType="image" absolutePosition="auto" toolbarAlign="left"> <ImageButton src="../sysGfx/iconSave.gif" height="25" width="25" id="0_save" tooltip="Save" disableImage="sysGfx/iconPrint.gif"/> <ImageTextButton src="../sysGfx/iconDelete.gif" height="25" width="100px" id="0_delete" tooltip="Delete">Delete</ImageTextButton> <divider id="div_4"/> <SelectButton id="0_select" width="150px" height="16px"> <option value="0">Mode 0</option> <option value="1">Mode 1</option> <option value="2">Mode 2</option> <option value="3">Mode 3</option> </SelectButton> </toolbar> <toolbar> node is mandatory.
Optional parameters for this tag are:

name - toolbar caption

width - toolbar width

height - toolbar height

disableType - if set to "image", then disabled buttons change their image, else only CSS changed

absolutePosition - positioning method of toolbar, allowed values: "absolute, relative, auto"

toolbarAlign - align of buttons on toolbar

globalCss - CSS class for buttons instead of default

globalTextCss - CSS class for buttons text instead of default

<divider> - toolbar divider
Mandatory parameter for this tag is:

id - id of the item

<ImageButton> toolbar button with image
Mandatory parameters for this tag are:

src - src of image

id - id of the button

Optional parameters for this tag are:

width - button width

height - button height

disableImage - alternative image src, for disabled state

tooltip - button tooltip

<ImageTextButton> toolbar button with image and text
Mandatory parameters for this tag are:

src - src of image

id - id of the button

Optional parameters for this tag are:

width - button width

height - button height

disableImage - alternative image src, for disabled state

tooltip - button tooltip

<SelectButton> button with select control, contain subitems - select options.
Mandatory parameters for this tag are:

src - src of image

id - id of the button

Optional parameters for this tag are:

width - button width

height - button height

disableImage - alternative image src, for disabled state

tooltip - button tooltip

<TwoStateButton> toolbar button with image and text, which can be in two states (pressed and unpressed)
Mandatory parameters for this tag are:

src - src of image

id - id of the button

Optional parameters for this tag are:

width - button width

height - button height

disableImage - alternative image src, for disabled state

tooltip - button tooltip

pressedState - button pressed state (false - unpressed, true - pressed)

<option> option data for select button
Mandatory parameters for this tag are:

value - select option value

<script> toolbar.hideButtons(listOfIds); //hide items, listOfIds - list of comma separated ids toolbar.showItem(itemId); //show item toolbar.disableItem(itemId); //disable item or var item=toolbar.getItem(itemId); //get item object by id item.disable(); //disable item.setImage(newImageUrl); // set new image item.setText(newButtonText); // set new image text (only for dhtmlxImageTextButton objects) </script>