2.EasyUI学习总结(二)——easyloader分析与使用(转载)
本文转载自：http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html
使用脚本库总要加载一大堆的样式表和脚本文件，在easyui 中，除了可以使用通常的方式加载之外，还提供了使用 easyloader 加载的方式。这个组件主要是为了按需加载组件而诞生。什么情况下使用它呢？
- 你觉得一次性导入 easyui 的核心 min js 和 css 太大（用easyload可以减少之前那些文件的引入）
- 你只用到 easyui 的其中几个组件
- 你想使用其中的一个组件，但是你又不知道这个组件依赖了那些组件。
easyloader 用来帮助我们自动加载所需的脚本文件和样式文件，这样，我们只需要在页面中引用 jquery 脚本 和 easyloader 脚本，easyloader 就可以帮助我们分析模块的依赖关系，先加载依赖项。模块加载好了会调用parse模块来解析页面。
把class是easyui开头的标签都转化成 easyui的控件。
下面我们，以使用messager和dialog模块为例，使用easyloader加载所需的模块。
方法一：对我们需要easyui的控件的class属性上写上 “easyui-XXXX”
我们的页面可以简单的仅仅写入下面的内容。注意，并不需要通常的样式表和一大堆的脚本引用。
运行结果截图：
运行代码： 使用class属性的时候，只有 jquery 的脚本和 easyloader 的脚本，完全没有一大堆的样式和其他脚本文件。
modal用来使后面变黑，即屏蔽后面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>>EasyUI入门——EasyUI的easyloader的使用</title>
<!-- 引入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> <script type="text/javascript">
$(function(){
//使用easyloader加载dialog模块使用到的相关js和css样式
easyloader.load('dialog',function(){
/*使用JavaScript动态创建EasyUI的Dialog的步骤：
1、定义一个div，并给div指定一个id
2、使用Jquery选择器选中该div，然后调用dialog()方法就可以创建EasyUI的Dialog
*/
//使用自定义参数创建EasyUI的Dialog
$('#dd2').dialog({
title:'使用javascript创建的Dialog',
width:400,
height:200,
closed:false,
cache:false,
modal:true
//寻找这个属性的时候可以去API里面查看
//由dialog的父亲属性是windows再往上继续寻找
});
});
easyloader.locale="zh_CN";
//easyloader.load 还有一个别名 using 定义在 window 对象上
//使用easyloader加载messager模块使用到的相关js和css样式
using("messager",function(){
alert("加载成功");
$("#btnAlert").click(function () {
$.messager.alert('Warning', 'The warning message');
});
});
});
</script>
</head>
<%--使用纯html的方式创建创建EasyUI的Dialog的步骤：
1、定义一个div
2、将div的class样式属性设置成easyui-dialog，这样就可以将普通的div变成EasyUI的Dialog了
--%>
<body>
<div class="easyui-dialog" id="dd1" title="EasyUI Dialog" style="width: 500px;height: 300px;">
Hello world!
</div>
<div id="dd2">Dialog Content </div>
<a id="btnAlert" class="easyui-linkbutton">弹出提示框</a>
</body>
</html>
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 属性，用来指定寻找插件和脚本的起点。
easyload的属性：
1 base:'.',
//该属性是为了加载js,记录文件夹路径的 ，jquery-easyui的根目录，在加载easyloader时，会自动根据你放置的位置而改变
2 theme:'default', //默认主题
3 css:true,
4 locale:null,//如果想要使用中文包，easyloader.locale = "zh_CN";
2.EasyUI学习总结(二)——easyloader分析与使用(转载)的更多相关文章
- EasyUI学习总结(二)——easyloader分析与使用(转载)
本文转载自:http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html 使用脚本库总要加载一大堆的样式表和脚本文件,在easyui 中,除 ...
- easyUI学习笔记二
1． 拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...
- 3.EasyUI学习总结(三)——easyloader源码分析
easyloader模块是用来加载jquery easyui的js和css文件的,即easyloader可以在调用的时候自动加载当前页面所需的文件,不用再自己引用, 而且它可以分析模块的依赖关系,先加 ...
- EasyUI学习总结(三)——easyloader源码分析(转载)
声明:这一篇文章是转载过来的,转载地址忘记了,原作者如果看到了,希望能够告知一声,我好加上去! easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依 ...
- JMeter学习（二十一）关联（转载）
转载自 http://www.cnblogs.com/yangxia-test 话说LoadRunner有的一些功能,比如:参数化.检查点.集合点.关联,Jmeter也都有这些功能,只是功能可能稍弱一 ...
- JMeter学习（二）录制脚本（转载）
转载自 http://www.cnblogs.com/yangxia-test 环境 Badboy version 2.1.1 JDK: 1.7.0_67 Apache JMeter-2.11 - ...
- 《Spring Cloud》学习（二） 负载均衡！
第二章 负载均衡 负载均衡是对系统的高可用.网络压力的缓解和处理能力扩容的重要手段之一.Spring Cloud Ribbon是一个基于 HTTP 和 TCP 的客户端负载均衡工具,它基于Netfli ...
- Python爬虫学习：二、爬虫的初步尝试
我使用的编辑器是IDLE,版本为Python2.7.11,Windows平台. 本文是博主原创随笔,转载时请注明出处Maple2cat|Python爬虫学习:二.爬虫的初步尝试 1.尝试抓取指定网页 ...
- XML学习总结(二)——XML入门
XML学习总结(二)——XML入门 一.XML语法学习 学习XML语法的目的就是编写XML 一个XML文件分为如下几部分内容: 文档声明 元素 属性 注释 CDATA区 .特殊字符 处理指令(proc ...
随机推荐
- mysql集群数据一致性校验
目前,mysql在互联网行业使用地如火如荼,很多大型网站都在使用MySQL数据库,通过搭建mysql主备集群,实现高性能,高可用的存储方案.mysql集群的共同特性是通过复制来实现主备间的同步,保证主 ...
- knockoutJS学习笔记04：监控属性
一.语法介绍 先来看一个简单的例子: <span data-bind="text:name"></span> var obj = {name:ko.obse ...
- 如何对多个属性进行transform
w3school对transform的介绍很简单 transform: none|transform-functions; transform的默认值是none 其所举的例子也只是对一个值进行过渡,其 ...
- XStream简单入门
简单的讲,XStream 涉及的就五个知识点:详情参考 官网 混叠,注解,转换器,对象流和操作json! 下面就用几个简单的例子来实现上述五个知识点! 基本步骤: 第1步:创建XStream对象. 通 ...
- 在asp.net mvc4项目里bootstrap datetimepicker控件的使用
前段时间写了一篇关于调用阿里大于的短信接口来开发例会短信群发通知功能的文章http://www.cnblogs.com/zhouyuangan/p/apicall_1.html,其中的例会时间是需求中 ...
- samsung bios configuration怎么设置U盘启动
1.用第三方U盘制作软件制作U盘启动盘,并下载正版系统镜像或纯净版镜像,下载后缀为ISO的镜像文件拷贝到U盘根目录.2.开机按F2键进入BIOS设置.选择BOOT选项—Secure Boot设置为“D ...
- WinNTSetup v3.8.7 正式版绿色增强版
最强系统安装利器:WinNTSetup 现已更新至 v3.8.7 正式版!这次更新修复调整了诸多问题,新版非常好用接近完美!WinNTSetup 现在已经自带BCDBoot 选项,并且完全支持Wind ...
- 别再抱怨了，国内这么多优秀的Android资源你都知道吗？
因为一些大家都知道的原因,android很多官方出品的优秀开发资源在国内无法访问. 国内的同行们对此也做出了很多努力,有很多朋友通过各种手段把很多优秀的资源搬运到了国内,为国内android开发者提供 ...
- 【UOJ#228】基础数据结构练习题 线段树
#228. 基础数据结构练习题 题目链接:http://uoj.ac/problem/228 Solution 这题由于有区间+操作,所以和花神还是不一样的. 花神那道题,我们可以考虑每个数最多开根几 ...
- 【bzoj1059】 ZJOI2007—矩阵游戏
http://www.lydsy.com/JudgeOnline/problem.php?id=1059 (题目链接) 题意 一个01矩阵,可以任意交换两行或两列,问能否经过若干次交换后使主对角线全为 ...