【連載】研究EasyUI系統—Easyloader元件
easyloader元件在easyui框架中的主要作用就是載入各種各樣的模組，可以是easyui預設的模組，也可以是其他外部（包括網路上的）模組。
easyloader屬性：
| 屬性名稱 | 屬性值型別 | 屬性預設值 | 描述 |
|---|---|---|---|
| modules | 物件 | 預定義的模組 | |
| locales | 物件 | 預定義的國際化資源。 | |
| base | 字串 | 自行設定 | easyui根目錄，需以“/”結尾。 根目錄會根據“easyloader.js”所在位置自動設定。 |
| theme | 字串 | default | 主題名稱，預設為default。 主題名稱的設定依據“themes”下的各子目錄，每個子目錄都是一種主題風格，所以本屬性的值需要和子目錄名一致。 |
| css | 布林值 | true | 指明在載入指定模組時，是否載入對應的css檔案。 |
| locale | 字串 | null | 國際化資源名稱。 |
| timeout | 數值 | 2000 | 載入的最大超時時限。 |
modules是easyui框架預定義模組或元件，例如“textbox”、“linkbutton”等等，根據版本的不同，modules所包含的元件也有不同，一般而言版本越新元件越多。
locales是easyui框架預定義的國際化資源，包括中、英、德、法等等多國語言。
modules和locales一般使用框架預定義的內容，不做修改。
base屬性指定了easyui的根目錄，根目錄會根據當前easyloader.js的存放位置來自動設定。
theme屬性指定要載入的easyui框架主題，目前easyui框架有default、bootstrap、black、gray、metro等主題。
locale指定要載入的國際化資源，屬性值根據國際標準確定。如果你想使用法文，那麼locale的值就是字串“fr”，如果是簡體中文則為“zh_CN”。
timeout是easyui載入元件的超時時間，預設為2000毫秒，超過後就不再載入。
下面是easyloader的方法。
| 方法名稱 | 引數 | 描述 |
|---|---|---|
| load | module, callback | 載入指定模組。module引數為元件，callback為回撥函式。 |
easyloader元件只有一個load方法，用於載入模組。module既可以是模組名稱，也可以是模組陣列，還可以是js或css檔案。callback是回撥函式，load方法呼叫成功後即呼叫該函式。回撥函式並不是必須的，可以不寫。
easyloader事件。
| 事件名稱 | 引數 | 描述 |
|---|---|---|
| onProgress | name | 目標模組載入成功後觸發。引數為模組名。 |
| onLoad | name | 目標模組以及其依賴模組（元件）載入成功後觸發。引數為模組名。 |
onProgress和onLoad事件很簡單也很好理解，都是載入成功後觸發該事件。不同的是前者只要目標模組載入成功後即觸發；後者除目標模組本身外，其依賴的模組（元件）也一併載入成功後才觸發。
easyloader的詳細用法。
<html>
<head>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/easyloader.js"></script>
/* 必須要引入easyloader.js */
<script>
easyloader.locale = "de";
easyloader.theme = "black";
easyloader.timeout = 5000;
easyloader.load("textbox",function(){
$('#txt').textbox({
required:true,
height:30
});
});
</script>
</head>
<body>
<input id="txt" type="text" style="width:300px">
</body>
</html> easyloader在easyloader.js檔案中定義，因此必須引入該檔案。我們將locale設定為德語，主題設定為”black”樣式，超時時間設定為5秒。隨後載入textbox元件。
可以看到，提示資訊已經是德語。
easyloader的其他指令碼載入用法。
<script>
/* easyloader以陣列形式載入linkbutton、textbox、combobox元件 */
easyloader.load({"linkbutton", "textbox", "combobox"},function(){......});
/* easyloader載入js（css）檔案 */
easyloader.load("../js/test.js",function(){......});
easyloader.load("../css/test.css");
/* 載入外部js檔案 */
using ("http://example.com/js/exp.js",function(){......})
using ("../js/test.js",function(){......})
</script>