This article covers tabbar component usage. You will know how to create views and how to change them over.
Please, don't confuse tabbar control and tabbar component. These are different things: the first one is a control of the toolbar component, the second - independent component.
We'll consider a simple example: 3 views which we change over by clicking on the appropriate toolbar' item.
The first thing you must make is define dhx.ready() function which ensures that our code does not execute until the page has loaded.
dhx.ready(function(){ dhx.ui({ .. }) })
As tabbar inherits from layout, the next thing you must do is to define layout. Then, in one of its rows(cols) specify tabbar. Remember about ids. Each tab must have id.
dhx.ready(function(){ dhx.ui({ container:"groupBox", rows:[{ gravity:2, view:"tabbar", cells:[{ template:"Monday", id:"tab_1"}, { template:"Tuesday", id:"tab_2"}, { template:"Wednesday", id:"tab_3"}] }] }) })
After, you need to create element-changer. The handiest way is tabbar control (actully, exactly for this purpose it was developed).
In the parameters 'key' you need to specify ids of the tabbar tabs.
We create toolbar in the first row ( displace tabbar to the second row)
dhx.ready(function(){ dhx.ui({ container:"groupBox", rows:[{ //first row view:"toolbar", type:"BigTabBar", id:"topbar", data:[{ type:"tabbar", id:'tabbar', selected: 'tab_2', unit_width:102, tabs: [ { label: 'MONDAY', key: 'tab_1'}, { label: 'TUESDAY', key: 'tab_2'}, { label: 'WEDNESDAY', key: 'tab_3'}], }] }, { //second row gravity:2, view:"tabbar", cells:[{ template:"Monday", id:"tab_1"}, { template:"Tuesday", id:"tab_2"}, { template:"Wednesday", id:"tab_3"}] }] }) })
All the needed elements are in their places. We are left to attach event and specify the appropriate handler.
$$("topbar").attachEvent("onBeforeTabClick",function(button,id){ $$(id).show(); return true })
It seems like it's all but if you run the app now, you'll see that the tab content doesn't conform to selected control's item. It's because of we won't make clicks yet and initial data was loaded. One more codeline and everything will be correct.
$$("tab_2").show();