easyloader分析与使用
转载自:http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html
使用脚本库总要加载一大堆的样式表和脚本文件,在 easyui 中,除了可以使用通常的方式加载之外,还提供了使用 easyloader 加载的方式。
- 你觉得一次性导入 easyui 的核心 min js 和 css 太大
- 你只用到 easyui 的其中几个组件
- 你想使用其中的一个组件,但是你又不知道这个组件依赖了那些组件。
easyloader 用来帮助我们自动加载所需的脚本文件和样式文件,这样,我们只需要在页面中引用 jquery 脚本 和 easyloader 脚本,easyloader 就可以帮助我们分析模块的依赖关系,先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui开头的标签都转化成 easyui的控件。
下面我们,以使用 messager 模块为例,使用 easyloader 加载所需的模块。
我们的页面可以简单的仅仅写入下面的内容。注意,并不需要通常的样式表和一大堆的脚本引用。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body> <a id="btnAlert" class="easyui-linkbutton">弹出提示框</a> <script src="scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="scripts/easyloader.js" type="text/javascript"></script> <script type="text/javascript"> easyloader.locale = "zh_CN";
using("messager", function () {
alert("加载成功!");
$("#btnAlert").click(function () {
$.messager.alert('Warning', 'The warning message');
});
}); </script>
</body>
</html>
注意看!只有 jquery 的脚本和 easyloader 的脚本,完全没有一大堆的样式和其他脚本文件。
load 用来使用代码来说明需要加载的模块,这是在 easyloader 中定义的一个函数,函数的第一个参数为准备加载的模块名称,第二个参数为加载成功之后的回调函数。这里用来提示已经加载成功。
load 加载的模块有两种格式,即可以是一个字符串表示的单个模块,也可以是一个字符串的数组,同时加载多个模块。
//name有两种,一种是string ,一种是string array,这样一次可以加载多个plugin,都是调用add方法进行添加
if (typeof name == 'string') {
add(name);
} else {
for (var i = 0; i < name.length; i++) {
add(name[i]);
}
}
easyloader.load 还有一个别名 using 定义在 window 对象上,如下所示:
window.using = easyloader.load;
所以,加载的代码也可以这样写。
using("messager", function () {
alert("加载成功!");
});
加载成功之后,我们就可以在代码中使用已经加载的模块了。
页面中还使用 class 说明了一个按钮,这里使用了 class="easyui-linkbutton",easyloader 还可以帮助我们解析元素中的特殊类名,直接就在页面中使用过的模块。
easyloader 会在它所在文件夹中,寻找 plugins 子文件夹中的脚本,和 themes 文件夹中的样式表。所以需要保证文件保存在正确的位置。
不过,easyloader 还提供了一个 base 属性,用来指定寻找插件和脚本的起点。
// jquery-easyui的根目录,在加载easyloader时,会自动根据你放置的位置而改变
base:'.',
除了 base , 还有几个重要的属性
base:'.',//该属性是为了加载js,记录文件夹路径的
theme:'default', //默认主题
css:true,
locale:null,
比如,希望使用中文语言包,则可以如下使用。你会看到提示框的按钮中的文字已经从 Ok 转换为了 "确定"。
easyloader.locale = "zh_CN";
using("messager", function () {
alert("加载成功!");
});
相关阅读:
资源下载:
easyloader分析与使用的更多相关文章
- EasyUI学习总结(二)——easyloader分析与使用(转载)
本文转载自:http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html 使用脚本库总要加载一大堆的样式表和脚本文件,在easyui 中,除 ...
- 2.EasyUI学习总结(二)——easyloader分析与使用(转载)
本文转载自:http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html 使用脚本库总要加载一大堆的样式表和脚本文件,在easyui 中,除 ...
- 学习 easyui 之一:easyloader 分析与使用
http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html 使用脚本库总要加载一大堆的样式表和脚本文件,在 easyui 中,除了可以使用 ...
- 3.EasyUI学习总结(三)——easyloader源码分析
easyloader模块是用来加载jquery easyui的js和css文件的,即easyloader可以在调用的时候自动加载当前页面所需的文件,不用再自己引用, 而且它可以分析模块的依赖关系,先加 ...
- easyloader.js源代码分析
http://www.cnblogs.com/jasonoiu/p/easyloader_source_code_analysis.html Jquery easyui是一个javascript UI ...
- easyloader [easyui_1.4.2] 分析源码,妙手偶得之
用easyui很久了,但是很少去看源码. 有解决不了的问题就去百度... 今日发现,easyui的源码不难懂. 而且结合 easyloader 可以非常方便的逐个研究easyui的组件. 但是, ea ...
- EasyUI学习总结(三)——easyloader源码分析(转载)
声明:这一篇文章是转载过来的,转载地址忘记了,原作者如果看到了,希望能够告知一声,我好加上去! easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依 ...
- 学习 easyui 之二:jQuery 的 ready 函数和 easyloader 的加载回调函数
Ready 事件不一定 ready 使用 easyloader 的时候,必须要注意到脚本的加载时机问题,easyloader 会异步加载模块,所以,你使用的模块不一定已经加载了.比如下面的代码. &l ...
- alias导致virtualenv异常的分析和解法
title: alias导致virtualenv异常的分析和解法 toc: true comments: true date: 2016-06-27 23:40:56 tags: [OS X, ZSH ...
随机推荐
- SQL语句之 多表管理
SQL语句之 多表管理 一个数据库内通常会有不止一张表,有时候我们要把多张表联系起来,这就需要用到多表管理的语句. 1.外键约束 一个表中的非主键字段,如果在另外一张表中是主键,那么这个字段我们叫它做 ...
- Linux usb 驱动程序范例
linxu_usb驱动之框架 USB骨架程序可以被看做一个最简单的USB设备驱动的实例. 首先看看USB骨架程序的usb_driver的定义 [cpp] view p ...
- Linux驱动之USB(个人)
USB概述 <USB简介> a:背景 USB是Universal Serial Bus的缩写,是一种全新的,双向同步传输的,支持热插拔的 ...
- codevs 5929 亲戚
5929 亲戚 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 若某个家族人员过于庞大,要判断两个是否是亲戚,确实还很不 ...
- 求有向图的强连通分量个数 之 Kosaraju算法
代码: #include<cstdio> #include<cstring> #include<iostream> using namespace std; ][] ...
- 「LOJ 556 Antileaf's Round」咱们去烧菜吧
「LOJ 556 Antileaf's Round」咱们去烧菜吧 最近在看 jcvb 的生成函数课件,顺便切一切上面讲到的内容的板子题,这个题和课件上举例的背包计数基本一样. 解题思路 首先列出答案的 ...
- C语言一些基础知识
#include<bits/stdc++.h> #include<bits/stdc++.h>包含C++的所有头文件,看见别人用这个函数,然后就能直接用vector,set,s ...
- Delphi 资源管理器套件
需要个类似资源管理器的东西, 首先试了下 TDriveComboBox.TDirectoryListBox.TFileListBox, 嘿! Win31 时代的东西, 不是一般地丑. 试了下 Vcl. ...
- STM32 Timer : Base Timer, Input Capture, PWM, Output Compare
http://www.cs.indiana.edu/~geobrown/book.pdf An example of a basic timer is illustrated in Figure 10 ...
- AT91 USB Composite Driver Implementation
AT91 USB Composite Driver Implementation 1. Introduction The USB Composite Device is a general way t ...