用法
1. easyloader.base = '../'; // 设置easyui的基本路径
2. easyloader.load('messager', function(){ // 加载指定的模块
3. $.messager.alert('Title', 'load ok');
4. });
特性
名称 | 类型 | 说明 | 默认值 |
modules | object | 预定义的模块。 |
|
locales | object | 预定义的语言环境。 |
|
base | string | easyui的基本路径,必须以'/'结尾。 | 基本路径将被自动相对于easyload.js进行设置 |
theme | string | 定义在'themes'目录下的主题名称。 | default |
css | boolean | 定义当加载模块的时候是否加载css文件。 | true |
locale | string | 语言环境名称。 | null |
timeout | number | 以毫秒为单位的超时值,如果超时发生就触发。 | 2000 |
定义的语言环境
- af
- bg
- ca
- cs
- da
- de
- en
- fr
- nl
- zh_CN
- zh_TW
事件
名称 | 参数 | 说明 |
onProgress | name | 当一个模块被成功加载的时候触发。 |
onLoad | name | 当一个模块和它的依赖被成功加载的时候触发。 |
方法
名称 | 参数 | 说明 |
load | module, callback | 加载指定模块。当加载成功的时候一个回调函数将被调用。 Module的有效类型是: |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI-- window</title>
<!--
<script type="text/javascript" src="jqueryUI/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="jqueryUI/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="jqueryUI/themes/icon.css" type="text/css"></link>
-->
<script type="text/javascript" src="jqueryUI/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqueryUI/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="jqueryUI/easyloader.js"></script>
<script type="text/javascript">
$(function(){
easyloader.load(['window','messager'],function(){
$("#myDiv").window({
title:"我的窗口",
width:400,
height:300
});
$.messager,alert("nihao")
})
})
</script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
运行结果:
原理:
从上图可以看出EasyLoader加载window的时候,已经把window.js,jquery.messager.js 相关的js 加进来了
同时 easyLoader.load(['window','messager'],function)
{
}
load方法里的方法名可以用数组形式;
同时除了用js 加载外,还可以写HTML代码
<div id="myDiv2" class="easyui-window" title="窗口2"
style="width:300px ;height:300px"></div>
可以实现相同的效果
原理:
easyLoader首先会调用plugins/jquery.parser.js(Parser解析器,首先到HTML中会抓取class有没有'easyui-',然后在看‘-’后的组件式否对,对的话easyLoader加载进来)文件
jquer.parser.js
(function($){
$.parser={auto:true,onComplete:function(_1){//下面一行是插件的的组件
},plugins:["linkbutton","menu","menubutton","splitbutton","progressbar","tree","combobox","combotree","numberbox","validatebox","searchbox","numberspinner","timespinner","calendar","datebox","datetimebox","slider","layout","panel","datagrid","propertygrid","treegrid","tabs","accordion","window","dialog"],parse:function(_2){
var aa=[];
//对组件进行循环
for(var i=0;i<$.parser.plugins.length;i++){
var _3=$.parser.plugins[i];
//然后判断HTML中有没有以‘easyui-’开头的额class,如果有则加到数组中
var r=$(".easyui-"+_3,_2);
if(r.length){
if(r[_3]){
r[_3]();
}else{
aa.push({name:_3,jq:r});
}
}
}
if(aa.length&&window.easyloader){
var _4=[];
for(var i=0;i<aa.length;i++){
_4.push(aa[i].name);
}
//然后通过easyloader加载数组中的组件
easyloader.load(_4,function(){
for(var i=0;i<aa.length;i++){
var _5=aa[i].name;
var jq=aa[i].jq;
jq[_5]();
}
$.parser.onComplete.call($.parser,_2);
});
}else{
$.parser.onComplete.call($.parser,_2);
}
}};
$(function(){
if(!window.easyloader&&$.parser.auto){
$.parser.parse();
}
});
})(jQuery);