EasyUI入门

EasyUI学习笔记整理。

EasyUI下载

EasyUI官方下载地址：http://www.jeasyui.com/download/index.php，目前最新的版本是：jQuery EasyUI 1.5.5

下载完成之后，得到压缩包，解压后，得到一个【jquery-easyui-1.5.5.4】文件夹，里面有如下图所示的文件：
EasyUI入门
1、引入必要的文件，习惯先引入css文件

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/js/easyui/themes/default/easyui.css"></link> easyui的默认主题文件

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/js/easyui/themes/icon.css"></link> easyui的图标文件，也可以自定义

2、引入easyui插件库，在此之前必须先引入jquery文件，因为easyui是基于jquery的。

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jq/jquery-1.12.4.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/easyui/jquery.easyui.min.js"></script>

3、导入本地化文件，可挑选需要的本地化文件导入
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/easyui/locale/easyui-lang-zh_CN.js"></script> 中文
EasyUI使用范例
新建一个JavaWeb工程，然后将jquery-easyui加入到工程中，将jquery-easyui文件夹中一些不必要的文件删掉，只保留必要的就可以了，如下图所示：

easyui的UI组件加载方式：
1、HTML样式方式引入：

<div id="dd" class="easyui-dialog" title="My Dialog" style="400px;height:200px;"
    data-options="iconCls:'icon-save',resizable:true,modal:true">
    Dialog Content.
</div>

easyui-dialog就是easyui的对话框属性的加载，easyui的插件都可以用这种方式加载，属性的设置可以写在data-options中。

2、JS的方式加载（常用）：

<div id="dd">Dialog Content.</div>

<script>

$('#dd').dialog({
    title: 'My Dialog',
     400,
    height: 200,
    closed: false,
    cache: false,
    href: 'get_content.php',
    modal: true
});
$('#dd').dialog('refresh', 'new_content.php');
</script>

3、使用easyloader.js智能加载：需要什么组件就加载什么组件，目的是为了节省带宽，但是对于现在的网速来说几乎可忽略，了解即可
只需要引入jquery和easyloader.js两个文件

easyloader.load('组件名',function(){
   $('#div').dialog();
})

Parser解析器：
是专门解析和渲染各种UI组件，一般来说，我们不需要使用它即可自动完成UI组件的解析工作。但是，某些情况下需要手动解析。
手动解析一般是使用class的情况下有效，比如class='easyui-dialog'

属性：

名称类型描述默认值

$.parser.auto boolean 定义是否自动解析 easyui 组件。 true

事件：

名称参数描述

$.parser.onComplete 回调函数当解析器完成解析动作的时候触发。

方法：

名称参数描述

$.parser.parse 空或者jquery选择器解析 easyui 组件。

用法：
```
$.parser.parse(); // 解析整个页面
$.parser.parse('#cc'); // 解析某个具体节点且必须给 #cc加一个父容器才可以，parse中的选择器必须是父容器的选择器
```

EasyUI入门

EasyUI下载