德克云技术联盟

会员中心
发新帖
打印 上一主题 下一主题

DFWF之DF.loading使用说明
发布人: 孙振强 发布时间:2014-07-30 浏览:6488

在基于DFWF3.0的项目下,可以使用DF.loading组件实现Loading效果,具体操作如下:

1. DF.loading的介绍:
1.1. 说明: 一个简单的Loading功能插件,可扩展、自定义。
1.2. 兼容性:兼容ie6+、firefox、chrom、safari、opera等                                                     
1.3. 版本:1.2
1.4. 加载方法:
    DF.css.loadLib('/DF.loading/DF.loading-1.2/DF.loading-1.2.css');
    DF.js.loadLib('/DF.loading/DF.loading-1.2/DF.loading-1.2.js');


1.5. 调用方法:
1.5.1. 显示Loading
DF.loading.show(string);​

参数string为要提示的文字,默认为loading...
1.5.2. 隐藏Loading
DF.loading.hide();                                                  

1.6. 默认gif动画图:      




2. 整个项目加载DF.loading

APP.loadLib = function() {   
    DF.css.loadLib('/DF.loading/DF.loading-1.2/DF.loading-1.2.css');
    DF.js.loadLib('/DF.loading/DF.loading-1.2/DF.loading-1.2.js');
};

3. 个别页面加载DF.loading

APP.page.init = function() {
    DF.css.loadLib('/DF.loading/DF.loading-1.2/DF.loading-1.2.css');
    DF.js.loadLib('/DF.loading/DF.loading-1.2/DF.loading-1.2.js');
};
              

4. 加载后的调用            
4.1. 隐藏Loading,因为DF.loading中默认显示loading效果,等页面加载完毕后需要关闭一下。 如:

APP.page.onload = function() {   
    DF.loading.hide();
};

4.2. 在ajax交互中使用DF.loading      

   //执行ajax前显示loading
    DF.loading.show();
   
    DF.ajax({
        data: DFMsg,
        success: function(data) {
            //返回后关闭loading
            DF.loading.hide();           
        }
    });

4.3. 如果要给项目中所有ajax加上使用DF.loading,需要编写DF.loading的扩展,这个在惠众1.2中使用过。

5. 如果觉得默认效果或动画图片不好,可自行定义样式,甚至可以不加载DF.loading-1.2.css,loading效果的gif动画图也可替换,如:






分类浏览
关于我们
联系我们
技术联盟
云服务
云技术
云合作
帮助中心
发帖规则
QQ客服
内部通道
企业邮箱
企业论坛
版本选择
手机版
电脑版
用手机扫描下方二维码查看手机版页面

版权所有 西安云联电子科技有限公司
Copyright @ 2011-2022 | decoclouds.com All Rig
陕ICP备13002202号-1

快速回复 返回顶部 返回列表