How to implement tabbar functionality in the application based on TOUCH library.
In DHTMLX TOUCH tabbar can be implemented as a combination of two elements: one for presentation views and the other for switching between them (tabbar buttons).
Use MULTIVIEW to place content for each tab. For more details see the related chapter of this manual. Here is a quick sample:
dhx.ui({ view:"multiview", cells:[{ view:"list", id:"tab_1", ... }, { view:"list", id:"tab_2", ... }] })
There are two variants of buttons which suit tabbar functionality. In both cases you place buttons on toolbar component:
dhx.ui ({ view:"toolbar", elements:[{ view:"segmented", multiview:true, options: [{ value:"tab_1", label:"view_1"}, { value:"tab_2", label:"view_2"}] }] })
dhx.ui ({ view:"toolbar", elements:[{ view:"tabbar", multiview:true, options: [{ value:"tab_1", label:"view_1"}, { value:"tab_2", label:"view_2"}] }] })
In case of tabbar button you can use special type of toolbar - “buttonbar” - to make it more likely to the Apple way.
To link buttons of TABBAR and views of MULTIVIEW you need to give the same IDs to related elements - i.e. to the button and view and set the parameter multiview to true as you can see in the code samples above. Elements will be linked automatically without necessity to deal with events.
Related sample: 01_views/09_multiview.html