<!-- 引入 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 加载的方式。这个组件主要是为了按需加载组件而诞生。什么情况下使用它呢?
用法
加载 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(){
// ...
});
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
modules | object | 预定义的模块。 | |
locales | object | 预定义的语言环境。 | |
base | string | easyui 的基本目录,必须以 '/' 结尾。 | 基本目录将被自动相对于 easyload.js 进行设置 |
theme | string | 定义在 'themes' 目录下的主题名称。 | default |
css | boolean | 定义当加载模块的时候是否加载 css 文件。 | true |
locale | string | 语言环境名称。 | null |
timeout | number | 以毫秒为单位的超时值,如果超时发生就触发。 | 2000 |