EasyLoader是可以动态加载脚本和CSS文件,也可以动态加载EasyUI已有组件
需要引用EasyLoader.js文件,注意:这里就不需要引用jquery.easyui.min.js文件了。
比如需要加载linkbutton组件,则可以用下面的两种方式来加载:
第一种通过设置class来实现:
<a href="#" class="easyui-linkbutton" >加载日历</a>
只要class设置了easyui-组件名,easyloader就会自动动态加载相应的组件
第二种通过脚本来实现:
using('calendar', function () { alert("加载成功!") });
或者
easyloader.load('calendar', function () { alert("加载成功!") });
这里using 等同于 easyloader.load,也就是说using是 easyloader.load方法的简写。
常用属性:
1) Locale: 本地化
用法:easyloader.locale = "zh_CN"; // 本地化设置
2) Theme: 主题
用法:easyloader.theme = "gray"; // 设置主题
事件:
1) onProgress: 每个组件加载完成后触发
2) onLoad:在onProgress事件后触发,当组件以及关联组件全部加载完成后触发
两者的区别可以从名称中看出端倪,onProgress事件可以用来显示进度,而onLoad事件可以用于提示用户可以使用组件了。
常用属性和实践使用代码如下:
easyloader.locale = "zh_CN"; // 本地化设置 easyloader.theme = "gray"; // 设置主题 // 每个组件加载完成后触发 easyloader.onProgress = function (name) { $("#loadMsg").append("<br />onProgress --> "); $("#loadMsg").append(name); }; // 在onProgress事件后触发,当组件以及关联组件全部加载完成后触发 easyloader.onLoad = function (name) { $("#loadMsg").append("<br />onLoad --> "); if (typeof name == "string") { $("#loadMsg").append(name); } else { for (var i = 0; i < name.length; i++) { $("#loadMsg").append(name[i] + ","); } } };
使用EasyLoader方法代码如下:
function load1() { // using 等同于 easyloader.load using('calendar', function () { $('#cc').calendar({ width: 180, height: 180 }); }); } function load2() { // 可以一次性加载多个模块 using(['dialog', 'messager'], function () { $('#dd').dialog({ title: '对话框', width: 300, height: 200 }); $.messager.show({ title: '提示信息', msg: '对话框已创建!' }); }); }