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