JQuery EasyUI的使用


Posted in Javascript onFebruary 24, 2016

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的目录结构都如下图所示

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的使用,希望对大家有所帮助!

Javascript 相关文章推荐
jQuery 阴影插件代码分享
Jan 09 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 #Javascript
JavaScript中的闭包
Feb 24 #Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 #Javascript
jquery中键盘事件小结
Feb 24 #Javascript
javascript实现九宫格相加数值相等
May 28 #Javascript
Javascript类型转换的规则实例解析
Feb 23 #Javascript
理解Javascript图片预加载
Feb 23 #Javascript
You might like
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
轮播图组件js代码
2016/08/08 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
本科毕业生求职信
2014/06/15 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
租赁协议书
2015/01/27 职场文书
世界气象日活动总结
2015/02/27 职场文书
责任书范本大全
2015/05/11 职场文书
反腐倡廉观后感
2015/06/08 职场文书
初中思品教学反思
2016/02/20 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
Flink 侧流输出源码示例解析
2022/09/23 Servers