Jquery easyUI 组件加载方式easyLoader

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>

 　　只要class设置了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文件