学习参考：EasyUI 为网页创建边框布局
建设稍微实用点的界面都离不开布局（layout），我们先来了解最简单的一种布局：边框布局（border layout）。
边框布局（border layout）提供五个区域：east、west、north、south、center。以下是一些通常用法：
东西南北中，国粹麻将，上北下南左西右东（一般平面地图的方位辨识方法），非常简单。
为了应用布局（layout），您应该确定一个布局（layout）容器，然后定义一些区域。布局（layout）必须至少需要一个 center 区域，以下是一个布局（layout）实例：
<div class="easyui-layout" style="width: 400px;height: 400px">
<div region="west" title="导航栏" style="width: 150px"></div>
<div region="center" title="正文"></div>
</div>试试看，点击导航栏（west区域）的三角标志，可以折叠导航栏，正文（center）区域自动扩展，是不是有点小激动，才两三行代码就可以实现如此效果，GJ！
折叠前后效果图：
接下来就可以在具体的区域内嵌入内容了，这些内容可以和easyui完全无关，html元素即可（如文章开头提到的“学习参考”中的完整范例中的内容物，就是html+js而已），当然用easyui元素也没差了。
下面是我模仿easyui范例和现有系统，自己修改后的完整代码：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>border layout</title>
<link rel="stylesheet" type="text/css" href="../../r/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../r/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="../../r/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="../../r/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
function showcontent(module){
$('#content').html('您选择的是' + module + '模块！');
}
</script>
</head>
<body>
<div class="easyui-layout" style="width: 400px;height: 400px">
<div region="west" title="导航栏" style="width: 150px">
<p>请选择一个模块</p>
<ul>
<li><a href="#" onclick="showcontent('基础数据')">基础数据</a></li>
<li><a href="#" onclick="showcontent('库存管理')">库存管理</a></li>
<li><a href="#" onclick="showcontent('生产管理')">生产管理</a></li>
<li><a href="#" onclick="showcontent('采购管理')">采购管理</a></li>
<li><a href="#" onclick="showcontent('质检管理')">质检管理</a></li>
</ul>
</div>
<div id="content" region="center" title="正文" style="padding: 10px"></div>
</div>
</body>
</html>