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>
posted @ 2015-03-19 14:56 streamice 阅读(474) 评论(0) 收藏举报
努力加载评论中...
刷新页面返回顶部
streamice

dhtmlx布局样式（LayoutPatter）

公告
