第一百九十二节,jQuery EasyUI 使用
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 使用的更多相关文章
- 第三百九十二节,Django+Xadmin打造上线标准的在线教育平台—sql注入攻击,xss攻击,csrf攻击
第三百九十二节,Django+Xadmin打造上线标准的在线教育平台—sql注入攻击,xss攻击,csrf攻击 sql注入攻击 也就是黑客通过表单提交的地方,在表单里输入了sql语句,就是通过SQL语 ...
- 第一百九十一节,jQuery EasyUI 入门
jQuery EasyUI 入门 学习要点: 1.什么是 jQuery EasyUI 2.学习 jQuery EasyUI 的条件 3.jQuery EasyUI 的功能和优势 4.其他的 UI 插件 ...
- 第一百九十七节,jQuery EasyUI,LinkButton(按钮)组件
jQuery EasyUI,LinkButton(按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 LinkButton(按钮)组件的使用方法,这个组 ...
- 第一百六十二节,jQuery入门介绍
jQuery入门 学习要点: 1.什么是 jQuery 2.学习 jQuery的条件 3.jQuery的版本 4.jQuery的功能和优势 5.其他 JavaScript库 6.是否兼容低版本 I ...
- 第一百七十二节,jQuery,动画效果
jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一.显示.隐藏 jQuery 中显示方法为:. ...
- 第一百八十二节,jQuery-UI,知问前端--日历 UI
jQuery-UI,知问前端--日历 UI 学习要点: 1.调用 datepicker()方法 2.修改 datepicker()样式 3.datepicker()方法的属性 4.datepicker ...
- 第一百九十七-第二百天 how can I 坚持
又是四天,how 快. 第一天,晚上要坐车回济南,没下班就躁动了.晚上高铁竟然是知道济南西,中间没有停,到济南九点半,去刘松家又吃了一顿.喝了不少酒.挺爽. 第二天,早上五点多就醒了,睡的婚床,哈哈, ...
- 第一百二十二节,JavaScript表单处理
JavaScript表单处理 学习要点: 1.表单介绍 2.文本框脚本 3.选择框脚本 为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面. 一. ...
- 第一百九十二天 how can I 坚持
早上去中关村森林公园跑了会步,下午看了部电影<夏洛特烦恼>,感觉电影跟我看的那部小说差不多,还是挺不错的. 睡觉.
随机推荐
- 【Git】GitHub for Windows使用(1)
目录 1.下载GitHub for windows 客户端 2.注册GitHub 3.启动windows端客户端,登录帐号 4.了解Git客户端,从而了解Git的大体功能 5.创建一个新的资源库 6 ...
- Spring的学习(IoC,AOP)等
下面这个系列是非常好的例子: http://www.yiibai.com/spring/spring-3-hello-world-example.html 正在看,把一些基础夯实. IoC可以从下面一 ...
- NFSv4 mount incorrectly shows all files with ownership as nobody:nobody
NFSv4 mount incorrectly shows all files with ownership as nobody:nobody https://access.redhat.com/ ...
- 从HTML5移动应用现状谈发展趋势
时光如梭,自2008年HTML5诞生以来已经过去了5年的时间,作为新一代的Web标准,它自问世以来就受到方方面面的强烈关注,也引起了许多争议,支持者因其开放强大的特点而鼓吹它的美好前景,质疑者因其迟迟 ...
- SpringMVC整合quartz,实现定时任务
<dependency> <groupId>org.quartz-scheduler</groupId> <artifactId& ...
- JS 取得当前日期时间(文本形式)
//-------------------------------------- // 取得当前时间,来自网上,作者不详 //------------------------------------- ...
- Uni2D 入门
原地址:http://blog.csdn.net/kakashi8841/article/details/17599505
- IOS 应用程序路径
-- 获取资源文件目录 .app/下的图片,音频等资源文件 print("bundlePath" + NSBundle.mainBundle().bundlePath) //以下是 ...
- CentOS6.5下docker的安装及遇到的问题和简单使用(已实践)
转载自 CentOS6下docker的安装和使用 Docker是一个开源的应用容器引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.利用Linux的LXC.AUFS. Go语言.c ...
- SVN学习(二)——SVN 提交、更新、解决冲突等操作步骤
1. 纳入版本控制 ①新建文件abc.txt ②在文件上点右键 ③添加后文件图标发生变化 2. 提交 ①使用TortoiseSVN可以提交具体某一个文件,或某一个目录下的所有改变.方法就是在想要提交的 ...