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 相关文章推荐
javascript FormatNumber函数实现方法
Dec 30 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
python实现抖音视频批量下载
2018/06/20 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
小学老师寄语大全
2014/04/04 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
2016高考感言
2015/08/01 职场文书
2019年思想汇报
2019/06/20 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript