DHTMLX Touch documentation

Toolbar controls:types & attributes

In this section you will find full definition of all the controls which can be used in toolbar. Before individual element description, some common information concerned all elements.

Common features. When declare any control, you can define a css class for it as an attribute 'class' inside 'data' block. How it can be useful for you? By defining classes for elements you can group elements and specify some common staff for them. For example, the same button in different situation can look differently.

{ view:"toolbar", data:[{
                     type:"button",label: 'Save', class:'SomeClass' align:'right'},
		     .. }]
}

The second common feature of all the controls are parameter 'align'.

  • align - (left, right or center) the alignment of the control in toolbar
{view:"toolbar", type:"OptionsBar", data:[
					{ type:'button', id:"setButton", label: 'Settings', align: 'left'},
					{ type:'button', id:"helpButton", label: 'Help', align:'right'}]
}

button

A normal button.

  • label - (string) the button's text
  • popup - (string) the id of the popup object you'd like to attach to (know more here)
  • click - (function) the function which will be executed on the button click. The function implementation you can write straight into the parameter or define it separately and write into the parameter just the function's name.
{ view:"toolbar", id:"TopToolbar", data:[
	{ type:"button", label: 'Settings', align:'center' click:"someFunction"}
]}

round_button

A round button.

  • label - (string) the button's text
{ view:"toolbar", id:"TopToolbar", data:[
	{ type:"round_button", label: 'Delete'}
]}

icon

A ready-to-use icon.

  • icon - ('refresh') the type of the icon
{ view:"toolbar", id:"TopToolbar", data:[
	{ type:"icon", icon: 'refresh', align:"left"}
]}

image

A simple icon but you can handle any action on it. So, the element will behavior itself as you set.

  • src - (URL) the path to the icon
{ view:"toolbar", id:"TopToolbar", data:[
	{ type:"image", id:"image", src: 'imgs/toolbar.png'}
]}

imagebutton

A control that represents some text and an image. You can click at any place to call a handler.

  • src - (URL) the path to the image
  • label - (string) the text of the button
{ view:"toolbar", id:"TopToolbar", data:[
	{ type:"imagebutton", src:"imgs/true.gif", label:"Check", align:"center"}
]}

input

A normal text input field.

  • value - (string) the value of the element
  • size - (integer)the amount of the visible symbols
  • maxlength - (integer) the max amount of the symbols
  • disabled - (boolean) defines wheather or not an element will be able
{ view:"toolbar", id:"TopToolbar", data:[
	{ type:"input", id:"input", value: "2010",size: 10, maxlength: 20, align:"center", disabled: true}
]}

label

A normal text label.

  • label - (string) the label's text
{ view:"toolbar", id:"TopToolbar", data:[
	{ type:"label", label: "DHTMLX", align:"center"}
]}

segmented

A holistic panel contained several buttons (two and more).

  • segment - defines individual segments (buttons)
    • key - (string) the button's name which will be used in program for element calling
    • label - (string) the button's label
{ view:"toolbar", id:"TopToolbar", data:[
	{ type:"segmented", id:"tabs", segment:[
	   {key:"tab_a", label:"Section A"},
           {key:"tab_b", label:"Section B"},
           {key:"tab_c", label:"Section C"}
	]}
]}

select

A dropdown list.

  • options - the array of the select list options
    • label - (string) the label of the element
    • value - (string) the value of the element
    • selected - (boolean) defines wheather or not an element will be selected initially
{ view:"toolbar", id:"TopToolbar", height: 400, data:[
	{ type:"select", id:"select", options:[
	   { label:"female", value:"1"},
           { label:"male", value: "2", selected:true}
	]}
]}

tabbar

A panel contained several buttons.

The difference between tabbar and segmented is that buttons of the segmented control are placed close to each other and don't have any space between.

  • selected - (boolean) defines wheather or not a button will be selected initially. One of the tabs always must be selected.
  • tabs - defines individual tabs (buttons)
    • label - (string) the label of the element
    • src - (URL) the path to the image that will be shown when a tab is not selected
    • src_selected - (URL) the path to the image that will be shown when a tab is selected. If you don't define this attribute, tab will have the same image at both states.
    • key - (string) tab's name which will be used in program for element calling
{ view:"toolbar", id:"TopToolbar", data:[
	{ type:"tabbar", id:'tabbar', selected: 'tabbar_2', tabs: [   
	   { label: "Controls", src: "imgs/tabbar/home.png", src_selected: "imgs/tabbar/games_selected.png", key: "tabbar_1" },
	   { label: "Music", src: "imgs/tabbar/video.png", src_selected: "imgs/tabbar/video_selected.png", key: "tabbar_2" },
	   { label: "Games", src: "imgs/tabbar/music.png", src_selected: "imgs/tabbar/music_selected.png", key: "tabbar_3" },
	]}
]}