easyui（1）

使用Easyui

1、引入必要的檔案

1）、jquery核心庫

2）、easyui核心庫

3）、easyui中文提示資訊

4）、自己開發的js檔案

5）、easyui核心UI檔案css

6）、easyui圖示檔案

引入完畢就可以開始寫代碼了

加載UI元件的方式

1、使用class方式加載

使用class加載，格式為：easyui-元件名

<div id="box" class="easyui-dialog" title="标題" style="width:400px; height:200px;">

内容部分

</div>

2、通過js調用加載

<div id="box" title="标題" style="width:400px; height:200px;">

$(function(){

$("#box").dialog();

});

一般推薦使用第二種：js調用加載，因為一個UI元件有很多屬性和方法，如果使用class的用法将極大的不友善。

使用easyload.js智能加載

easyui算是一個比較重的前端架構了，有些時候可以不向前面一樣引入easyui的那些元件，而是引入easyuiloader.js,然後在js中調用加載元件，自動進行動态加載js，可以節約很大部分空間。

<script type="text/javascript" src="../../easyui/jquery.min.js"></script>

<script type="text/javascript" src="../../easyui/easyloader.js"></script>

<script type="text/javascript" src="../../js/01/t1.js"></script>

easyloader.load('dialog',function(){

這裡必須JS調用在easyloader的load方法的對應function内。第一個參數是所用到的元件名，為String數組。

parser解析器

parser解析器是專門解析渲染各種UI元件，一般，我們不需要使用它即可完成。當然，某些環境下我們需要手動解析。

手動解析一般是使用class的情況下有效，比如設定class = “easyui-dialog”

parser屬性：

屬性名 預設值 說明

$.parser.auto true 定義是否自動解析EasyUI元件

//關閉自動解析功能，放在$(function(){})外

parser方法：

屬性名 傳參 說明

$.parser.parse 空或JQ選擇器 解析指定的UI元件

$.parser.onComplete 回調函數 解析完畢後執行

将其他js回到開始的時候，

div id="box" class="easyui-dialog" title="标題" style="width:400px; height:200px;">

$.parser.auto = false; //關閉自動解析

$.parser.onComplete = function(){ //解析回調

alert("解析完畢！");

}

//$("#box").dialog();

//$.parser.parse(); -- 這個表示解析所有元件

$.parser.parse("box");

如果解析指定元件的話，解析的選擇器選擇的是元件的父容器。

<div id="box">