js 数据加载loading封装
<!-- 模态框(Modal) -->
<div class="modal fade" id="qst_loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 9999">
<div class="modal-dialog">
<div class="modal-content" style="width: 0px; text-align: center">
<div class="modal-body" >
</div>
</div><!-- /.modal-content -->
{{ image("static/background/image/loading.gif", "alt":"loading", "style":"max-width: 200px; margin:200px 100px 100px 200px") }}
</div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
/*
* 1、这个封装外层包裹自执行函数,只要引入此文件,js 就会自动执行
* 2、if('undefined' == typeof QstLoading) 首先判断QstLoading函数名有没有被使用,避免覆盖其他方法
* 3、定义一个匿名函数,使用new构造函数,意思是创建一个新的对象QstLoading ,并分配一个新地址,改变this指向,指向QstLoading ,(this )
* 4、为新对象添加属性show和hide
* 5、QstLoading 没有声明,成为全局对象(不建议此种方法成为全局)
*/
/*
* 1、这个封装外层包裹自执行函数,只要引入此文件,js 就会自动执行
* 2、if('undefined' == typeof QstLoading) 首先判断QstLoading函数名有没有被使用,避免覆盖其他方法
* 3、定义一个匿名函数,使用new构造函数,意思是创建一个新的对象QstLoading ,并分配一个新地址,改变this指向,指向QstLoading ,(this )
* 4、为新对象添加属性show和hide
* 5、QstLoading 没有声明,成为全局对象(不建议此种方法成为全局)
*/
$(function() {
if('undefined' == typeof QstLoading){
QstLoading = new function () {
var _modal = $('#qst_loading');
$(_modal).modal({
keyboard: false,
backdrop: 'static',
show: false
});
this.show = function () {
$(_modal).modal("show");
};
this.hide = function () {
$(_modal).modal('hide');
}
}();
}
});
js 数据加载loading封装的更多相关文章
- js数据加载完成的方法
1.document.onreadystatechange(页面加载完成的方法)配合document.readyState(获取加载状态)使用 document.onreadystatechange= ...
- js spin 加载动画(loading)
js spin 加载动画 最近做页面ajax加载是又用到loading动画,还好有一个spin.js 具体的包大家可以去http://fgnass.github.com/spin.js/下载, 如果想 ...
- React Native封装Toast与加载Loading组件
React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...
- 页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.
一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui. ...
- js动态加载数据并合并单元格
js动态加载数据合并单元格, 代码如下所示,可复制直接运行: <!DOCTYPE HTML> <html lang="en-US"> <head> ...
- 关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案
关于使用Iscroll.js异步加载数据后不能滑动到最底端,拉到最下边又弹回去的问题困扰了我老半天,相信很多朋友都遇到了.我刚好不小心解决了,和大家分享一下.由于各种忙,下边就直接上代码吧. (前提是 ...
- loading数据加载的6种形式
数据加载的几种形式及对应的交互设计 1.全屏加载 多出现在H5页面,例如微信的文章详情页.全屏加载的特点是数据一次性加载完成,内容加载完成之前界面都会停留在loading界面.进度条和有趣的动画设计, ...
- Echarts通过Ajax实现动态数据加载
Echarts(3.x版)官网实例的数据都是静态的,实际使用中往往会要求从服务器端取数据进行动态显示,官网教程里给出的异步数据加载很粗略,下面就以官网最简单的实例为例子,详细演示如下过程:1.客户端通 ...
- [转载]再次谈谈easyui datagrid 的数据加载
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
随机推荐
- StarUML配置Word生成文档模板
来源:fasiondog 许多UML建模工具可以自动生成文档,让需求人员.开发人员专心于需求.设计的建模.当然为了能够生成符合自己要求的模板,需对建模时的目录结构(模型和包)有所规划和要求,否则很难生 ...
- eclipse或者AS链接手机真机之后,logcat里面日志信息乱跳
乱跳的日志信息不会对应用产生影响,但是它会影响视觉,影响查看logcat.那主要原因在哪里呢 ? 这是由于手机里面,正在的运行的进程太多导致的.^_^ 因此课件添加过滤器的作用之大. 对了,在logc ...
- RubyGem默认源安装太慢,修改国内淘宝源
原帖地址:http://www.hiceon.com/topic/Ruby-Gem-install-source-taobao/ WHY? 由于国内网络原因(你懂的),导致 rubygems.org ...
- 【1】mac下面iTerm配置oh-my-zsh教程
1.安装iterm 地址如下: http://iterm2.com/ 2.安装oh-my-zsh 打开iterm输入如下命令: sh -c "$(curl -fsSL https://raw ...
- 网站开发进阶(十三)window.onload用法详解
window.onload用法详解 网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本 ...
- PS图像特效算法——镜像渐隐
这个特效的实现,可以先利用前面提到的渐变特效,做一个图像的渐变, 然后将原图与渐变图对称放置,将背景设置成黑色. clc; clear all; close all; Image=imread('4. ...
- 【48】java抽象类和接口的定义和区别
首先看看他们的区别: 接口和内部类为我们提供了一种将接口与实现分离的更加结构化的方法. 抽象类与接口是Java语言中对抽象概念进行定义的两种机制,正是由于他们的存在才赋予java强大的面向对象的能力. ...
- C语言之linux内核实现最大公约数算法
最大公约数算法,又称欧几里德算法,至今已有几千年的历史了.在我们开始学习C语言的时候最常用的算法就是辗转相除法,其实在linux内核中,内核也是使用这样的方法实现两数最大公约数的计算. 两个整数的最大 ...
- Mybatis 源码之Plugin类解析
public class Plugin implements InvocationHandler { private Object target; //目标对象 private Interceptor ...
- Html5深受欢迎的理由
一.世界知名浏览器厂商对Html5的支持 微软:2010年微软称完成Ie9的开发后,讲更对支持css3.svg和html5等互联网浏览通用标准. Google:2010年谷歌重点开发html5项目. ...