jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件。
EasyUI 简介
easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。
使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
本文重点了解 EasyUI 的两种使用方法,包含不同的加载已经 easyload 智能按需加载。最后了解一下 Parser 解析器的用法。
注意:所有的代码将在文章的最后页统一引入
一. 引入必要的文件
由于刚刚更新了 jQuery EasyUI1.4.4,这个小微版本的更新主要是内部优化和 UI 的一些微调,本身不影响学习。之前我们采用 1.2.4 版本的中文手册学习 1.3.5 都没有什么障碍,所以,不必担心版本问题。
我们在整个文章中JQuery EasyUI的目录结构都如下图所示
easyui文件夹是保存JQuery EasyUI的所有要使用的文件
JS文件夹是保存我们自己的JS文件的
index.html是保存我们自己书写的html代码
//引入 jQuery 核心库,这里采用的是 . <script type="text/javascript" src="easyui/jquery.min.js"></script> //引入 jQuery 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> //引入自己开发的 JS 文件 <script type="text/javascript" src="js/index.js"></script> //引入 EasyUI 核心 UI 文件 CSS <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /> //引入 EasyUI 图标文件 <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
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="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/easyloader.js"></script> //JS 代码 easyloader.load('dialog', function () { $('#box').dialog(); });
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的使用,希望对大家有所帮助!