jQueryEasyUI

1、认识jQueryEasyUI

(1) 是一组基于jQuery的UI(用户界面)插件集合;
(2) 而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。
(3) 学习的时候，成本不大，easyui知识点由JS+HTML+CSS+jquery，容易上手
(4) 开发者不需要编写复杂的JavaScript，也不需要对css样式有深入的了解，开发者只有需要了解一些简单的html标签。–完成页面的构建
(5) 学习方法 copy+edit 官网里面有很多示例
(6) Easyui是属于前端框架
*

2、搭建EasyUI环境

2.1导入EasyUI项目文件夹

建议创建webapp的项目文件名，同maven标准命名
最好不要携带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、创建组件

（1）使用html创建组件：

语法 <div class='easyui-组件名'/>

（2）通过js代码来创建

  语法： $("#P").组件名({json参数})

4、panel组件

面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。
（1）panel面包使用div创建：
（2）panel属性:
title:面板的标题;
style:面板的样式;
iconCls:面板标题的图标;
collapsible:定义是否显示可折叠按钮。
minimizable:定义是否显示最小化按钮。
maximizable:定义是否显示最大化按钮。
closable:定义是否显示关闭按钮。
tools : 自定义工具按钮. 参数是一个选择器,代表选择器获取元素中的内容就是工具按钮.
fit:设置为true的时候面板大小"将自适应父容器"; 简单理解: 父容器多大,我就多大. 使用了该属性后,我们设置宽高将失效.
href: 从URL读取远程数据并且显示到面板; 一般用于加载动态的内容比较有用. (只加载body里面内容) 一旦设置,那么面板标签中内容会被覆盖掉.
closed : 设置面板是否显示.
loadingMessage:加载远程数据的时候在面板内显示一条消息。

5、LinkButton组件

（1）Linkbutton组件需要通过进行创建；
（2）linkbutton组件:
属性:
iconCls:图标;
disabled:是否禁用;
plain:true时显示简洁效果,其实就是没有背景;
iconAlign:按钮图标位置;可以选值为left,right;默认为:left;
toggle: 是否可以选中效果.
group : 分组,一般与toggle配合使用,达到单选效果;

6、组件三要素

6.1属性

（1）定义：属性描述了组件的更多信息
（2）每一个组件创建出来的时候，都有默认属性，组件默认属性的值

 $.fn.panel.defaults
console.log($.fn.panel.defaults);
//关闭按钮
 $.fn.panel.defaults.closable = true;

一般不会修改组件的默认属性，如果要改，在组件里面自己定义组件的属性
（3）属性在创建的时候，就应该定义好，不要在创建完才去修改属性

$("#p1").attr("title","你的面板");//无效
$("#p1").attr("closed","true");//无效

（4）属性的定义方式：
（a）直接作为一个标签定义

比如<div id="p1" class="easyui-panel" title='yyyy'></div>

(b) 直接在data-options里面定义 OK
（c）标签和data-options结合起来一起使用
注意：如果data-options里面tools有多个值的情况下，只能在data-options写
（5） 直接在js创建组件的时候，使用

6.2方法

（1）组件的方法：

$("#p1").plugin('methodName','参数')

6.3事件

（1）定义：如果组件发生了什么事情，那么它就会通过事件反应给我们
所有的事件（回调函数）也都定义在jQuery.fn.{plugin}.defaults里面。
注意：注册事件不能采用dom传统方式注册，需要通过组件注册；