jquery easyui中的EasyLoader功能简绍

EasyLoader动态加载机制

最新推荐文章于 2021-08-04 01:27:40 发布

原创最新推荐文章于 2021-08-04 01:27:40 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #脚本 #CSS #ViewUI

本文介绍EasyLoader如何动态加载脚本、CSS及EasyUI组件，包括两种加载方式、常用属性设置如本地化和主题，以及事件监听方法。通过示例展示了如何加载日历组件和对话框。

EasyLoader是可以动态加载脚本和CSS文件，也可以动态加载EasyUI已有组件
需要引用EasyLoader.js文件，注意：这里就不需要引用jquery.easyui.min.js文件了。
比如需要加载linkbutton组件，则可以用下面的两种方式来加载：
第一种通过设置class来实现:
　　<a href="#" class="easyui-linkbutton" >加载日历</a>
　　只要class设置了easyui-组件名，easyloader就会自动动态加载相应的组件
第二种通过脚本来实现:
　　using('calendar', function () { alert("加载成功！") });
　　或者
　　easyloader.load('calendar', function () { alert("加载成功！") });

　　这里using 等同于 easyloader.load，也就是说using是 easyloader.load方法的简写。

常用属性：
1) Locale：本地化
用法：easyloader.locale = "zh_CN"; // 本地化设置
2) Theme：主题
用法：easyloader.theme = "gray"; // 设置主题

事件：
1) onProgress：每个组件加载完成后触发
2) onLoad：在onProgress事件后触发，当组件以及关联组件全部加载完成后触发
两者的区别可以从名称中看出端倪，onProgress事件可以用来显示进度，而onLoad事件可以用于提示用户可以使用组件了。

常用属性和实践使用代码如下：

easyloader.locale = "zh_CN"; // 本地化设置
        easyloader.theme = "gray"; // 设置主题
        // 每个组件加载完成后触发
        easyloader.onProgress = function (name) {
            $("#loadMsg").append("<br />onProgress --> ");
            $("#loadMsg").append(name);
        };

        // 在onProgress事件后触发，当组件以及关联组件全部加载完成后触发
        easyloader.onLoad = function (name) {
            $("#loadMsg").append("<br />onLoad --> ");
            if (typeof name == "string") {
                $("#loadMsg").append(name);
            } else {
                for (var i = 0; i < name.length; i++) {
                    $("#loadMsg").append(name[i] + ",");
                }
            }
        };

使用EasyLoader方法代码如下：

function load1() {
            // using 等同于 easyloader.load
            using('calendar', function () {
                $('#cc').calendar({
                    width: 180,
                    height: 180
                });
            });
        }
        function load2() {
            // 可以一次性加载多个模块
            using(['dialog', 'messager'], function () {
                $('#dd').dialog({
                    title: '对话框',
                    width: 300,
                    height: 200
                });
                $.messager.show({
                    title: '提示信息',
                    msg: '对话框已创建！'
                });
            });
        }