jQuery EasyUI API 中文文档 - EasyLoader 加载器 (风流涕淌翻译)

最新推荐文章于 2024-08-03 20:55:05 发布

fd2020_wyy

最新推荐文章于 2024-08-03 20:55:05 发布

阅读量1.5k

点赞数

文章标签： jquery easyui EasyLoad加载器

用法

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的有效类型是：
单个module名称
一个module数组
用'.css'结尾的css文件
用'.js'结尾的js文件

示例：

<!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);

fd2020_wyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery EasyUI API 中文文档 - EasyLoader 加载器 (风流涕淌翻译)

用法1. easyloader.base = '../'; // 设置easyui的基本路径 2. easyloader.load('messager', function(){ // 加载指定的模块 3. $.messager.alert('Title', 'load ok'); 4. }); 特性
复制链接

扫一扫