# 引入必要的文件 ``` //引入 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> ```