easyUI常用方法

1 整体布局

  1.1 layout布局

        布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局。如图1-1所示。

图1-1

        我们可以在某个局部进行布局，例如在某个

内，也可以在整个标签内进行布局。在整个布局时候，布局的大小会随着浏览器显示框的大小改变而改变。

  1.2 panel面板

        面板（panel）当做其他内容的容器使用。它是创建其他组件（比如：Layout 布局、Tabs 标签页/选项卡、Accordion 折叠面板，等等）的基础组件。它也提供内置的可折叠、可关闭、可最大化、可最小化的行为以及其他自定义行为。面板（panel）可以简单地嵌入到网页的任何位置。比如layout布局的center之间，插入一个面板。如图1-2所示。

图1-2

1.3 标签页选项

        选项卡显示一组面板。它一次只显示一个选项卡面板。每个选项卡面板都有标题标题和一些迷你按钮工具，包括关闭按钮和其他自定义按钮。我们再次制定一个可切换窗口。如图1-3所示，而代码量相比在之前JavaScript的学习中制作相同效果中大大减少，代码如图1-4。

图1-3

图1-4

2 常用控件

        在成功布局之后，我们就可以添加各种控件了。easyUI提供了很多常用控件，基本上足够制作普通网页界面。下面依次介绍。

   2.1 框类

        easyUI提供了很多文本框，比如输入文本框，标签框、密码框、掩码框、文件框、复选框等等。他们的使用都很简单，直接指定某元素的类名即可。如图2-1所示。

图2-1

  2.2 菜单按钮类

        easyUI提供了多种按钮和菜单栏样式，如图2-2所示。

图2-2

  2.3 常用插件类

        此外，还有一些常用插件可以使用。如图2-3所示。

图2-3