使用jquery-easyui的布局layout写后台管理页面的代码详解

使用jquery-easyui的布局layout写后台管理页面的代码详解：

一、概述

在开发后台管理系统时，使用jquery-easyui的布局layout可以大幅度简化代码编写和调试过程。本文将从安装、配置、创建布局、添加面板等方面详细介绍使用jquery-easyui的布局layout进行后台管理设计的攻略。

二、安装和配置

1.引入jquery、jquery-easyui的CDN或本地文件

2.在需要使用布局layout的页面中引入相应的css和js文件

<link rel="stylesheet" href="jquery-easyui-1.8.8/themes/default/easyui.css">
<link rel="stylesheet" href="jquery-easyui-1.8.8/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.8.8/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.8.8/jquery.easyui.min.js"></script>

三、创建布局layout

1.在HTML文件中添加一个容器div，并设置该 div 的宽、高属性

2.在该容器div中添加一个 layout 的 div，设置该 div 的布局方式

<div id="container" style="width:100%;height:100%;"></div>
<script>
    $(function () {
        $("#container").layout({
            // 布局方式为"二列"布局
            layout: "border",
            // 的body元素的高度为100%
            fit: true,
            // 面板宽度不可改变
            resizable: false,
            // 底部区域面板添加标签文字
            regions: [{
                title: "底部区域",
                // 设置该面板的位置，east表示在最右边 
                region: "east",
                // 该面板的宽度为200
                width: 200,
                // 该面板的高度为100%
                height: "100%",
                // 该面板的标签折叠前显示的文字
                split: true
            }]
        });
    });
</script>

四、添加面板

layout 可以组合不同的面板。每个布局中可以组合以下面板:

1. 片段面板（panel）

2. 窗口面板（window）

我们可以使用以下代码添加面板：

  <div region="center" title="中心区域">
        <p>这是中心区域的内容</p>
    </div>
    <div region="west" title="左边区域" split="true" style="width:180px;">
        <p>这是左边区域的内容</p>
    </div>

该代码的效果是左侧区域（宽180px）和中心区域铺满剩余空间。

再看一个例子，页面中有上、中和底三个区域，中间区域能够最大化显示。

<div id="container">
    <div region="north" title="顶部区域" split="true" style="height:50px;"></div>
    <div region="south" title="底部区域" split="true" style="height:50px;"></div>
    <div region="center" title="中心区域">
        <div class="easyui-layout" style="width:100%;height:100%;" fit="true">
            <div region="west" title="左边区域" split="true" style="width:100px;"></div>
            <div region="east" title="右边区域" split="true" style="width:100px;"></div>
            <div region="center" title="中间区域"></div>
        </div>
    </div>
</div>

五、总结

使用jquery-easyui的布局layout设计后台管理可以简化代码编写和调试过程。本文涉及到布局layout的配置方法和面板的添加。读者可根据需要，自行添加其他组件，打造更符合自身需要的后台管理系统。