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 解析器

上一篇:php 排序


下一篇:EasyUI基础入门之Easyloader(载入器)