EasyUI-(认识、
jQuery EasyUI、
组件三要素、
可以查阅API或管网)
EasyUI-(认识、 jQuery EasyUI、 组件三要素、 可以查阅API或管网) 1
- EasyUI 4
1.1. 是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。 4
1.2. HTML主要靠js代码生成 4
1.3. 与 bootstrap 对比功能强大，界面不好看 4
1.4. 学习：jQuery EasyUI 4
1.5. 学习方法 copy+edit 官网里面有很多示例 4 - jQuery EasyUI 4
2.1. 利用jQuery框架开发的 EasyUI框架 4
2.2. 起步 4
2.2.1. 拷贝其包到web项目webapp目录里 4
2.2.1.1. 子目录说明 4
2.2.2. 引入文件 5
2.2.2.2. jQuery包要放在jQuery easyUI包前面 6
2.2.3. 测试 6
2.2.3.1. 运行网页，如果所有文件加载完成则成功 6
2.3. easyUI中的 class属性 6 - 创建组件 6
3.1. 组件：某个功能，如：Panel组件（面板） 7
3.2. 方式 7
3.2.1. HTML方式创建 7
3.2.1.1. 语法 7
3.2.1.2. 各个属性说明 7
3.2.1.3. 样式及其他创建方式写在标签内 7
3.2.2. JavaScript创建 7
3.2.2.1. 1、要先有个普通的HTML标签 8
3.2.2.2. 2、通过id拿到这个标签，并创建需要的组件 可以添加不同的需求 8
3.2.2.3. 3、语法： 8
3.3. 组件在定义的时候，就把属性设置好，不要加载完 在去修改属性 9
3.4. easyui组件创建原理（了解） 9 - 属性：data-options 里面可以写easyUI 的属性 9
4.1. data-options=“iconCls:‘icon-cut’,disabled:true” 9 - linkbutton panel tree menu 组件 9
5.1. linkbutton组件 9
5.1.1. 按钮组件 9
5.1.2. 属性说明 9
5.1.2.1. iconCls : 图标 10
5.1.2.2. disabled:为true 禁用 10
5.1.2.3. plain ：true 时简洁的效果 10
5.1.2.4. iconAlign ：图标的位置 10
5.1.2.5. toggle: 为true时允许用户切换其状态是被选中还是未选择 10
5.1.2.6. group : 分组,一般与toggle配合使用,达到单选效果; 10
5.2. panel 组件 10
5.2.1. 面板组件 10
5.2.2. panel组件需要通过进行创建 11
5.2.3. panel属性 11
5.2.3.1. padding：内容距离边框距离 11
5.2.3.2. collapsible：true显示折叠按钮 12
5.2.3.3. minimizable：最小化 12
5.2.3.4. maximizable：最大化 12
5.2.3.5. closable：关闭按钮 12
5.2.3.6. tools:引入工具 比如引入 add和save图标 12
5.2.3.7. fit:自适应父容器 设置为true 宽度和高度没有效果 12
5.2.3.8. href:加载文件内容 12
5.2.4. panel组件不是每个标签（div）都可以直接使用， 如果不是定义成了 easyUI 的标签是无法使用的 12
5.3. tree 组件 12
5.3.1. 树形菜单组件 12
5.3.2. 树控件也可以定义在一个空-
元素中并使用Javascript加载数据。 12
5.3.2.1. 但是需要json数据， json数据中放的是 ——属性：“值”，…… 13
5.3.3. 属性 13
-
元素中并使用Javascript加载数据。 12
- 组件三要素 13
6.1. 属性 13
6.1.1. 特点 14
6.1.1.1. 1、都有默认值 调用方式 14
6.1.2. 属性的定义方式 14
6.1.2.1. （1）直接作为一个标签定义 14
6.1.2.2. （2）直接在data-options里面定义 14
6.1.2.3. （3）标签和data-options结合起来一起使用 14
6.1.2.4. （4）直接在js创建组件的时候，使用 14
6.2. 方法 15
6.2.1. 调用方式 15
6.2.1.1. $("#p1") . plugin( ‘methodName’ , ‘参数’) 15
6.2.2. api中有查阅方式 15
6.3. 事件 15
6.3.1. 达到一定条件会发生的事情 15
6.3.2. 注意：注册事件不能采用dom传统方式注册， 需要通过组件注册； 16
6.3.3. 添加事件方式 16
6.3.3.1. 添加到组件里面 16
6.3.3.2. 语法：事件名称:function(node){} 16 - 其他知识 17
7.1. a标签中href中用#，表示跳转当前页面 17
7.2. a标签中href中用 javascript:void(0)，表示跳转当前页面 但是不回顶部 17
1.EasyUI
1.1.是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
1.2.HTML主要靠js代码生成
1.3.与 bootstrap 对比功能强大，界面不好看
1.4.学习：jQuery EasyUI
1.5.学习方法 copy+edit 官网里面有很多示例
http://www.jeasyui.com/ 英文网(非常欢迎
http://www.jeasyui.net/ 中文
菜鸟教程网
2.jQuery EasyUI
2.1.利用jQuery框架开发的 EasyUI框架
2.2.起步
2.2.1.拷贝其包到web项目webapp目录里
2.2.1.1.子目录说明
2.2.2.引入文件
<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<!-- easyui依赖的jquery库-->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!-- easyui的插件库-->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
2.2.2.1.
2.2.2.2.jQuery包要放在jQuery easyUI包前面
2.2.3.测试
2.2.3.1.运行网页，如果所有文件加载完成则成功
2.2.3.2.
2.3.easyUI中的 class属性
2.3.1.
3.创建组件
3.1.组件：某个功能，如：Panel组件（面板）
3.1.1.
3.2.方式
3.2.1.HTML方式创建
3.2.1.1.语法
3.2.1.2.各个属性说明
3.2.1.3.样式及其他创建方式写在标签内
3.2.2.JavaScript创建
3.2.2.1.1、要先有个普通的HTML标签
3.2.2.2.2、通过id拿到这个标签，并创建需要的组件
可以添加不同的需求
3.2.2.3.3、语法：
$("#id").组件名({
属性名："属性"，
属性名："属性"，
……
})
3.3.组件在定义的时候，就把属性设置好，不要加载完 在去修改属性
3.4.easyui组件创建原理（了解）
平时写的class=“easyui-panel” --最终底层还是要调用 panel方法来创建
a)底层通过 $.parser.auto=ture
b)调用parse方法
c)循环页面的组件 找到对应 easyui-panel
d)找到之后，调用 panel({})创建组件
e)panel底层组装html
4.属性：data-options
里面可以写easyUI 的属性
4.1.data-options=“iconCls:‘icon-cut’,disabled:true”
5.linkbutton
panel
tree
menu 组件
5.1.linkbutton组件
5.1.1.按钮组件
5.1.1.1.
5.1.2.属性说明
5.1.2.1.iconCls : 图标
5.1.2.2.disabled:为true 禁用
判断剪切按钮中是否有 l-btn-disabled
达到 禁用后不能注册事件的效果
5.1.2.3.plain ：true 时简洁的效果
5.1.2.4.iconAlign ：图标的位置
5.1.2.5.toggle: 为true时允许用户切换其状态是被选中还是未选择
5.1.2.6.group : 分组,一般与toggle配合使用,达到单选效果;
5.2.panel 组件
5.2.1.面板组件
5.2.1.1.
5.2.2.panel组件需要通过
5.2.3.panel属性
title:面板的标题;
style:面板的样式;
iconCls:面板标题的图标;
collapsible:定义是否显示可折叠按钮。
minimizable:定义是否显示最小化按钮。
maximizable:定义是否显示最大化按钮。
closable:定义是否显示关闭按钮。
tools : 自定义工具按钮. 参数是一个选择器,代表选择器获取元素中的内容就是工具按钮.
fit:设置为true的时候面板大小"将自适应父容器"; 简单理解: 父容器多大,我就多大. 使用了该属性后,我们设置宽高将失效.
href: 从URL读取远程数据并且显示到面板; 一般用于加载动态的内容比较有用. (只加载body里面内容) 一旦设置,那么面板标签中内容会被覆盖掉.
closed : 设置面板是否显示.
loadingMessage:加载远程数据的时候在面板内显示一条消息。
5.2.3.1.padding：内容距离边框距离
5.2.3.2.collapsible：true显示折叠按钮
5.2.3.3.minimizable：最小化
5.2.3.4.maximizable：最大化
5.2.3.5.closable：关闭按钮
5.2.3.6.tools:引入工具 比如引入 add和save图标
5.2.3.7.fit:自适应父容器 设置为true 宽度和高度没有效果
5.2.3.8.href:加载文件内容
5.2.4.panel组件不是每个标签（div）都可以直接使用，
如果不是定义成了 easyUI 的标签是无法使用的
5.3.tree 组件
5.3.1.树形菜单组件
5.3.1.1.
5.3.2.树控件也可以定义在一个空
元素中并使用Javascript加载数据。
html代码：
JS代码：
$(’#tt’).tree({
url:‘tree_data.json’
});
5.3.2.1.但是需要json数据，
json数据中放的是
——属性：“值”，……
5.3.2.2.
5.3.3.属性
6.组件三要素
Easyui组件都具有属性、方法、事件；
6.1.属性
定义：
组件的属性：描述组件的信息 比如title width height…
6.1.1.特点
1、每一个组件创建出来的时候，都有默认属性
2、属性在创建的时候，就应该定义好，不要在创建完才去修改属性
6.1.1.1.1、都有默认值
调用方式
6.1.2.属性的定义方式
6.1.2.1.（1）直接作为一个标签定义
6.1.2.2.（2）直接在data-options里面定义
注意：如果data-options里面tools有多个值的情况下，只能在data-options写
格式：
data-options=“iconCls : ‘icon-ok’ "
6.1.2.3.（3）标签和data-options结合起来一起使用
6.1.2.4.（4）直接在js创建组件的时候，使用
6.2.方法
6.2.1.调用方式
6.2.1.1.$(”#p1") . plugin( ‘methodName’ , ‘参数’)
$(‘selector’).plugin(‘method’, [parameter]);
selector 是jQuery对象选择器——选择某个标签。
plugin 是插件的名称。
method 是相应插件现有的方法。
parameter 是参数对象（也可以不要），可以是一个对象、字符串等。
6.2.1.2.
6.2.2.api中有查阅方式
6.3.事件
6.3.1.达到一定条件会发生的事情
如果组件发生了什么事情，那么它就会通过事件反应给我们。
比如：我们点击tree组件的某个节点，那么就会触发onClick事件。
6.3.2.注意：注册事件不能采用dom传统方式注册，
需要通过组件注册；
6.3.3.添加事件方式
6.3.3.1.添加到组件里面
6.3.3.2.语法：事件名称:function(node){}
6.3.4.
7.其他知识
7.1.a标签中href中用#，表示跳转当前页面
7.2.a标签中href中用 javascript:void(0)，表示跳转当前页面 但是不回顶部
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
