easyui（1）

使用Easyui

1、引入必要的文件

1）、jquery核心库

2）、easyui核心库

3）、easyui中文提示信息

4）、自己开发的js文件

5）、easyui核心UI文件css

6）、easyui图标文件

引入完毕就可以开始写代码了

加载UI组件的方式

1、使用class方式加载

使用class加载，格式为：easyui-组件名

<div id="box" class="easyui-dialog" title="标题" style="width:400px; height:200px;">

内容部分

</div>

2、通过js调用加载

<div id="box" title="标题" style="width:400px; height:200px;">

$(function(){

$("#box").dialog();

});

一般推荐使用第二种：js调用加载，因为一个UI组件有很多属性和方法，如果使用class的用法将极大的不方便。

使用easyload.js智能加载

easyui算是一个比较重的前端框架了，有些时候可以不向前面一样引入easyui的那些组件，而是引入easyuiloader.js,然后在js中调用加载组件，自动进行动态加载js，可以节约很大部分空间。

<script type="text/javascript" src="../../easyui/jquery.min.js"></script>

<script type="text/javascript" src="../../easyui/easyloader.js"></script>

<script type="text/javascript" src="../../js/01/t1.js"></script>

easyloader.load('dialog',function(){

这里必须JS调用在easyloader的load方法的对应function内。第一个参数是所用到的组件名，为String数组。

parser解析器

parser解析器是专门解析渲染各种UI组件，一般，我们不需要使用它即可完成。当然，某些环境下我们需要手动解析。

手动解析一般是使用class的情况下有效，比如设置class = “easyui-dialog”

parser属性：

属性名 默认值 说明

$.parser.auto true 定义是否自动解析EasyUI组件

//关闭自动解析功能，放在$(function(){})外

parser方法：

属性名 传参 说明

$.parser.parse 空或JQ选择器 解析指定的UI组件

$.parser.onComplete 回调函数 解析完毕后执行

将其他js回到开始的时候，

div id="box" class="easyui-dialog" title="标题" style="width:400px; height:200px;">

$.parser.auto = false; //关闭自动解析

$.parser.onComplete = function(){ //解析回调

alert("解析完毕！");

}

//$("#box").dialog();

//$.parser.parse(); -- 这个表示解析所有组件

$.parser.parse("box");

如果解析指定组件的话，解析的选择器选择的是组件的父容器。

<div id="box">