Complex tabbars orientation

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

</> Source

<!DOCTYPE html>
<html>
<head>
	<title>Complex tabbars orientation</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<style>
		#m_zone {
			position: relative;
			height: 200px;
			border-left: 1px solid #dfdfdf;
			border-right: 1px solid #dfdfdf;
			border-bottom: 1px solid #dfdfdf;
			overflow: hidden;
		}
	</style>
	<script>

		var tabbars = [];
		var tabbarsData = [
			{settings: {align: "left"}, tabs: [
				{id: "a1", text: "Tab 1"},
				{id: "a2", text: "Tab 2"}
			]},
			{settings: {align: "right"}, tabs: [
				{id: "a3", text: "Tab 3"},
				{id: "a4", text: "Tab 4", selected: 1}
			]}
		];

		function initTabbar(container, mode, index) {
			var tabbar = new dhtmlXTabBar(container, mode);

			tabbar.enableContentZone(false);
			tabbar.attachEvent("onSelect",function(id){
				for (var i=0; i<tabbars.length; i++) {
					if (tabbars[i] != this) tabbars[i].setTabInActive();
				}
				document.getElementById("m_text").innerHTML = "Selected tab: "+this.cells(id).getText();
				return true;
			});

			tabbar.loadStruct(tabbarsData[index]);

			return tabbar;
		}

		function doOnLoad() {
			tabbars[0] = initTabbar("tabbar_top", "top", 0);
			tabbars[1] = initTabbar("tabbar_bottom", "bottom", 1);
		}

	</script>

</head>
<body onload="doOnLoad();">

	<div style="position: relative; width: 450px; ">
		<div id="tabbar_top" style=" height: 43px; position: relative;"></div>
		<div id="m_zone">
			<div id="m_text" style="padding: 10px;"></div>
		</div>
		<div id="tabbar_bottom" style=" height: 43px; position: relative;"></div>
	</div>

	<p>enableContentZone method allows to hide content zone, so few tabbars can emulate single content zone</p>

</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.