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

来源：互联网发布：linux查询端口号占用编辑：程序博客网时间：2024/04/28 17:15

用法

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

0 0

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

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