dhtmlx布局样式（LayoutPatter）

样式：1U

样式：2E

样式：2U

样式：3E

样式：3W

样式：3J

样式：3L

样式：3T

样式：3U

样式：4H

样式：4I

样式：4T

样式：4U

　　

样式：4E

样式：4W

样式：4A

样式：4L

样式：4J

样式：4F

样式：4G

样式:4C

以上布局调用的代码:

<!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/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>

	<style>
		div#layoutObj {
			position: relative;
			margin-top: 20px;
			margin-left: 20px;
			width: 600px;
			height: 400px;
		}
		#srcDiv0, #srcDiv1, #srcDiv2 {
			position: relative;
			margin-left: 20px;
			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>

 

更多样式：http://dhtmlx.com/docs/products/dhtmlxLayout/samples/02_conf/01_patterns.html

 

posted @ 2015-03-19 14:56  streamice  阅读(481)  评论(0)    收藏  举报