1. jQuery EasyUI 框架概述
1.1. jQuery EasyUI 是什么东西
答: jQuery EasyUI 就是一套基础 jQuery 的富客户端的 UI 框架. 像这些将常用的控件封装成一个 UI 库的框架统称富客户端框架.
1.2. jQuery EasyUI 的作用是什么
答: 既然 EasyUI 是一个 UI 框架, 所以它的功能就是用于处理页面的展示效果的. 通常用于完成后台管理系统的页面排版.
现在市面有哪些常用富客户端框架
答: EasyUI,LigerUI,ExtJS
1.3. EasyUI 的目录说明
1.3.1. 下载路径
EasyUI 的官网地址为: http://www.jeasyui.com/
1.3.2. 必须的基础支持库
标红的文件夹是 PC 端使用 EasyUI 框架, 必须导入的基础库文件.
|
1.3.3. 目录说明
demo: 例示, 非常重要, 以后做开发, 记不起来代码, 可以直接复制例示.
demo-moblie: 手机端的例示, 因为手机端已经有很多优秀 UI 框架, 所以 EasyUI 在手机端基本没有人用的(忽略).
locale: 编码支持库
plugins: 没有压缩过的插件源码
src: 没有压缩过的核心源码
themes: 主题样式, 有个可以选择
easyloader.JS: 源码加载器
jQuery.easyui.min.JS:PC 使用类库.
jQuery.easyui.moblie.JS: 手机端使用类库
jQuery.min.JS:jQuery 框架
1.4. EasyUI 入门示例
1.4.1. 开发步骤:
需求: 使用 EasyUI 实现一个拖拉的层.
1.4.1.1. 第一步: 导入 EasyUI 的库文件
创建一个项目, 将 easyui 的 JS 的框架复制到项目里
1.4.1.2. 第二步: 编写代码
编写一个 easyui-draggable.html 文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 入门例示 & lt;/title> <!-- 导入 easyui 类库 --> <!-- 导入样式 --> <!-- 这个样式,是 easyui 使用到的图标 --> <link rel="stylesheet" href="../js/easyui/themes/icon.CSS"> <!-- 是 easyui 的控件样式 --> <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css"> <!-- 导入 js --> <!-- 因为 easyui 是基于 jquery 开发出来的,所以 jquery 一定要先加载 --> <script type="text/javascript" src="../js/easyui/jquery.min.js"></script> <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script> <script type="text/javascript"> //$(function(){}); $(document).ready(function(){
//alert("- 测试 -"); $("#cc").draggable({ // 值字符串类型,需要引号 handle:‘#title‘
}); }); </script> </head> <body> ==HTML 格式 == <hr/> <!-- 控件引用:easyui - 控件名 属性的设置: data-options="属性名: 值" --> <div class="easyui-draggable" data-options="handle:‘#title‘" style="width: 100px;height: 100px;border: 1px solid #ccc;"> <!-- 拖动只能将头,才能拖动。 --> <div id="title" style="title</div> </div> <br/> ==javascript 格式 == <hr/> <div id="cc" style="width: 100px;height: 100px;border: 1px solid #ccc;"> <!-- 拖动只能将头,才能拖动。 --> <div id="title" style="title</div> </div> </body> </html> |
1.5. EasyUI 的三大基础概念
分别是: 属性, 事件, 方法
属性指的是 EsayUI 框架控件 (HTML) 的属性
事件指的是 EasyUI 框架控件可以触发的事件(如: 点击事件, 双击事件等)
方法指的是 EasyUI 框架控件, 只有调用了默认执行的逻辑代码块.
1.5.1. 属性设置
1.JavaScript 方式设置:
格式:$(选择器). 组件名({属性名: 值});
注意事项
字符串类型的数值一定要有引号(单引号, 或者双引号都可以)
属性之间使用逗号分隔, 最后一个属性不可以有逗号
$("#cc").draggable({ // 值字符串类型,需要引号 handle:‘#title‘ }); |
2.HTML 方式设置:
格式: data-options="属性名: 值, 属性名: 值"
data-options="handle:‘#title‘" |
1.5.2. 事件触发
JavaScript 方式触发:
格式:$(选择器). 组件名({事件名: function(参数列表){}});
$("#cc").draggable({ // 以后在 easyui 里看到 e 是一个事件参数 onDrag:function(e){ console.log(‘x:‘+e.pageX+‘y:‘+e.pageY); } }); |
2.HTML 方式触发:
格式: data-options="事件名: function(){}"
一般情况下不用
<div class="easyui-draggable" data-options="handle:‘#title‘,onDrag:function(e){console.log(‘x‘+e.pageX+‘,Y:‘+e.pageY);}" style="width: 100px;height: 100px;border: 1px solid #ccc; <div id="title" style="Title</div> </div> |
1.5.3. 方法调用
JavaScript 方式调用:
无参数格式:$(选择器). 组件名("方法名");
$("#cc").draggable("disable"); |
有参数的格式:$(选择器). 组件名("方法名", 参数 1, 参数 2....);
$("#btn4").click(function(){ $(‘#pp‘).pagination("select",3); }); |
有返回的方法格式:
var 变量名 =$(选择器). 组件名("方法名", 参数 1, 参数 2....);
var 变量名 =$(选择器). 组件名("方法名");
//getValue 获取搜索值 $("#btn1").click(function(){ var value=$(‘#ss‘).searchbox("getValue"); alert(value); }); |
-- 注意: 方法调用没有 HTML 调用的格式.
1.5.4. 注意事项
我们必须要理解属性, 事件, 方法的使用方式, 因为所有的 EasyUI 组件的就是千篇一律地使用上述的这三种概念的知识完成界面的构建以及事件的触发.
问题: EsayUI 有很多组件, 那么属性, 事件, 方法, 去哪里找呢?
答: 直接通过它的官方帮助文档, 也可以在代码的 src 文件夹下查找
-- 通过官方 API(可以在网上找到中文版的)
|
-- 通过 src 目录与 plugins 目录的文件代码查看.
src 目录是 EsayUI 的基础模块代码, plugins 目录存放的是基于基础模块扩展的控件的实现代码
|
1.5.5. 关于组件之间的依赖关系
通过官方的 API 文档, 我们发现有很多控件与控件之间是有依赖关系的.
如: SearchBox(搜索框): 依赖 textbox 与 menubutton 组件.
|
所以, 如果当属性, 事件, 方法在当前控件找不到, 可以去它的父控件上面去寻找.
2. 控件使用说明
本章的学习就是对 EasyUI 框架, 提供的常用控件. 包括了基础控件, 布局控件, 菜单, 按钮, 菜单, 表单控件, 窗口控件, 表格控件, 树控件
学习难点:
布局控件
表格控件
树控件
2.1. Base(基础)
基础控件全部控件如下:
|
我们主要通过常用的来教学, 如果对于本讲义没有提及的控件, 可以在学习完后, 可以通过官方提供的的 Demo 配置 API 文档了解.
拖动控件
分页控件
搜索框控件
提示框控件
2.1.1. Draggable(拖动)
2.1.1.1. HTML 方式创建
class: 通过 class 选择器, 指定框架名
data-options: 通过 EasyUI 框架自定义的属性 data-options 指定 handle 属性
<div class="easyui-draggable" data-options="handle:‘#title‘" style="width:200px;height:150px;border:1px solid #ccc"> <div id="title" style="padding:5px;background:#ccc;color:#fff">Title</div> </div> |
2.1.1.2. JavaScript 方式创建
--HTM 代码
<div id="dd" style="width:200px;height:150px;border:1px solid #ccc"> <div id="title" style="padding:5px;background:#ccc;color:#fff">Title</div> </div> |
-- 通过 JavaScript 创建控件
$(‘#dd‘).draggable({ handle:‘#title‘ }); |
-- 注意: JavaScript 与 HTML 绑定的 ID 必须要一一对应
handle 属性: 开始拖动的句柄. 就是只有按住 Title 这个 DIV 才可以拖动
2.1.1.3. 结果展示
|
2.1.2. Pagination(分页)
2.1.2.1. HTML 方式创建
<div class="easyui-panel"> <div class="easyui-pagination" data-options="total:114"></div> </div> |
2.1.2.2. JavaScript 方式创建
--HTML 声明代码
<div class="easyui-panel"> <div id="pp"></div> </div> |
--Javscript 代码
$(‘#pp‘).pagination({ total:114, pageSize:10 }); |
2.1.2.3. 结果展示
|
2.1.3. SearchBox(搜索框)
2.1.3.1. HTML 方式创建
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;"> <input class="easyui-searchbox" data-options="prompt:‘Please Input Value‘,menu:‘#mm‘,searcher:doSearch" style="width:100%"> </div> <div id="mm"> <div data-options="name:‘all‘,iconCls:‘icon-ok‘">All News</div> <div data-options="name:‘sports‘">Sports News</div> </div> <script> function doSearch(value,name){ alert(‘You input: ‘ + value+‘(‘+name+‘)‘); } </script> |
2.1.3.2. JavaScript 方式创建
--HTML DIV 代码
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;"> <input id="ss" style="width:100%"> </div> <div id="mm"> <div data-options="name:‘all‘,iconCls:‘icon-ok‘">All News</div> <div data-options="name:‘sports‘">Sports News</div> </div> <script> function doSearch(value,name){ alert(‘You input: ‘ + value+‘(‘+name+‘)‘); } </script> |
--JavaScript 创建控件
$(‘#ss‘).searchbox({ searcher:function(value,name){ alert(value + "," + name) }, menu:‘#mm‘, prompt:‘请输入值‘ }); |
2.1.3.3. 结果展示
|
2.1.4. Tooltip(提示框)
2.1.4.1. HTML 方式创建
|
2.1.4.2. JavaScript 方式创建
--HTML 声明
|
--JavaScript 创建代码
|
2.1.4.3. 结果展示
|
- 2.2. Layout(布局)
- 2.2.1. Panel(面板)
2.2.1.1. HTML 方式创建
|
2.2.1.2. JavaScript 方式创建
|
2.2.1.3. 结果展示
|
2.2.2. Tabs(选项卡)
2.2.2.1. HTML 方式创建
|
2.2.2.2. 结果展示
|
2.2.3. Accordion(分类)
2.2.3.1. HTML 方式创建
|
2.2.3.2. 结果展示
|
2.2.4. Layout(布局案例)
2.2.4.1. HTML 方式创建
|
2.2.4.2. 结果展示
|
2.6.3. 注意事项
1. 因为一个组件有可能由多个依赖的组件.
跟据组件依赖的不同部分, 可以单独通过 ID 去定位某一部对应的组件.
如: 包括有 menu 的组件, menu 可以单独使用.
表格 DataGrid. 数据格式
{total: 200 rows: [
{记录}
]}
树的数据格式:
- {
- id:1
- txt:'内容'
- children:[
- ]
- }
id: 节点 ID, 对加载远程数据很重要.
text: 显示节点文本.
state: 节点状态,'open'或'closed', 默认:'open'. 如果为'closed'的时候, 将不自动展开该节点.
checked: 表示该节点是否被选中.
attributes: 被添加到节点的自定义属性.
children: 一个节点数组声明了若干节点.
来源: http://www.bubuko.com/infodetail-3144169.html