DHTMLX Touch documentation

How to create your own toolbar type ?

You can define your own toolBar type.
Here is an example of how to make it:

dhx.Type(dhx.ui.toolbar, {
 name:"BigButtonsBar",
 css:"dhx_bigbuttonsbar",
 height: 55,
});

Parameters

In the dhx.Type() you can set the following parameters:

  • name - the name of the new created type.
  • css - the appropriate css class
    Parameter specifies an attribute 'class' where you define all staff for toolbar elements' appearance & behavior.
  • height - the height of the toolbar
  • vertical - lets to set toolbar's width
    (boolean) The parameter define whether ('true') or not ('false') toolbar's width can be set. The default value is 'false'.
    Please note, if you set the parameter to 'true', the parameter 'height' will be ignored and the standart height specified.
    You can't set height and width of the toolBar at the same time.
  • width - the width of the toolbar

Extra parameters

You can use 3 more parameters if you need to change the existed type cardinally. The parameters cooperate and define the toolBar.

  • template
  • template_start
  • template_end

Firstly, code contained in template_start parameter is executed. Then, code from the template and finally, template_end's code.

dhx.Type(dhx.ui.toolbar, {
  name:"TransparentBar"
  css:"dhx_transparentbar",
  template:dhx.Template("#value#"),
  vertical:true,
  width:210,
  template_start:dhx.Template("<div dhx_l_id='#id#' class='dhx_list_item dhx_list_{common.css}_item{obj.$selected?_selected:}' style='width:{common.width}px; height:{common.height}px; padding:{common.padding}px; margin:{common.margin}px; overflow:hidden;'>"),
  template_end:dhx.Template("</div>")
}