本文转载自：http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html

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

  1. 你觉得一次性导入 easyui 的核心 min js 和 css 太大（用easyload可以减少之前那些文件的引入）
  2. 你只用到 easyui 的其中几个组件
  3. 你想使用其中的一个组件，但是你又不知道这个组件依赖了那些组件。
　　如果你有以上三中情况，那么推荐你使用easyLoader。它可以帮你解决这些问题。

　　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分析与使用(转载)的更多相关文章

  1. EasyUI学习总结(二)——easyloader分析与使用(转载)

    本文转载自:http://www.cnblogs.com/haogj/archive/2013/04/22/3036685.html 使用脚本库总要加载一大堆的样式表和脚本文件,在easyui 中,除 ...

  2. easyUI学习笔记二

    1．  拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...

  3. 3.EasyUI学习总结(三)——easyloader源码分析

    easyloader模块是用来加载jquery easyui的js和css文件的,即easyloader可以在调用的时候自动加载当前页面所需的文件,不用再自己引用, 而且它可以分析模块的依赖关系,先加 ...

  4. EasyUI学习总结(三)——easyloader源码分析(转载)

    声明:这一篇文章是转载过来的,转载地址忘记了,原作者如果看到了,希望能够告知一声,我好加上去! easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依 ...

  5. JMeter学习（二十一）关联（转载）

    转载自 http://www.cnblogs.com/yangxia-test 话说LoadRunner有的一些功能,比如:参数化.检查点.集合点.关联,Jmeter也都有这些功能,只是功能可能稍弱一 ...

  6. JMeter学习（二）录制脚本（转载）

    转载自 http://www.cnblogs.com/yangxia-test 环境 Badboy  version 2.1.1 JDK: 1.7.0_67 Apache  JMeter-2.11 - ...

  7. 《Spring Cloud》学习（二） 负载均衡！

    第二章 负载均衡 负载均衡是对系统的高可用.网络压力的缓解和处理能力扩容的重要手段之一.Spring Cloud Ribbon是一个基于 HTTP 和 TCP 的客户端负载均衡工具,它基于Netfli ...

  8. Python爬虫学习：二、爬虫的初步尝试

    我使用的编辑器是IDLE,版本为Python2.7.11,Windows平台. 本文是博主原创随笔,转载时请注明出处Maple2cat|Python爬虫学习:二.爬虫的初步尝试 1.尝试抓取指定网页 ...

  9. XML学习总结(二)——XML入门

    XML学习总结(二)——XML入门 一.XML语法学习 学习XML语法的目的就是编写XML 一个XML文件分为如下几部分内容: 文档声明 元素 属性 注释 CDATA区 .特殊字符 处理指令(proc ...

随机推荐

  1. 十分钟轻松让你认识Entity Framework 7

    EF7不是在EF6上更新,而是完全重写了.它完全支持.NET Core runtime,也就是说以后你可以在Mac或者是Linux机器上使用EF了. https://github.com/nichol ...

  2. Js 遍历json对象所有key及根据动态key获取值

    var obj = {}; for(var k in obj) { //遍历对象,k即为key,obj[k]为当前k对应的值 console.log(obj[k]); } 文章来自:https://z ...

  3. 利用日期、经纬度求日出日落时间 C语言程序代码（zz）

    先贴在这了,后面应该用得着 http://zhidao.baidu.com/link?url=iw-hcd_tLpRtf4r2Kh-NmDPaQ10UdlunBQUWaz14J-eNEq5fw-y83 ...

  4. 在哪可以Sigmaplot 13下载免费版的

    SigmaPlot是一款科学的数据分析和绘图软件,可以进行精密绘图.数据分析.自动化管理数据和创建网络图表,具备制作和发行品质图表的水平,该软件被广泛地运用在多个领域.现今SigmaPlot软件日益受 ...

  5. Ubuntu默认防火墙安装、启用、配置、端口、查看状态相关信息

    Ubuntu附带了一个相对iptables简单很多的防火墙 配置工具:ufw ufw防火墙 即uncomplicated firewall,不复杂的防火墙,繁琐部分的设置还是需要去到iptables ...

  6. c# cache 缓存

    System.Web.Caching简介 /// <summary> /// 创建随机字符串 /// </summary> /// <returns></re ...

  7. signalr遇到的问题汇总

    1.signalr不会触发 hub类的连接事件和断开连接事件 解决:当时因为我引用的是最新的类库 .当时想到的是类库版本问题.就将他换成官方demo一模一样 发现还是不行..然后用官方demo的客户端 ...

  8. Asynchronous fs.stat.isDirectory()

    function showFile() { for(var i = 0; i< files.length; i++){ var itemFile = files[i]; fs.stat(__di ...

  9. 树莓派系统介绍：DIetPi

    项目主页:http://fuzon.co.uk/phpbb/viewtopic.php?f=8&t=6 当前版本:V34(15年4月16日发布) DietPi是国外一个基于Raspbian的精 ...

  10. nginx 和 IIS 实现负载均衡

    Nginx的作用和优点,这里不必多说,今天主要是nginx负载均衡实验,把做的步骤记录下来,作为一个学习笔记吧,也可以给大家做下参考. 1.Nginx安装 1.下载地址:http://nginx.or ...