JQuery EasyUI的使用

//引入 jQuery 核心库，这里采用的是 .
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">

PS：引入完毕后，我们就可以编写 jQuery EasyUI 代码了。
二、加载 UI 组件的方式
加载 UI 组件有两种方式：1.使用 class 方式加载；2.使用 JS 调用加载。


//使用 class 加载，格式为：easyui-组件名
<div class="easyui-dialog" id="box" title="标题" style="width:px;height:px;">
内容部分
</div>


PS：使用了规定的格式就可以生成一个 UI 组件，这是由于 jQuery EasyUI 的一个解析器（Parser）的起到了作用。解析之后，从 Firebug 里面可以看到 UI 组件变化后的 HTML。


//使用 JS 调用加载
$('#box').dialog();


PS：一般推荐使用第二种 JS 调用加载，因为一个 UI 组件有很多属性和方法，如果使用 class 的用法将极大的不方便。并且根据 JS 和 HTML 分离的原则，第二种提高了代码的可读性。
三． 使用 easyload.js 智能加载


//删除 jQuery EasyUI 的 JS 核心文件及 CSS，引入 easyloader.js 文件
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">

PS：使用 easyloader 智能加载，是根据你使用的 UI 组件按需加载。我们可以通过Firebug 查看 HTML， 发现加载了非常多的 js 文件， 这些 js 都是 dialog 组件的必须条件。所以，使用 easyloader 加载会减少不必要的内容加载。但问题是，使用智能加载，你编码的难度和成本都提高了，效率降低，并且智能加载的 js 文件数量还是非常多的，并不会提高太大的速度，反而因为 js 文件较多，被搜索引擎要求合并优化。
四、Parser 解析器
Parser 解析器是专门解析渲染各种 UI 组件了，一般来说，我们并不需要使用它即可自动完成 UI 组件的解析工作。当然，有时可能在某些环境下需要手动解析的情况。

手动解析一般是使用 class 的情况下有效，比如设置 class="easyui-dialog"。
Parser 属性
属性名 默认值 说明




$.parser.auto true 定义是否自动解析 EasyUI 组件
//关闭自动解析功能，放在$(function() {})外
$.parser.auto = false;


Parser 方法


属性名 传参 说明




$.parser.parse 空或 JQ 选择器 解析指定的 UI 组件
$.parser.onComplete 回调函数 解析完毕后执行
//解析所有 UI
$.parser.parse();
//解析指定的 UI
$.parser.parse('#box');


PS：使用指定 UI 解析，必须要设置父类容器才可以解析到。比如：


<div id="box">
<div class="easyui-dialog" title="标题" style="width:400px;height:200px;">
<span>内容部分</span>
</div>
</div>
//UI 组件解析完毕后执行，放在$(function () {})外
$.parser.onComplete = function () {
alert('UI 组件解析完毕！');
};


以上内容给大家介绍了JQuery EasyUI的使用，希望对大家有所帮助！