jQuery EasyUI Day1

1 简介

1.1 EasyUI简介

easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
Bootstrap – 响应式的jquery框架 快速构建web程序的框架
** Easyui 就是基于jquery做界面的框架，上手容易，学习方式copy+edit**

1.2 官方网站

http://www.jeasyui.com 英文网
http://www.jeasyui.net/ 中文网

1.3 EasyUI框架项目结构

1.3.1 目录截图

1.3.2 子目录说明

demo :web案例
demo-mobile:移动端案例
locale:本地化（汉化包）
plugins:easyui所有插件
src:插件的源码，如果买了商业授权就有全部源码
themes：主题（皮肤），存放css,img
changlog.txt:升级日志
easyloader.js:内部实现了一个js加载器，根据应用的需求加载js文件，而不是一次性加载所有文件；
jquery.easyui.min.js:所有插件集的压缩文件
jquery.min.js : easyui当前版本兼容的jquery库

2 搭建easyui环境

2.1 web项目加入easyui的项目文件夹

2.2 新建一个网页

引入easyui需要的js和css

<!-- 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>

3 创建组件

3.1 组件创建方式

3.1.1 通过HTML方式创建

语法

<div class="easyui-panel"></div>

3.1.2 通过JS方式创建

$(function(){
	$('#p1').panel({    
	  width:500,    
	  height:150,    
	  title: 'My Panel',    
	  tools: [{    
	    iconCls:'icon-add',    
	    handler:function(){alert('new')}    
	  },{    
	    iconCls:'icon-save',    
	    handler:function(){alert('save')}    
	  }]    
	}); 
})

3.2 easyui组件创建原理

平时写的class=“easyui-panel” --最终底层还是要调用 panel方法来创建

1. 底层通过 $.parser.auto=ture
2. 调用parse方法
3. 循环页面的组件 找到对应 easyui-panel
4. 找到之后，调用 panel({})创建组件
5. panel底层组装html

4 easyui常用组件

4.1 panel – 面板

panel 属性
title：标题
padding：内容距离边框距离
iconCls：图标
collapsible：true 显示折叠按钮
minimizable：最小化
maximizable：最大化
closable： true 关闭按钮
tools ：引用工具 比如 add和save图标
fit ：自适应父容器的大小 如果为true 设置的宽度和高度没有效果
loadingMessage ：
href： 加载文件内容

<div id="p" class="easyui-panel" title="面板1"
		style="width: 300px; height: 200px; padding: 10px;" 
		iconCls="icon-save"
		collapsible="true"
		minimizable="false"
		maximizable="true"
		closable="true"
		tools="#tt"
		fit="false"
		loadingMessage="加载中..."
		href="/xxx.txt"
		>
			<a class="easyui-linkbutton" iconCls="icon-add">添加</a>
			<a class="easyui-linkbutton" iconCls="icon-remove">删除</a>
</div>
<div id="tt">
	<a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>
	<a href="javascript:void(0)" class="icon-ok" onclick="javascript:alert('ok')"></a>
</div>

4.2 LinkButton 按钮组件

linkbutton的属性说明:
iconCls:按钮图标
toggle：为true时允许用户切换其状态 是被选中还是未选择 结合group来使用 在一组里面只能选中一个
plain ： 简洁效果
iconAlign ： 图标的位置
data-options ： 可以设置组件的属性
disabled ： 禁用
group ： 分组

<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">按钮</a>
<a href="#" class="easyui-linkbutton" iconCls='icon-remove' toggle="true" onclick="alert('删除....');">删除</a>
<a href="#" class="easyui-linkbutton" iconCls='icon-edit' plain="true" iconAlign="right" id="editBtn">编辑</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true" id="cutBtn">剪切</a>

<div style="padding:5px;border:1px solid #ddd;">
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 1</a>
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 2</a>
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 3</a>
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 4</a>
		<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 5</a>
</div>

4.3 menu – 菜单

菜单组件通常用于快捷菜单。他是构建其他菜单组件的必备基础组件。比如：menubutton和splitbutton。它还可以用于导航和执行命令。

4.4 tree --树型菜单

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能

4.4.1 节点属性：

id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，‘open’ 或 ‘closed’，默认：‘open’。如果为’closed’的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。

[{    
    "id":1,    
    "text":"Folder1",    
    "iconCls":"icon-save",    
    "children":[{    
        "text":"File1",    
        "checked":true   
    },{    
        "text":"Books",    
        "state":"open",    
        "attributes":{    
            "url":"/demo/book/abc",    
            "price":100    
        },    
        "children":[{    
            "text":"PhotoShop",    
            "checked":true   
        },{    
            "id": 8,    
            "text":"Sub Bookds",    
            "state":"closed"   
        }]    
    }]    
},{    
    "text":"Languages",    
    "state":"closed",    
    "children":[{    
        "text":"Java"   
    },{    
        "text":"C#"   
    }]    
}]

5 组件三要素

5.1属性

描述组件的信息 比如title width height…

5.1.1 属性的注意事项

1. 组件在定义的时候，就把属性设置好，不要加载完 在去修改属性
2. 属性都是有默认的值，一般不会去修改默认，要改的话，在创建的时候去指定属性

5.1.2 属性的定义方式：

3. 可以直接在标签上面写 属性名 = “属性值”
4. 通过data-options这个里面进行指定属性 ，data-options tools:[{},{}],就不要放到data-options外面
5. 标签和data-options结合起来一起使用
6. 直接在js创建组件的时候，使用

5.2 方法

5.2.1 创建组件的方法

1. $(‘selector’).plugin(); //没有传递参数 比如 panel（）
2. $(‘selector’).plugin({}); //传递json参数

5.2.2 调用方法的语法

$(‘selector’).plugin(‘method’, [parameter]);
selector 是jQuery对象选择器。
plugin 是插件的名称。
method 是相应插件现有的方法。
parameter 是参数对象，可以是一个对象、字符串等。

5.2.3 总结：

1. 如果写了easyui组件之后传入的第一个参数是字符串,那么就代表执行组件上面某一个方法,
2. 如果不是一个字符串那么就是创建组件，传入的参数是json字符串；如果没有传入参数还是创建组件.

5.2.4 注意事项

如果尝试调用一个非组件的组件方法那么直接报错

创建组件和调用方法的区别

5.3 事件

所有的事件（回调函数）也都定义在jQuery.fn.{plugin}.defaults里面。
注意：注册事件不能采用dom传统方式注册，需要通过组件注册