非常有用的仿Winform的dock布局

页面的布局，一直是个麻烦的问题，当然，如果你用类似ExtJs之类的东西，就不用看这帖了
在WinForm中有一种dock的布局方式，在此借鉴其思想，在JS上实现它
在这个布局中，你可以有多个top,left,right,bottom，但最好只有一个fill
不同的dock顺序，会有不同效果，规律就是，最先dock的标签，会优先占用四个角的空间
你可以自己去改变dock的顺序，一定会得到你想要的布局效果的<html>
<head>
    <title>我的网页</title>
    <style type="text/css">
        /** 注意，这里的CSS也很重要，虽然不多 */
        body,html
        {
            height:100%;
            margin:0px;
            overflow:hidden;
        }
        .root
        {
            height:100%;
            width:100%;
            overflow:auto;
        }
    </style>
<script language="javascript" type="text/javascript">
// 标签格式： <div dock="{dock:'left',size:100}">
function DockLayout(dom) {
    if (typeof (dom) == "string") {
        this.dom = document.getElementById(dom);
    }
    else {
        this.dom = dom;
    }
    this.blocks = [];
    this.searchBlocks();
}
DockLayout.prototype = (function () {
    function searchBlocks() {
        this.blocks = [];
        var node = this.dom.firstChild;
        while (node != null) {
            if (node.nodeType == 1) {
                //element
                var dock = node.getAttribute("dock");
                if (dock != null) {
                    eval("dock=" + dock + ";");
                    var item = { dock: dock, dom: node };
                    this.blocks.push(item);
                    node.style.position = "absolute";
                }
            }
            //下个节点
            node = node.nextSibling;
        }
    }
    function setDomPos(dom, left, top) {
        if (left < 0) left = 0;
        if (top < 0) top = 0;
        dom.style.left = left + "px";
        dom.style.top = top + "px";
    }
    function setDomSize(dom, width, height) {
        if (width < 0) width = 0;
        if (height < 0) height = 0;
        dom.style.width = width + "px";
        dom.style.height = height + "px";
    }
    function refresh() {
        var tmp = this.dom.getBoundingClientRect();
        var rect = {
            left: 0,
            top: 0,
            right: tmp.right - tmp.left,
            bottom: tmp.bottom - tmp.top
        };
        var later = [];
        for (var i = 0; i < this.blocks.length; i++) {
            var item = this.blocks[i];
            switch (item.dock.dock) {
                case "top":
                    setDomPos(item.dom, rect.left, rect.top);
                    setDomSize(item.dom, rect.right - rect.left, item.dock.size);
                    rect.top += item.dock.size;
                    break;
                case "left":
                    setDomPos(item.dom, rect.left, rect.top);
                    setDomSize(item.dom, item.dock.size, rect.bottom - rect.top);
                    rect.left += item.dock.size;
                    break;
                case "right":
                    setDomPos(item.dom, rect.right - item.dock.size, rect.top);
                    setDomSize(item.dom, item.dock.size, rect.bottom - rect.top);
                    rect.right -= item.dock.size;
                    break;
                case "bottom":
                    setDomPos(item.dom, rect.left, rect.bottom - item.dock.size);
                    setDomSize(item.dom, rect.right - rect.left, item.dock.size);
                    rect.bottom -= item.dock.size;
                    break;
                case "fill":
                    later.push(item);
                    break;
            }
        }
        //最后计算fill的位置
        for (var i = 0; i < later.length; i++) {
            var item = later[i];
            setDomPos(item.dom, rect.left, rect.top);
            setDomSize(item.dom, rect.right - rect.left, rect.bottom - rect.top);
        }
    }
    return {
        searchBlocks: searchBlocks,
        refresh: refresh
    };
})();
</script>
</head>
<body>
<div id="root" class="root">
    <div dock='{dock:"right",size:100}' style="background-color:#f0f0bb">right</div>
    <div dock='{dock:"bottom",size:100}' style="background-color:#88f8f8">bottom</div>
    <div dock='{dock:"left",size:100}' style="background-color:#f8f8f8">left</div>
    <div dock='{dock:"fill",size:100}' style="background-color:#f8f8f8">fill</div>
    <div dock='{dock:"top",size:100}' style="background-color:#f888f8">top</div>
    <div dock='{dock:"bottom",size:100}' style="background-color:#e0f8f8">bottom</div>
    <div dock='{dock:"left",size:100}' style="background-color:#f8f888">left</div>
    <div dock='{dock:"right",size:100}' style="background-color:#f0f0ff">right</div>
</div>
<script language="javascript" type="text/javascript">
    var layout = null;
    window.onload = function () {
        //将root指定为layout的管理对象，其所有子节点，将被布局管理
        layout = new DockLayout("root");
        layout.refresh();//刷新布局
    }
    window.onresize = function () {
        //刷新布局
        layout.refresh();
    }
</script>
</body>
</html>