expand collaps

## dhtmlxToolbar Guide and Samples

### Main features

- Multibrowser/Multiplatform support
- Full controll with JavaScript API
- Dynamic loading
- XML support
- different types of buttons
- customizable design
- horisontal and vertical layout
- high stability

### Supported browsers

- IE 5.x and above
- Mac OS X Safari
- Mozilla 1.4 and above
- FireFox 0.9 and above
- Opera (Xml loading depends on browser version)

### Working with dhtmlxToolbar

#### Initialize object on page

    <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

#### Set Event Handlers

    <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)

#### Adding buttons with Script

    <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

#### Configuring with XML

    <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

#### Examples of buttons manipulation

    <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>

© DHTMLX LTD.