德克云技术联盟

标题: DFWF之DF.loading使用说明 [打印本页]

---

作者: 孙振强    时间: 2014-7-30 21:25
标题: DFWF之DF.loading使用说明
在基于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动画图也可替换，如：

​

---

欢迎光临 德克云技术联盟 (http://www.decoclouds.com/)