Jqurey实现相似EasyUI的页面布局

截图例如以下：（可通过移动中间蓝色的条。来改变左右两边div的宽度）
详细实现代码例如以下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default10.aspx.cs" Inherits="Default10" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="jQuery 2.0.3.js"></script>
    
    <style type="text/css">
        .highlightTextSearch
        {
            background-color: Red;
        }
        a:hover
        {
            color: Red;
        }
        .style2
        {
             1000px;
        }
        .div
        {
            scrollbar-face-color: #DCDCDC; /*  游标的颜色 */
            scrollbar-shadow-color: #99BBE8; /*游标边框的颜色*/
            scrollbar-highlight-color: #FF3300; /*游标高亮*/
            scrollbar-3dlight-color: #9EBFE8;
            scrollbar-darkshadow-color: #9EBFE8;
            scrollbar-track-color: #DFE8F6; /*滑动条背景颜色*/
            scrollbar-arrow-color: #6699FF; /*箭头颜色*/
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style=" 1000px; height: auto" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td style=" 1000px; height: auto" align="center">
                    <table style=" 1000px; height: auto">
                        <tr>
                            <td style=" 1000px; height: 670px; overflow: auto" align="left" valign="top">
                                <div style="overflow: auto;  325px; height: 500px; float: left; background-color: Yellow"
                                    id="movemodule" class="div">
                                </div>
                                <div id="arrowborder" style="float: left;  5px; height: 500px; background-color: Blue;
                                    cursor: w-resize;">
                                </div>
                                <div id="rightframe" style=" 660px; height: 500px; float: left; overflow: auto;
                                    background-color: Aqua" class="div">
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td style=" 1000px; height: 70px; background-image: url('Images/OAbottom.bmp')"
                    align="center">
                </td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        var isDown = false;
        var minwidth = 160;
        var maxwidth = 800;
        $("#arrowborder").mousedown(function ()
        {
            this.setCapture();
            isDown = true;
            $("body").css("cursor", "e-resize");
        });
        $("body").mouseup(function ()
        {
            this.releaseCapture();
            isDown = false;
            $("body").css("cursor", "default");
        });
        $("body").mousemove(function (event)
        {
            if (isDown) {
                var _mx = event.clientX;
                //var _my = event.clientY;
                var _poin = $("#arrowborder").offset();
                var _w = _mx - _poin.left;
                var _lw = $("#movemodule").width();
                var _rw = $("#rightframe").width();
                if ((_lw + _w > minwidth && _w < 0) || (_lw + _w < maxwidth && _w > 0)) {
                    $("#movemodule").width(_lw + _w);
                    $("#rightframe").width(_rw - _w);
                }
                else {
                    if (_w > 0) {
                        $("#movemodule").width(maxwidth);
                        $("#rightframe").width(_rw - (maxwidth - _lw));
                    }
                    else {
                        $("#movemodule").width(minwidth);
                        $("#rightframe").width(_rw + (_lw - minwidth));
                    }
                }
            }
        });
    </script>
    </form>
</body>
</html>