jQuery EasyUI 教程

jQuery EasyUI 布局 – 为网页创建边框布局

likuolei2025年12月17日2025年12月17日

jQuery EasyUI 布局 – 为网页创建边框布局（Border Layout）

jQuery EasyUI 的 layout 组件是最常用的布局插件之一，它可以将整个页面（或某个容器）分为五个区域：north（北）、south（南）、east（东）、west（西）、center（中），类似于经典的边框布局（border layout）。非常适合构建后台管理系统、仪表盘等需要固定头部、侧边栏、主体内容的页面。

官方参考：

文档：https://www.jeasyui.com/documentation/layout.php
教程：https://www.jeasyui.com/tutorial/layout/layout1.php
在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=Layout

步骤 1: 引入 EasyUI 资源

<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

步骤 2: 创建基本的边框布局

最简单的方式：在 <body> 或某个容器上添加 class="easyui-layout"，然后用 data-options="region:'xxx'" 定义五个区域。

<body class="easyui-layout">
    <!-- 北部：顶部导航/标题栏 -->
    <div data-options="region:'north'" style="height:60px;padding:10px;background:#3399FF;color:white;">
        <h1>我的管理系统 - jQuery EasyUI 边框布局示例</h1>
    </div>

    <!-- 南部：底部版权信息 -->
    <div data-options="region:'south'" style="height:50px;padding:10px;text-align:center;background:#eee;">
        © 2025 My Company. All rights reserved.
    </div>

    <!-- 西部：左侧菜单栏 -->
    <div data-options="region:'west',split:true,title:'导航菜单'" style="width:200px;">
        <div class="easyui-accordion" data-options="fit:true,border:false">
            <div title="系统管理">
                <ul class="easyui-tree">
                    <li>用户管理</li>
                    <li>角色管理</li>
                    <li>权限设置</li>
                </ul>
            </div>
            <div title="内容管理">
                <ul class="easyui-tree">
                    <li>文章管理</li>
                    <li>分类管理</li>
                </ul>
            </div>
            <div title="数据统计">
                <ul class="easyui-tree">
                    <li>销售报表</li>
                    <li>访问统计</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 东部：可选的右侧面板（可隐藏） -->
    <div data-options="region:'east',split:true,collapsed:true,title:'日历与待办',iconCls:'icon-calendar'" style="width:250px;padding:10px;">
        <div class="easyui-calendar" style="width:100%;"></div>
        <div style="margin-top:20px;">
            <h3>今日待办</h3>
            <ul>
                <li>完成项目文档</li>
                <li>回复客户邮件</li>
            </ul>
        </div>
    </div>

    <!-- 中部：主内容区域（必须存在） -->
    <div data-options="region:'center',title:'主内容区'">
        <div class="easyui-tabs" data-options="fit:true,border:false">
            <div title="欢迎页" style="padding:20px;">
                <h2>欢迎使用 jQuery EasyUI 管理系统！</h2>
                <p>这是一个使用 EasyUI Layout 构建的经典后台布局示例。</p>
            </div>
            <div title="数据表格" data-options="href:'datagrid.html'"></div>
            <div title="关于"></div>
        </div>
    </div>
</body>

步骤 3: 关键属性说明

属性	说明
`region:'north'`	顶部区域，高度固定，通常放 logo、导航栏
`region:'south'`	底部区域，高度固定，通常放版权信息
`region:'west'`	左侧区域，宽度可调，常放菜单树（accordion + tree）
`region:'east'`	右侧区域，可选，常放快捷工具、日历等（可折叠）
`region:'center'`	中心区域，必须存在，会自动填充剩余空间，通常放 tabs 或 datagrid
`split:true`	允许用户拖动调整区域大小
`collapsed:true`	初始折叠（常用于 east/west）
`title:'标题'`	区域标题栏
`iconCls`	标题栏图标
`fit:true`	让子组件（如 tabs、accordion）自动填充父容器高度/宽度

步骤 4: 完整可运行示例（推荐复制运行）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery EasyUI 边框布局</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
    <div region="north" style="height:70px;padding:15px;background:#4183c4;color:white;overflow:hidden;">
        <h1 style="margin:0;">jQuery EasyUI 后台管理系统</h1>
    </div>

    <div region="south" style="height:40px;line-height:40px;text-align:center;background:#f4f4f4;">
        © 2025 All Rights Reserved.
    </div>

    <div region="west" split="true" title="主菜单" style="width:220px;">
        <div class="easyui-accordion" fit="true" border="false">
            <div title="系统设置" iconCls="icon-setting">
                <ul class="easyui-tree">
                    <li iconCls="icon-user">用户管理</li>
                    <li iconCls="icon-group">角色管理</li>
                </ul>
            </div>
            <div title="内容管理" iconCls="icon-folder">
                <ul class="easyui-tree">
                    <li>文章列表</li>
                    <li>评论审核</li>
                </ul>
            </div>
        </div>
    </div>

    <div region="center">
        <div class="easyui-tabs" fit="true" border="false">
            <div title="首页" style="padding:30px;font-size:18px;">
                欢迎来到管理系统！<br><br>
                这是一个使用 EasyUI Layout 创建的经典边框布局。
            </div>
            <div title="数据展示"></div>
        </div>
    </div>
</body>
</html>

优势与常见组合

center 区域：几乎总是放 easyui-tabs，实现多标签页内容切换。
west 区域：常用 easyui-accordion + easyui-tree 实现折叠菜单。
north 区域：可放工具栏按钮（linkbutton、menubutton）。
支持响应式：区域大小可拖动调整。

更多示例：

完整后台布局：https://www.jeasyui.com/tutorial/layout/layout2.php
嵌套布局：https://www.jeasyui.com/tutorial/layout/layout3.php
动态添加/移除区域

如果需要添加顶部工具栏按钮、左侧树形菜单点击切换中心 tabs、或完整后台模板示例，请继续提问！

likuolei

网站 http://yingjuxia.com

文章已创建 3247

发表回复取消回复

返回顶部