Jqurey实现类似EasyUI的页面布局

来源：互联网发布：js 物体的宽和高编辑：程序博客网时间：2024/05/21 22:41
截图如下：（可通过移动中间蓝色的条，来改变左右两边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        {            width: 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="width: 1000px; height: auto" align="center" cellpadding="0" cellspacing="0">            <tr>                <td style="width: 1000px; height: auto" align="center">                    <table style="width: 1000px; height: auto">                        <tr>                            <td style="width: 1000px; height: 670px; overflow: auto" align="left" valign="top">                                <div style="overflow: auto; width: 325px; height: 500px; float: left; background-color: Yellow"                                    id="movemodule" class="div">                                </div>                                <div id="arrowborder" style="float: left; width: 5px; height: 500px; background-color: Blue;                                    cursor: w-resize;">                                </div>                                <div id="rightframe" style="width: 660px; height: 500px; float: left; overflow: auto;                                    background-color: Aqua" class="div">                                </div>                            </td>                        </tr>                    </table>                </td>            </tr>            <tr>                <td style="width: 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>
0 0