博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第一百九十二节,jQuery EasyUI 使用
阅读量:6242 次
发布时间:2019-06-22

本文共 1874 字,大约阅读时间需要 6 分钟。

jQuery EasyUI 使用

 

学习要点:

  1.引入必要的文件

  2.加载 UI 组件的方式

  3.使用 easyload.js 智能加载

  4.Parser 解析器

 

本节课重点了解 EasyUI 的两种使用方法,包含不同的加载已经 easyload 智能按需加 载。最后了解一下 Parser 解析器的用法。

 

一.引入必要的文件

PS:引入完毕后,我们就可以编写 jQuery EasyUI 代码了。

 

二.加载 UI 组件的方式

加载 UI 组件有两种方式:1.使用 class 方式加载;2.使用 JS 调用加载。

1.使用 class 方式加载;

使用 class 加载,格式为:easyui-组件名

内容部分

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

 

2.使用 JS 调用加载。【推荐】

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

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

 

三.使用 easyload.js 智能加载【不推荐】

删除 jQuery EasyUI 的 JS 核心文件及 CSS,引入 easyloader.js 文件

easyloader.load()智能加载ui组件,参数第一个是组件名称,第二个是函数,在函数里写加载组件

 

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;   //默认true 定义是否自动解析 EasyUI 组件

放在$(function () {})外

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

$(function () {    $.parser.parse();     //解析指定的 UI 组件,没有传节点对象,就会解析所有ui});$.parser.auto = false;   //默认true 定义是否自动解析 EasyUI 组件

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

  
内容部分

 

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

$(function () {    // $.parser.parse();     //解析指定的 UI 组件,没有传节点对象,就会解析所有ui});// $.parser.auto = false;   //默认true 定义是否自动解析 EasyUI 组件$.parser.onComplete = function () {    alert('解析完毕后执行');};

UI 组件解析完毕后执行,放在$(function () {})外

 

转载地址:http://hmsia.baihongyu.com/

你可能感兴趣的文章
1. Two Sum
查看>>
Tomcat学习总结(10)——Tomcat多实例冗余部署
查看>>
2017书单
查看>>
Redis学习总结(1)——Redis内存数据库详细教程
查看>>
python 生成器与迭代器
查看>>
VS2017 调试期间无法获取到变量值查看
查看>>
Java+SpringBoot实现四则运算
查看>>
【转载】Discriminative Learning和Generative Learning
查看>>
Git中的AutoCRLF与SafeCRLF换行符问题
查看>>
通过Process启动外部程序
查看>>
那些在django开发中遇到的坑
查看>>
cocos2dx lua 绑定之二:手动绑定自定义类中的函数
查看>>
IE CSS HACK
查看>>
北风设计模式课程---深入理解[代理模式]原理与技术
查看>>
php课程 4-14 数组如何定义使用
查看>>
winform托盘时,要运行一个实例,解决办法
查看>>
vagrant up 失败解决办法
查看>>
mysql AM/PM to 24 hours fromat
查看>>
远程唤醒UP Board
查看>>
网页打印
查看>>