<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxtoolbar_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxtoolbar_dhx_web.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxTabbar/codebase/dhtmlxtabbar.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_web.css">
<script src="../../codebase/dhtmlxcommon.js"></script>
<script src="../../codebase/dhtmlxtoolbar.js"></script>
<script src="../../../dhtmlxTabbar/codebase/dhtmlxcontainer.js"></script>
<script src="../../../dhtmlxTabbar/codebase/dhtmlxtabbar.js"></script>
<script src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script>
var dhxTabbar,
dhxGrid,
dhxToolbar;
function doOnLoad() {
    dhxTabbar = new dhtmlXTabBar("tabbarObj");
    dhxTabbar.setImagePath("../../../dhtmlxTabbar/codebase/imgs/");
    dhxTabbar.setSkin("dhx_skyblue");
    dhxTabbar.addTab("a1", "Mobile Phones", 120);
    dhxTabbar.addTab("a2", "Tab 2", 75);
    dhxTabbar.addTab("a3", "Tab 3", 75);
    dhxTabbar.setTabActive("a1");
    dhxGrid = dhxTabbar.cells("a1").attachGrid();
    dhxGrid.setImagePath("../../../dhtmlxGrid/codebase/imgs/");
    dhxGrid.loadXML("../common/grid.xml?etc=" + new Date().getTime());
    dhxToolbar = dhxTabbar.cells("a1").attachToolbar();
    loadToolbar(18);
    //;
    dhxTabbar2 = new dhtmlXTabBar("tabbarObj2");
    dhxTabbar2.setImagePath("../../../dhtmlxTabbar/codebase/imgs/");
    dhxTabbar2.setSkin("dhx_web");
    dhxTabbar2.addTab("a1", "Mobile Phones", 120);
    dhxTabbar2.addTab("a2", "Tab 2", 75);
    dhxTabbar2.addTab("a3", "Tab 3", 75);
    dhxTabbar2.setTabActive("a1");
    dhxGrid2 = dhxTabbar2.cells("a1").attachGrid();
    dhxGrid2.setImagePath("../../../dhtmlxGrid/codebase/imgs/");
    dhxGrid2.loadXML("../common/grid.xml?etc=" + new Date().getTime());
    dhxToolbar2 = dhxTabbar2.cells("a1").attachToolbar();
    loadToolbar2(18);
}
function loadToolbar(a) {
    dhxToolbar.clearAll();
    dhxToolbar.setIconSize(a);
    dhxToolbar.setIconsPath("../common/icon_size/" + a + "/");
    dhxToolbar.loadXML("../common/dhxtoolbar_button2.xml?" + new Date().getTime());
}
function loadToolbar2(a) {
    dhxToolbar2.clearAll();
    dhxToolbar2.setIconSize(a);
    dhxToolbar2.setIconsPath("../common/icon_size/" + a + "/");
    dhxToolbar2.loadXML("../common/dhxtoolbar_button2.xml?" + new Date().getTime());
}</script>
 
<table>
<tr>
    <td>
        <div style="padding-bottom: 10px;">
            <input type="button" value="18" onclick="loadToolbar(18);">
            <input type="button" value="24" onclick="loadToolbar(24);">
            <input type="button" value="32" onclick="loadToolbar(32);">
            <input type="button" value="48" onclick="loadToolbar(48);">
        </div>
        <div id="tabbarObj" style="position: relative; width: 370px; height: 400px;"></div>
    </td>
    <td width="50">&nbsp;</td>
    <td>
        <div style="padding-bottom: 10px;">
            <input type="button" value="18" onclick="loadToolbar2(18);">
            <input type="button" value="24" onclick="loadToolbar2(24);">
            <input type="button" value="32" onclick="loadToolbar2(32);">
            <input type="button" value="48" onclick="loadToolbar2(48);">
        </div>
        <div id="tabbarObj2" style="position: relative; width: 370px; height: 400px;"></div>
    </td>
</tr>
</table>