easyUI--easyLoader

最新推荐文章于 2024-04-19 17:11:53 发布

Tate-Ling

最新推荐文章于 2024-04-19 17:11:53 发布

阅读量689

点赞数

文章标签： easyui easyLoader

本文链接：https://blog.csdn.net/szzt_lingpeng/article/details/30737067

版权

未整理专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>

Tate-Ling

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyUI--easyLoader

1. 简单载入器 – EasyLoader, 动态加载easyUI模块.A. syLoader源码解析原理a) ascript,如果有easyloader.load方法, 那么easyLoader把load的模块全部加载进来放在head标签的最后, 包括该模块需要的支持js和css.b) 其次, easyLoader再调用jquery
复制链接

扫一扫