easyUI--easyLoader
1. 简单载入器 – EasyLoader, 动态加载easyUI模块.
A. easyLoader源码解析原理
a) javascript,如果有easyloader.load方法, 那么easyLoader把load的模块全部加载进来放在head标签的最后, 包括该模块需要的支持js和css.
b) 其次, easyLoader再调用jquery.parser.js来解析标签中的easyUI组件.如: <div id="dd" class="easyui-draggable">
B. 由A可看出, 简单载入器 – EasyLoader有两种方式可以使用:
a) 直接在标签中引用easyUI的class. 有可能$.parser.auto为false时不会解析.
<div id="dd"class="easyui-draggable">
b) 在javascript代码中使用,如:
easyloader.load([ 'messager', 'draggable' ], function() {
$.messager.alert('Title', 'load ok');
$("#dd").draggable({
handle: '#title'
});
});
C. 注意事项
a) 可定义语言和主题:
easyloader.locale= "zh_CN";
easyloader. theme = "default";
b) Base属性很重要, 当自动引入easyUI模块时, 默认的引入路径是与easyloader.js同目录, 如不在同一个目录, 需要制定Base.路劲:
easyloader.base= "../"; //相对于页面的相对路劲
但是自动引入的jquery.parser.js并不因为easyloader.base而受影响, 还是读取的easyloader.js同目录/plugins/jquery.parser.js
所以不建议使用easyloader.base参数, 也不要改变easyUI的路劲结构.
本人测试例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Draggable - jQuery EasyUI demo</title>
<script type="text/javascript" src="../jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../jquery-easyui-1.3.1/easyloader.js"></script>
<!-- <script type="text/javascript" src="../jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
-->
<script type="text/javascript">
$(function() {
easyloader.locale = "zh_CN";
easyloader.theme = "default";
// easyloader.base = "../jquery-easyui-1.3.1/";
easyloader.load([ 'messager', 'draggable' ], function() { //载入特定模块
$.messager.alert('Title', 'load ok');
$("#dd").draggable({
handle : '#title'
});
$.messager.confirm('Confirm', 'Are you sure you want to delete record?', function(r) {
if (r) {
alert('ok');
}
});
});
});
</script>
</head>
<body>
<div id="dd" style="width: 100px; height: 100px;">
<div id="title" style="background: #ccc;">
111111
</div>
</div>
<div id="dd1" class="easyui-draggable" style="width: 100px; height: 100px;">
<div id="title" style="background: #ccc;">
222222
</div>
</div>
</body>
</html>