<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtabbar.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxtabbar.js"></script>
 
 
 
 
<div id='m_zone' style='width:420px; height:420px; overflow:hidden; background-color:#E3EFFF; position:absolute; left:150px; top:370px; padding:5px'/>
 
</div>
            <div id="a_tabbar" style=" width:25px; height:420px; position:absolute; left:129px; top:370px;"></div>
            <div id="b_tabbar" style=" width:25px; height:420px; position:absolute; left:566px; top:370px;"></div>
            <div id="c_tabbar" style=" width:420px; height:25px; position:absolute; left:150px; top:349px;"></div>
            <div id="d_tabbar" style=" width:420px; height:25px; position:absolute; left:150px; top:786px;"></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.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>
<div style="height:520px"> </div>