1 整体布局
1.1 layout布局
布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局。如图1-1所示。
我们可以在某个局部进行布局，例如在某个<div>内，也可以在整个<body>标签内进行布局。在整个<body>布局时候，布局的大小会随着浏览器显示框的大小改变而改变。
1.2 panel面板
面板（panel）当做其他内容的容器使用。它是创建其他组件（比如：Layout 布局、Tabs 标签页/选项卡、Accordion 折叠面板，等等）的基础组件。它也提供内置的可折叠、可关闭、可最大化、可最小化的行为以及其他自定义行为。面板（panel）可以简单地嵌入到网页的任何位置。比如layout布局的center之间，插入一个面板。如图1-2所示。
1.3 标签页选项
选项卡显示一组面板。它一次只显示一个选项卡面板。每个选项卡面板都有标题标题和一些迷你按钮工具，包括关闭按钮和其他自定义按钮。我们再次制定一个可切换窗口。如图1-3所示，而代码量相比在之前JavaScript的学习中制作相同效果中大大减少，代码如图1-4。
2 常用控件
在成功布局之后，我们就可以添加各种控件了。easyUI提供了很多常用控件，基本上足够制作普通网页界面。下面依次介绍。
2.1 框类
easyUI提供了很多文本框，比如输入文本框，标签框、密码框、掩码框、文件框、复选框等等。他们的使用都很简单，直接指定某元素的类名即可。如图2-1所示。
2.2 菜单按钮类
easyUI提供了多种按钮和菜单栏样式，如图2-2所示。
2.3 常用插件类
此外，还有一些常用插件可以使用。如图2-3所示。
