1.使用easyui的步骤
1.1 下载并导入easyui 源文件
导入的意思就是 把源代码拷贝到WebContent下
1.2 在页面中导入 3 个js 文件 2 个css 文件
1.3 在相应的元素上加 对应的 class
class="easyui-dialog"
2.面板
2.1 作用
是其它元素或者组件的一个容器
2.2 基础面板
title data-options
data-options 中有一个 tools 可以自己指定图标和事件处理
2.3 面板布局
基于 东西南北中的布局
3.可拖拽和 可调整大小
class="draggable"
class="resizable" maxWidth maxHeight minWidth
4.提示
class="easyui-tooltip"
5.进度条
class="easyui-progressbar" data-options="value:**"
6.消息组件
普通消息
$.messager.show({});
7.选项卡
class="easyui-tabs"
子选项卡中 使用 data-options="closable:true"
class="easyui-accordion"
8.布局
<div title="呵呵easyui" class="easyui-layout"
style="width: 500px;height: 300px;">
<div data-options="region:'east'" title="东" style="width: 180px"></div>
<div data-options="region:'west'" title="西" style="width: 100px"></div>
<div data-options="region:'south'" title="南" style="height: 80px"></div>
<div data-options="region:'north'" title="北" style="height: 80px"></div>
</div>
9.窗体
class="easyui-window"
data-options="modal:true"
modal 默认是 false 当是ture时必须操作完弹出的窗口 才能做后续操作
这叫模态化
10.右键菜单
11.分页组件
<div class="easyui-pagination"
data-options="total:200,pageSize:4,pageList:[4,8,16,32],onSelectPage:pageData">
total 数据总量
pageSize 一页显示多少条
onSelectPage 切换页码时调用的函数 这个函数中可以直接 pageNumber 和 pageSize
pageList 改变默认的一页显示多少条
12.日历组件
1.1 下载并导入easyui 源文件
导入的意思就是 把源代码拷贝到WebContent下
1.2 在页面中导入 3 个js 文件 2 个css 文件
1.3 在相应的元素上加 对应的 class
class="easyui-dialog"
2.面板
2.1 作用
是其它元素或者组件的一个容器
2.2 基础面板
title data-options
data-options 中有一个 tools 可以自己指定图标和事件处理
2.3 面板布局
基于 东西南北中的布局
3.可拖拽和 可调整大小
class="draggable"
class="resizable" maxWidth maxHeight minWidth
4.提示
class="easyui-tooltip"
5.进度条
class="easyui-progressbar" data-options="value:**"
6.消息组件
普通消息
$.messager.show({});
7.选项卡
class="easyui-tabs"
子选项卡中 使用 data-options="closable:true"
class="easyui-accordion"
8.布局
<div title="呵呵easyui" class="easyui-layout"
style="width: 500px;height: 300px;">
<div data-options="region:'east'" title="东" style="width: 180px"></div>
<div data-options="region:'west'" title="西" style="width: 100px"></div>
<div data-options="region:'south'" title="南" style="height: 80px"></div>
<div data-options="region:'north'" title="北" style="height: 80px"></div>
</div>
9.窗体
class="easyui-window"
data-options="modal:true"
modal 默认是 false 当是ture时必须操作完弹出的窗口 才能做后续操作
这叫模态化
10.右键菜单
11.分页组件
<div class="easyui-pagination"
data-options="total:200,pageSize:4,pageList:[4,8,16,32],onSelectPage:pageData">
total 数据总量
pageSize 一页显示多少条
onSelectPage 切换页码时调用的函数 这个函数中可以直接 pageNumber 和 pageSize
pageList 改变默认的一页显示多少条
12.日历组件