jQuery EasyUI 使用

学习要点:

  1.引入必要的文件

  2.加载 UI 组件的方式

  3.使用 easyload.js 智能加载

  4.Parser 解析器

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

一.引入必要的文件

    <!--引入 jQuery 核心库,这里采用的是 2.0-->
<script type="text/javascript" src="jQueryEasyUI/jquery.min.js" charset="UTF-8"></script>
<!--引入 jQuery EasyUI 核心库,这里采用的是 1.3.6-->
<script type="text/javascript" src="jQueryEasyUI/jquery.easyui.min.js" charset="UTF-8"></script>
<!--引入 EasyUI 中文提示信息-->
<script type="text/javascript" src="jQueryEasyUI/locale/easyui-lang-zh_CN.js" charset="UTF-8"></script>
<!--引入 EasyUI 核心 UI 文件 CSS-->
<link rel="stylesheet" type="text/css" href="jQueryEasyUI/themes/default/easyui.css"/>
<!--引入 EasyUI 图标文件-->
<link rel="stylesheet" type="text/css" href="jQueryEasyUI/themes/icon.css"/>

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

 

二.加载 UI 组件的方式

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

1.使用 class 方式加载;

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

<div class="easyui-dialog" id="box" title="提示框" style="width:400px;height:200px;">
内容部分
</div>

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 文件

<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/easyloader.js"></script>

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 解析,必须要设置父类容器才可以解析到。比如:

<div id="box">
<div class="easyui-dialog" title="标题" style="width:400px;height:200px;">
  <span>内容部分</span>
</div>
</div>

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

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

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

第一百九十二节,jQuery EasyUI 使用的更多相关文章

  1. 第三百九十二节,Django+Xadmin打造上线标准的在线教育平台—sql注入攻击,xss攻击,csrf攻击

    第三百九十二节,Django+Xadmin打造上线标准的在线教育平台—sql注入攻击,xss攻击,csrf攻击 sql注入攻击 也就是黑客通过表单提交的地方,在表单里输入了sql语句,就是通过SQL语 ...

  2. 第一百九十一节,jQuery EasyUI 入门

    jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...

  3. 第一百九十七节,jQuery EasyUI,LinkButton(按钮)组件

    jQuery EasyUI,LinkButton(按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 LinkButton(按钮)组件的使用方法,这个组 ...

  4. 第一百六十二节,jQuery入门介绍

    jQuery入门 学习要点: 1.什么是  jQuery 2.学习 jQuery的条件 3.jQuery的版本 4.jQuery的功能和优势 5.其他 JavaScript库 6.是否兼容低版本  I ...

  5. 第一百七十二节,jQuery,动画效果

    jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一.显示.隐藏 jQuery 中显示方法为:. ...

  6. 第一百八十二节,jQuery-UI,知问前端--日历 UI

    jQuery-UI,知问前端--日历 UI 学习要点: 1.调用 datepicker()方法 2.修改 datepicker()样式 3.datepicker()方法的属性 4.datepicker ...

  7. 第一百九十七-第二百天 how can I 坚持

    又是四天,how 快. 第一天,晚上要坐车回济南,没下班就躁动了.晚上高铁竟然是知道济南西,中间没有停,到济南九点半,去刘松家又吃了一顿.喝了不少酒.挺爽. 第二天,早上五点多就醒了,睡的婚床,哈哈, ...

  8. 第一百二十二节,JavaScript表单处理

    JavaScript表单处理 学习要点: 1.表单介绍 2.文本框脚本 3.选择框脚本 为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面. 一. ...

  9. 第一百九十二天 how can I 坚持

    早上去中关村森林公园跑了会步,下午看了部电影<夏洛特烦恼>,感觉电影跟我看的那部小说差不多,还是挺不错的. 睡觉.

随机推荐

  1. WebApi单元测试记录

    一.MessageHandler不一定是全局的,也可以只应用到指定的Router上 .定义一个handler // Pipelines HttpMessageHandler affiliateShip ...

  2. 一些常用JS 函数总结

    搜索url参数 /** * 搜索url参数 * @param {String} name 参数键名 * @return {String} 对应值 */ function getQueryVariabl ...

  3. nginx+php-fpm页面显示空白的解决方法

    在nginx与php的环境中,配置了一个wordpress,访问时发现php的页面一直显示空白,起初以为是权限问题,将权限改成755后还是不行.   然后,开启nginx和php的日志,但在日志里也没 ...

  4. 页面自动适应大小&&获取页面的大小

    直接上代码: <script type="text/JavaScript"> var size = 1.0; function showheight() { alert ...

  5. D3.js系列——动态效果和Update、Enter、Exit的理解

    一.动态效果 D3 支持制作动态的图表.有时候,图表的变化需要缓慢的发生,以便于让用户看清楚变化的过程,也能给用户不小的友好感. 1.什么是动态效果 前面制作的图表是一蹴而就地出现,然后绘制完成后不再 ...

  6. Node.js 使用http客户端得到网站的图片下载到本地

    以下代码有些冗余,大家捡核心看就好. // 内置http模块,提供了http服务器和客户端功能 var http=require("http"); // cheerio模块,提供了 ...

  7. Unity 配置静态excel 工作流程

    TP:FCEE652B cause how improvement cause 在游戏开发的过程中,很多时候需要策划填的一些静态数据表(比如英雄表,技能表等等),而策划一般都习惯使用excel. ex ...

  8. lodash 提取前N个元素 take

    _.take(array, [n=1]) 从数组的起始元素开始提取 N 个元素. <!DOCTYPE html> <html lang="zh"> < ...

  9. Hibernate单向“多对一”关联

    1. 基于外键关联的单向“多对一”关联是最常见的单向关联其中指定many-to-one的unique="true",为单向“一对一”,不指定就是单向“多对一” <class  ...

  10. Easy Explore插件:在eclipse里快速打开文件所在的目录

    下载:easyexplore_1.0.4 安装:把文件”org.sf.easyexplore_1.0.4.jar”文件解压出来,然后复制到eclipse安装目录的”plugins”文件夹里 http: ...