<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtabbar.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxtabbar.js"></script>
 
 
 
 
<div style="position:relative; width:300px; height:300px;top:0px;left:0px;">
    <div id='m_zone' style='width:228px; height:228px; overflow:hidden; background-color:#fff; position:absolute; left:26px; top:26px; padding:5px;'></div>
    <div id="a_tabbar" style=" width:26px; height:238px; position:absolute; left:0px; top:26px;"></div>
    <div id="b_tabbar" style=" width:26px; height:238px; position:absolute; left:264px; top:26px;"></div>
    <div id="c_tabbar" style=" width:238px; height:26px; position:absolute; left:26px; top:0px;"></div>
    <div id="d_tabbar" style=" width:238px; height:26px; position:absolute; left:26px; top:264px;"></div>
</div>
 
<script>
function initTabbar(container, mode, align) {
    var tabbar = new dhtmlXTabBar(container, mode);
    tabbar.setSkin('dhx_skyblue');
    tabbar.setImagePath("../../codebase/imgs/");
    tabbar.setAlign(align);
    tabbar.attachEvent("onSelect", function(id) {
        for (var i = 0; i < 4; i++) {
            if (tabbars[i] != this)
                tabbars[i].setTabInActive();
        }
        document.getElementById('m_zone').innerHTML = "Active tabbar: " + mode + "<br/>Selected tab: " + id;
        return true;
    });
    tabbar.enableContentZone(false);
    tabbar.loadXML("../common/config_all.xml");
    return tabbar;
}
var tabbars = [];
tabbars[0] = initTabbar("a_tabbar", "left", "left");
tabbars[1] = initTabbar("b_tabbar", "right", "right");
tabbars[2] = initTabbar("c_tabbar", "top", "left");
tabbars[3] = initTabbar("d_tabbar", "bottom", "right");</script>