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:#F0F8FF; position:absolute; left:150px; top:370px; '/>
 
</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>
tabbar = new dhtmlXTabBar("a_tabbar", "left");
 
tabbar.setSkin('dhx_skyblue');
tabbar.setImagePath("../../codebase/imgs/");
tabbar.enableContentZone(false);
tabbar.loadXML("../common/config.xml");
tabbar2 = new dhtmlXTabBar("b_tabbar", "right");
 
tabbar2.setSkin('dhx_skyblue');
tabbar2.setImagePath("../../codebase/imgs/");
tabbar2.enableContentZone(false);
tabbar2.setAlign("right");
tabbar2.loadXML("../common/config.xml");
tabbar3 = new dhtmlXTabBar("c_tabbar", "top");
 
tabbar3.setSkin('dhx_skyblue');
tabbar3.setImagePath("../../codebase/imgs/");
tabbar3.enableContentZone(false);
tabbar3.loadXML("../common/config.xml");
tabbar4 = new dhtmlXTabBar("d_tabbar", "bottom");
 
tabbar4.setSkin('dhx_skyblue');
tabbar4.setImagePath("../../codebase/imgs/");
tabbar4.setAlign("right");
tabbar4.enableContentZone(false);
tabbar4.loadXML("../common/config.xml");
</script> <div style="height:520px"> </div>