Jqurey实现相似EasyUI的页面布局

Posted 2020-09-30 blfbuaa

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
        {
            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>

以上是关于Jqurey实现相似EasyUI的页面布局的主要内容，如果未能解决你的问题，请参考以下文章

关于easyui的layout内页面跳转的问题...

jquery easyui 布局java管理系统页面框架，jsp子页面返回成全屏

easyui级联弹出dialog的问题

AJAX与Jqurey实现AJAX

easyui实现树形菜单Tab功能layout布局

easyui dialog弹出框的遮罩只遮罩iframe内的区域，怎样能遮罩整个页面