【easyui学习笔记】3.easyui布局之边框布局

学习参考：EasyUI 为网页创建边框布局

建设稍微实用点的界面都离不开布局（layout），我们先来了解最简单的一种布局：边框布局（border layout）。

1、布局区域

边框布局（border layout）提供五个区域：east、west、north、south、center。以下是一些通常用法：

• north 区域可以用来显示网站的标语。
• south 区域可以用来显示版权以及一些说明。
• west 区域可以用来显示导航菜单。
• east 区域可以用来显示一些推广的项目。
• center 区域可以用来显示主要的内容。

东西南北中，国粹麻将，上北下南左西右东（一般平面地图的方位辨识方法），非常简单。

2、布局实例

为了应用布局（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！
折叠前后效果图：