Layout patterns

</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Layout patterns</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>
		div#layoutObj {
			position: relative;
			margin-top: 10px;
			margin-left: 10px;
			width: 600px;
			height: 400px;
		}
		#srcDiv0, #srcDiv1, #srcDiv2 {
			position: relative;
			margin-left: 10px;
			padding-top: 10px;
			clear: both;
		}
		.view_descr {
			float: left;
			margin: 2px;
		}
		.view_descr.view_selected .view_name {
			background-color: #bee7fa;
		}
		.view_name {
			position: relative;
			font-family: Tahoma;
			font-size: 14px;
			padding: 2px 1px;
			margin-bottom: 2px;
		}
		.view_img {
			width: 49px;
			height: 49px;
			cursor: pointer;
		}
	</style>

	<script>
		var myLayout;
		var viewsList;
		var lastSelected;
		function loadView(view) {

			if (lastSelected == view) return;

			if (myLayout != null) myLayout.unload();
			myLayout = new dhtmlXLayoutObject({
				parent: "layoutObj",
				pattern: view
			});

			if (!viewsList) {
				viewsList = myLayout.listPatterns();
				var p = 1;
				var pId = "srcDiv0";
				for (var q=0; q<viewsList.length; q++) {
					var k = document.createElement("DIV");
					k.className = "view_descr";
					k.id = "v_"+viewsList[q];
					k.innerHTML = "<div class='view_name'>"+viewsList[q]+"</div>"+
							"<img class='view_img' border='0' src='../common/imgs/"+String(viewsList[q]).toLowerCase()+".bmp'>";

					k._view = viewsList[q];

					var r = viewsList[q].charAt(0);
					if (p != r) {
						if (r == "4") pId = "srcDiv1";
						if (r == "5") pId = "srcDiv2";
						if (document.getElementById(pId).childNodes.length > 0) k.style.marginLeft = "20px";
					}
					p = r;

					document.getElementById(pId).appendChild(k);
					k.onclick = function(){loadView(this._view);}
					k = null;
				}
			}
			if (lastSelected != null) document.getElementById("v_"+lastSelected).className = "view_descr";
			lastSelected = view;
			document.getElementById("v_"+lastSelected).className = "view_descr view_selected";
		}
	</script>
</head>
<body onload="loadView('3L');">
	<div id="layoutObj"></div>
	<div id="srcDiv0"></div>
	<div id="srcDiv1"></div>
	<div id="srcDiv2"></div>
</body>
</html>
Documentation

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