Toolbar in each tab

Hi

I’m trying to create a toolbar for each tab, but I can’t make it work.

How shall I add a toolbar for each tab properly? The example below does not work…

function createTabSystem(){
tabbar = new dhtmlXTabBar({
parent: “tabs”,
image_path: “./dhtmlx/dhtmlxTabbar/codebase/imgs/”,
skin: “default”,
});

tabbar.addTab(‘tabs1’, ‘test1’, ‘150px’);
tabbar.setContent(‘tabs1’, ‘div1’);

tab_toolbar1 = tabbar.cells(‘tabs1’).attachToolbar();
tab_toolbar1.setIconsPath(’./images/icons/new/png/16x16/’);

tab_toolbar1.addButton(‘tabs1_btn1’, 1, ‘btn1’, ‘’, ‘’);
tab_toolbar1.addButton(‘tabs1_btn2’, 2, ‘btn2’, ‘’, ‘’);

tab_toolbar1.attachEvent(“onClick”, function(id){
if(id==‘tabs1_btn1’){alert(‘tabs1_btn1’);};
if(id==‘tabs1_btn2’){alert(‘tabs1_btn2’);};
});

tabbar.addTab(‘tabs2’, ‘test2’, ‘150px’);
tabbar.setContent(‘tabs2’, ‘div2’);

tab_toolbar2 = tabbar.cells(‘tabs2’).attachToolbar();
tab_toolbar2.setIconsPath(’./images/icons/new/png/16x16/’);

tab_toolbar2.addButton(‘tabs2_btn1’, 1, ‘btn1’, ‘’, ‘’);
tab_toolbar2.addButton(‘tabs2_btn2’, 2, ‘btn2’, ‘’, ‘’);

tab_toolbar2.attachEvent(“onClick”, function(id){
if(id==‘tabs2_btn1’){alert(‘tabs2_btn1’);};
if(id==‘tabs2_btn2’){alert(‘tabs2_btn2’);};
});

tabbar.setTabActive(“tabs1”);
tabbar.showInnerScroll();
};

Hello

Toolbar, that is create by attachToolbar method, inherits tabbar skin - in your case “default”. But there is no “default” skin for toolbar, therefore the problems can occur.
You should either use dhx_skyblue or create the new skin by skin builder:

dhtmlx.com/docs/products/skinBuilder/index.shtml