天天看点
返回

【连载】研究EasyUI系统—Easyloader组件

    easyloader组件在easyui框架中的主要作用就是加载各种各样的模块，可以是easyui预设的模块，也可以是其他外部（包括网络上的）模块。

    easyloader属性：

属性名称 属性值类型 属性默认值 描述
modules 对象 预定义的模块
locales 对象 预定义的国际化资源。
base 字符串 自行设定

easyui根目录，需以“/”结尾。

根目录会根据“easyloader.js”所在位置自动设定。
theme 字符串 default

主题名称，默认为default。

主题名称的设定依据“themes”下的各子目录，每个子目录都是一种主题风格，所以本属性的值需要和子目录名一致。
css 布尔值 true 指明在加载指定模块时，是否加载对应的css文件。
locale 字符串 null 国际化资源名称。
timeout 数值 2000 加载的最大超时时限。

    modules是easyui框架预定义模块或组件，例如“textbox”、“linkbutton”等等，根据版本的不同，modules所包含的组件也有不同，一般而言版本越新组件越多。

    locales是easyui框架预定义的国际化资源，包括中、英、德、法等等多国语言。

    modules和locales一般使用框架预定义的内容，不做修改。

    base属性指定了easyui的根目录，根目录会根据当前easyloader.js的存放位置来自动设定。

    theme属性指定要加载的easyui框架主题，目前easyui框架有default、bootstrap、black、gray、metro等主题。

    locale指定要加载的国际化资源，属性值根据国际标准确定。如果你想使用法文，那么locale的值就是字符串“fr”，如果是简体中文则为“zh_CN”。

    timeout是easyui加载组件的超时时间，默认为2000毫秒，超过后就不再加载。

下面是easyloader的方法。

方法名称 参数 描述
load module, callback 加载指定模块。module参数为组件，callback为回调函数。

    easyloader组件只有一个load方法，用于加载模块。module既可以是模块名称，也可以是模块数组，还可以是js或css文件。callback是回调函数，load方法调用成功后即调用该函数。回调函数并不是必须的，可以不写。

easyloader事件。

事件名称 参数 描述
onProgress name 目标模块加载成功后触发。参数为模块名。
onLoad name 目标模块以及其依赖模块（组件）加载成功后触发。参数为模块名。

    onProgress和onLoad事件很简单也很好理解，都是加载成功后触发该事件。不同的是前者只要目标模块加载成功后即触发；后者除目标模块本身外，其依赖的模块（组件）也一并加载成功后才触发。

easyloader的详细用法。

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/easyloader.js"></script>
    /* 必须要引入easyloader.js */
    <script>
      easyloader.locale = "de";
      easyloader.theme = "black";
      easyloader.timeout = ;
      easyloader.load("textbox",function(){
        $('#txt').textbox({
            required:true,
            height:
        });
      });
    </script>
  </head>
  <body>
    <input id="txt" type="text" style="width:300px">
  </body>
</html>

    easyloader在easyloader.js文件中定义，因此必须引入该文件。我们将locale设定为德语，主题设定为”black”样式，超时时间设定为5秒。随后加载textbox组件。

【连载】研究EasyUI系统—Easyloader组件

    可以看到，提示信息已经是德语。

easyloader的其他脚本加载用法。

<script>
    /* easyloader以数组形式加载linkbutton、textbox、combobox组件 */
    easyloader.load({"linkbutton", "textbox", "combobox"},function(){......});

    /* easyloader加载js（css）文件 */
    easyloader.load("../js/test.js",function(){......});
    easyloader.load("../css/test.css");

    /* 加载外部js文件 */
    using ("http://example.com/js/exp.js",function(){......})
    using ("../js/test.js",function(){......})
</script>
easyui 框架 easyloader
上一篇: 【连载】研究EasyUI系统—ValidateBox组件
下一篇: easyUI 获取控件属性

继续阅读