Jquery easyUI 组件加载方式
jQuery EasyUI是一款基于JQuery的UI快速搭建组件。今天介绍下EasyLoader的功能。
EasyLoader是可以动态加载脚本和CSS文件，也可以动态加载EasyUI已有组件
需要引用EasyLoader.js文件，注意：这里就不需要引用jquery.easyui.min.js文件了。使用jquery.easyui.min.js将全部加载easyUI组件
比如需要加载linkbutton组件，则可以用下面的两种方式来加载：
第一种通过设置class来实现:
<a href="#" class="easyui-linkbutton" onclick="load1()">加载日历</a>
设置了easyui-组件名，easyloader就会自动动态加载相应的组件
第二种通过脚本来实现:
using('calendar', function () { alert("加载成功！") });
或者
easyloader.load('calendar', function () { alert("加载成功！") });
这里using 等同于 easyloader.load，也就是说using是 easyloader.load方法的简写。
使用方法
加载 EasyUI 模块
1. easyloader.base = '../'; // 设置 easyui 基础目录
2. easyloader.load('messager', function(){ // 加载指定模块
3. $.messager.alert('Title', 'load ok');
4. });
easyloader.base = '../'; // 设置 easyui 基础目录
easyloader.load('messager', function(){ // 加载指定模块
$.messager.alert('Title', 'load ok');
});
加载来自绝对路径的脚本
1. using('http://code.jquery.com/jquery-1.4.4.min.js', function(){
2. // ...
3. });
using('http://code.jquery.com/jquery-1.4.4.min.js', function(){
// ...
});
加载来自相对路径的脚本
1. // 脚本路径相对于 easyui 目录
2. using('./myscript.js', function(){
3. // ...
4. });
// 脚本路径相对于 easyui 目录
using('./myscript.js', function(){
// ...
});
属性
属性名 | 属性值类型 | 描述 | 默认值 |
modules | object | 预定义模块。 | |
locales | object | 预定义区域。 | |
base | string | easyui 基础目录，必须用'/'结束。 | 基本目录被预设为相对路径下的easyload.js文件 |
theme | string | 主题的名称预定义在themes目录下。 | default |
css | boolean | 定义在加载模块的时候加载 CSS 文件。 | true |
locale | string | 区域名称 | null |
timeout | number | 超时的值以毫秒为单位，载入如果超时则重载。 | 2000 |
预定义区域
- bg // 保加利亚语
- ca // 加拿大
- cs // 捷克语
- cz // 捷克语（捷克共和国）
- da // 丹麦语
- de // 德语
- en // 英语
- es // 西班牙语
- fr // 法语
- nl // 荷兰
- tr // 土耳其语
- zh_CN // 简体中文
- zh_TW // 繁体中文
事件
事件名 | 事件参数 | 描述 |
onProgress | name | 当一个模块加载成功的时候触发。 |
onLoad | name | 当一个模块以及他的依赖加载成功的时候触发。 |
方法
方法名 | 方法参数 | 描述 |
load | module, callback | 加载指定模块。当加载成功的回调函数被调用。 模块参数有效的类型包括： ● 一个单一的模块名称 ● 模块数组 ● ".css"后缀结尾的CSS文件 ● ".js"后缀结尾的JS文件 |
