1.引入必要的文件 2.加载 UI 组件的方式 4.Parser 解析器
//引入 jQuery 核心库,这里采用的是 2.0 <scripttype="text/javascript"src="easyui/jquery.min.js"></script> //引入 jQuery EasyUI 核心库,这里采用的是 1.3.6 <scripttype="text/javascript"src="easyui/jquery.easyui.min.js"></script> //引入 EasyUI 中文提示信息 <scripttype="text/javascript"src="easyui/locale/easyui-lang-zh_CN.js"></script> //引入自己开发的 JS 文件 <scripttype="text/javascript"src="js/index.js"></script> //引入 EasyUI 核心 UI 文件 CSS <linkrel="stylesheet"type="text/css"href="easyui/themes/default/easyui.css"/> //引入 EasyUI 图标文件 <linkrel="stylesheet"type="text/css"href="easyui/themes/icon.css"/>
引入必要的文件
加载 UI 组件有两种方式:1.使用 class 方式加载;2.使用 JS 调用加载 //使用 class 加载,格式为:easyui-组件名 <divclass="easyui-dialog" id="box"title="标题"style="width:400px;height:200px;"> 内容部分 </div> PS:使用了规定的格式就可以生成一个 UI 组件,这是由于 jQueryEasyUI 的一个解析 器(Parser)的起到了作用。解析之后,从 Firebug 里面可以看到 UI 组件变化后的 HTML //使用 JS 调用加载 $('#box').dialog(); PS:一般推荐使用第二种 JS 调用加载,因为一个 UI 组件有很多属性和方法,如果使 用 class 的用法将极大的不方便。并且根据 JS 和 HTML 分离的原则,第二种提高了代码的 可读性。
加载 UI 组件的方式
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 解析,必须要设置父类容器才可以解析到。比如: <divid="box"> <divclass="easyui-dialog" title="标题"style="width:400px;height:200px;"> <span>内容部分</span> </div> </div> //UI 组件解析完毕后执行,放在$(function () {})外 $.parser.onComplete = function () { alert('UI 组件解析完毕!'); };
.Parser 解析器
1.引入必要的文件 2.加载 UI 组件的方式 4.Parser 解析器的更多相关文章
- Vue动态加载异步组件
背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,if ...
- 常用js,css文件统一加载方法,并在加载之后调用回调函数
原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...
- 2、手把手教你Extjs5(二)项目中文件的加载过程
上一节中用sencha工具自动创建了一个项目,并且可以在浏览器中查看.现在我们来看看js类加载过程.如下图所示: 1、首先:浏览器中输入 localhost:1841 ,调用 index.html; ...
- Web前端性能优化——如何有效提升静态文件的加载速度
WeTest 导读 此文总结了笔者在Web静态资源方面的一些优化经验. 一.如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标.那么为了提高页 ...
- extjs5(项目中文件的加载过程)
现在来看看js类加载过程.如下图所示: 1、首先:浏览器中输入 localhost:1841 ,调用 index.html; <!DOCTYPE HTML> <html> &l ...
- web前端性能优化,提升静态文件的加载速度
原文地址:传送门 WeTest 导读 此文总结了笔者在Web静态资源方面的一些优化经验. 如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标. ...
- 【Spring MVC】Properties文件的加载
[Spring MVC]Properties文件的加载 转载:https://www.cnblogs.com/yangchongxing/p/10726885.html 参考:https://java ...
- js文件 与 css文件 异步加载
使用lazyload 异步加载css js 文件. 提升页面初始化的速度,减少卡顿时间 , 下面是 使用方法 与 lazyload.js 源码 (中文注释) 调用方法后. 会追加到 head 标签末尾 ...
- xib文件的加载方法
xib文件的加载方法 以UITableViewCell的cell为例 很多时候因为系统的cell无法满足我们的日常需求,我们都会自定义cell 因为cell的界面比较固定,所以通常都会选择用xib来描 ...
随机推荐
- log4j日志输出使用教程
Log4j是帮助开发人员进行日志输出管理的API类库.它最重要的特点就可以配置文件灵活的设置日志信息的优先级.日志信息的输出目的地以及日志信息的输出格式.Log4j除了可以记录程序运行日志信息外还有一 ...
- PHPCMS V9 简单的二次开发
更多二次开发技巧,查看phpcms系统帮助 ,前台模板解析后的缓存 caches\caches_template\default 前台控制类index.php,前台标签类*_tag.class.php ...
- 网络请求时 返回 App Transport Security has blocked a cleartext HTTP
如上图,是因为 Xcode7 没有对 plist 进行 http 请求的配置 所致 这时需要 加上上面的plist的红框中 的内容 并且 设置 为 yes 如下图
- 刷入临时recovery
@echo off @echo 手机进 Fastboot 模式 fastboot.exe boot recovery.img @echo. @echo 等待手机进入临时REC pause echo o ...
- java8-concurrency-tutorial-thread-executor-examples
http://ifeve.com/java8-concurrency-tutorial-thread-executor-examples/
- ural 1106 Two Teams
http://acm.timus.ru/problem.aspx?space=1&num=1106 #include <cstdio> #include <cstring&g ...
- ural 1348 Goat in the Garden 2
http://acm.timus.ru/problem.aspx?space=1&num=1348 #include <cstdio> #include <cstring&g ...
- MFC中DoDataExchange()的作用
void CDlgSelectCS::DoDataExchange(CDataExchange* pDX) { CDialog::DoDataExchange(pDX); DDX_Te ...
- 【转】我的Android笔记(十)—— ProgressDialog的简单应用,等待提示
原文网址:http://blog.csdn.net/barryhappy/article/details/7376231 在应用中经常会用到一些费时的操作,需要用户进行等待,比如加载网页内容…… 这时 ...
- HDU4436---str2int 后缀树组(12年天津区域赛)
str2int Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total S ...