# 引入必要的文件 ``` //引入 jQuery 核心库 <script type="text/javascript" src="easyui/jquery.min.js"></script> //引入 jQuery EasyUI 核心库 <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> //引入 EasyUI 中文提示信息 <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script> //引入 EasyUI 核心 UI 文件 CSS <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /> //引入 EasyUI 图标文件 <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /> ``` # Jquery Easyui 加载方式 ## 类加载方式 //使用了规定的格式就可以生成一个 UI 组件， //这是由于 jQuery EasyUI 的一个解析器（Parser）的起到了作用。 //解析之后，从 Firebug 里面可以看到 UI 组件变化后的 HTML。 //使用 class 加载，格式为：easyui-组件名 <div class="easyui-dialog" id="box" title="标题" style="width:400px;height:200px;"> 内容部分 </div> ## 使用JS调用加载 ``` <div id="box" style="width:400px;height:200px;"> 内容部分 </div> <script> $(function(){ $('#box').dialog({ title:'我是标题', collapside:true, iconCls:'icon-ok', onOpen:function(){ console.log('open'); }, }); }); </script> ``` ## 使用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> <!--在js代码中--> $(funtion(){ easyloader.load('dialog',function() { $('#box').dialog(); ); }); ``` > 使用 easyloader 智能加载，是根据使用的 UI 组件按需加载。可以通过Firebug 查看 HTML，发现加载了非常多的 js 文件，这些 js 都是 dialog 组件的必须条件。 所以，使用 easyloader 加载会减少不必要的内容加载。但问题是，使用智能加载，编码 的难度和成本都提高了，效率降低，并且智能加载的 js 文件数量还是非常多的，并不会提 高太大的速度，反而因为 js 文件较多，被搜索引擎要求合并优化。 ## Parser解析器 > Parser 解析器是专门解析渲染各种 UI 组件了，一般来说，我们并不需要使用它即可 自动完成 UI 组件的解析工作。 当然，有时可能在某些环境下需要手动解析的情况。手动解析一般是使用 class 的情况下有效，比如设置 class="easyui-dialog"。 ``` <div id="box"> <div class="easyui-dialog" title="标题" style="width:400px;height:200px;"> <span>内容部分</span> </div> </div> <script> $(function(){ }); <!-- 放在jquery解析外 --> <!-- Parser属性 --> <!--$.parser.auto true 定义是否自动解析 EasyUI 组件 --> $.parser.auto = false; <!-- Parser方法 --> <!-- 解析所有UI --> $.parser.parse(); <!-- 解析指定的UI --> <!-- 解析指定UI必须要设置父类容器 --> $.parser.parse('#box'); <!-- UI解析完成后执行 --> $.parser.onComplete = function() { alert('UI组件解析完毕！'); } </script> ```