jQuery EasyUI 边框布局（Border Layout）使用教程

在构建后台管理系统或内容型网站时，常需要将页面划分为导航、主内容、页眉页脚等固定区域。jQuery EasyUI 提供的边框布局（border layout）通过声明式 HTML 属性即可实现五区域划分。本文将演示如何配置布局容器、设置区域参数，并通过事件联动更新中心内容。

边框布局的五个区域与用途

边框布局（border layout）将页面容器划分为五个标准区域：east（东）、west（西）、north（北）、south（南）和 center（中）。各区域在实际开发中的典型用途如下：

• north 区域：通常用于展示网站标语、顶部导航或全局工具栏。
• south 区域：适合放置版权信息、备案号或底部说明。
• west 区域：常用于侧边导航菜单、目录树或功能面板。
• east 区域：可展示推广内容、广告位或辅助信息。
• center 区域：承载页面核心内容，是布局中唯一必须存在的区域。

创建布局容器与基础配置

使用 EasyUI 布局前，需确保页面已正确引入 jQuery 与 EasyUI 的 CSS/JS 文件。布局通过为外层容器添加 easyui-layout 类名自动初始化，内部子元素通过 region 属性声明所属区域。以下示例创建一个宽度 400px、高度 200px 的布局，包含左侧导航与右侧主内容区：

    

        
Select language:
        

            
Java
            
C#
            
VB
            
Erlang
        
    
    

    

该布局将容器切割为左右两部分：左侧为宽度 150px 的导航面板，右侧为自适应剩余空间的中心内容区。注意：布局容器必须包含 region="center" 的区域，否则初始化将失败。

常用区域参数说明

在定义各区域时，可通过 HTML 属性或 JavaScript 配置对象控制其行为。常用参数包括：

• split：设置为 true 时，区域边缘显示可拖动的分割线，允许用户手动调整区域大小。
• title：区域面板的标题文本，显示在区域顶部。
• collapsible：设置为 true 可启用折叠功能，用户点击标题栏可收起或展开区域。
• minSize / maxSize：限制区域在拖动分割线时的最小与最大尺寸（单位像素）。
• style：内联样式，用于固定区域的初始宽度或高度（如 width:150px;）。

合理配置这些参数可提升布局的交互体验，例如为 west 区域启用 split="true" 后，用户可根据需要调整导航栏宽度。

点击导航更新中心内容

布局结构完成后，可通过 JavaScript 实现区域间的交互。示例中左侧导航链接绑定了 onclick 事件，点击后调用 showcontent 函数更新 center 区域的内容：

function showcontent(language){
    $('#content').html('Introduction to ' + language + ' language');
}

该函数接收语言标识参数，通过 jQuery 的 html() 方法将对应介绍文本注入到 id="content" 的中心区域。实际项目中，可替换为 AJAX 请求加载远程内容或渲染复杂组件。