样式: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 οnlοad="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