当前位置: 首页 > 工具软件 > easyloader > 使用案例 >

EasyUI Easyloader 加载器

庄文栋
2023-12-01
<!-- 引入 jQuery EasyUI 核心库 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/jquery.easyui.min.js" ></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5/themes/default/easyui.css" type="text/css"/>

如果只用到 EasyUI 的其中几个组件,将其全部引入就很大,使项目多出很多用不到的东西。但是,如果单独引入又不知道用到的组件依赖了哪些组件。

jQuery EasyUI是一款基于JQuery的UI高速搭建组件。
EasyLoader是能够动态载入脚本和CSS文件。也能够动态载入EasyUI已有组件。须要引用EasyLoader.js文件

<!-- 引入jQuery 核心库-->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/jquery.min.js"></script>
<!-- 引入easyLoader.js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/easyloader.js"></script>

比如要载入linkbutton组件。则能够用以下的两种方式来载入:
第一种通过设置class来实现:

<a href="#" class="easyui-linkbutton" onclick="load1()">载入日历</a>

仅仅要class设置了easyui-组件名,easyloader就会自己主动动态载入对应的组件

另外一种通过脚本来实现:

using('calendar', function () {
	alert("载入成功!") ;
});

或者

easyloader.load('calendar', function () { alert("载入成功。") });

这里using 等同于 easyloader.load,也就是说using是 easyloader.load方法的简写。

使用脚本库总要加载一大堆的样式表和脚本文件,在easyui 中,除了可以使用通常的方式加载之外,还提供了使用 easyloader 加载的方式。这个组件主要是为了按需加载组件而诞生。什么情况下使用它呢?

  1. 你觉得一次性导入 easyui 的核心 min js 和 css 太大
  2. 你只用到 easyui 的其中几个组件
  3. 你想使用其中的一个组件,但是你又不知道这个组件依赖了那些组件。 如果你有以上三中情况,那么推荐你使用easyLoader。它可以帮你解决这些问题。
    easyloader 用来帮助我们自动加载所需的脚本文件和样式文件,这样,我们只需要在页面中引用 jquery 脚本 和 easyloader 脚本,easyloader 就可以帮助我们分析模块的依赖关系,先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui开头的标签都转化成 easyui的控件。

用法

加载 EasyUI 模块

easyloader.base = '../'; // 设置 easyui 的基本目录
easyloader.load('messager', function(){ // 加载指定的模块
	$.messager.alert('Title', 'load ok');
});

通过绝对 url 加载脚本

using('http://code.jquery.com/jquery-1.4.4.min.js', function(){
// ...
});

通过相对 url 加载脚本

using('./myscript.js',
function(){
// ...
});
名称类型描述默认值
modulesobject预定义的模块。
localesobject预定义的语言环境。
basestringeasyui 的基本目录,必须以 '/' 结尾。基本目录将被自动相对于 easyload.js 进行设置
themestring定义在 'themes' 目录下的主题名称。default
cssboolean定义当加载模块的时候是否加载 css 文件。true
localestring语言环境名称。null
timeoutnumber以毫秒为单位的超时值,如果超时发生就触发。2000
 类似资料: