在构建后台管理系统或内容型网站时，常需要将页面划分为导航、主内容、页眉页脚等固定区域。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:
该布局将容器切割为左右两部分：左侧为宽度 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 请求加载远程内容或渲染复杂组件。
