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'.
{view:"toolbar", type:"OptionsBar", data:[ { type:'button', id:"setButton", label: 'Settings', align: 'left'}, { type:'button', id:"helpButton", label: 'Help', align:'right'}] }
A normal button.
{ view:"toolbar", id:"TopToolbar", data:[ { type:"button", label: 'Settings', align:'center' click:"someFunction"} ]}
A round button.
{ view:"toolbar", id:"TopToolbar", data:[ { type:"round_button", label: 'Delete'} ]}
A ready-to-use icon.
{ view:"toolbar", id:"TopToolbar", data:[ { type:"icon", icon: 'refresh', align:"left"} ]}
A simple icon but you can handle any action on it. So, the element will behavior itself as you set.
{ view:"toolbar", id:"TopToolbar", data:[ { type:"image", id:"image", src: 'imgs/toolbar.png'} ]}
A control that represents some text and an image. You can click at any place to call a handler.
{ view:"toolbar", id:"TopToolbar", data:[ { type:"imagebutton", src:"imgs/true.gif", label:"Check", align:"center"} ]}
A normal text input field.
{ view:"toolbar", id:"TopToolbar", data:[ { type:"input", id:"input", value: "2010",size: 10, maxlength: 20, align:"center", disabled: true} ]}
A normal text label.
{ view:"toolbar", id:"TopToolbar", data:[ { type:"label", label: "DHTMLX", align:"center"} ]}
A holistic panel contained several buttons (two and more).
{ 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"} ]} ]}
A dropdown list.
{ view:"toolbar", id:"TopToolbar", height: 400, data:[ { type:"select", id:"select", options:[ { label:"female", value:"1"}, { label:"male", value: "2", selected:true} ]} ]}
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.
{ 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" }, ]} ]}