DHTMLX Docs & Samples Explorer

### Complex Tabbars orientation

enableContentZone method allows to hide content zone, so few tabbars can emulate single content zone

Source

    <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>