非常有用的仿Winform的dock布局

蓝色_冰点 2011-07-22 04:55:00

页面的布局，一直是个麻烦的问题，当然，如果你用类似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>