EasyUI-(认识、
jQuery EasyUI、
组件三要素、
可以查阅API或管网)
EasyUI-(认识、 jQuery EasyUI、 组件三要素、 可以查阅API或管网) 1

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
2. 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
3. 创建组件 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
4. 属性：data-options 里面可以写easyUI 的属性 9
   4.1. data-options=“iconCls:‘icon-cut’,disabled:true” 9
5. 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
6. 组件三要素 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
7. 其他知识 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组件需要通过

     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)，表示跳转当前页面 但是不回顶部