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


    本文转载自: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模块来解析页面。

    classeasyui开头的标签都转化成 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',
              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=" 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";
  • 相关阅读:
    Python程序员用文字加密的方式,给女程序员写情书,一周后牵手回家
    小学生在网吧用python抓取LOL英雄皮肤,步骤简单
    vuex中module的命名空间概念
    动态设置html的font-size值
    JavaScript判断各种数据类型
    vuex脑图
    作用域链和函数内部this指向问题以及bind、call、apply方法
    BOM
    jQuery_base
    js_base_note
  • 原文地址:https://www.cnblogs.com/chenxiaomeng/p/5804117.html
Copyright © 2020-2023  润新知