<!-- 模态框(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封装的更多相关文章

  1. js数据加载完成的方法

    1.document.onreadystatechange(页面加载完成的方法)配合document.readyState(获取加载状态)使用 document.onreadystatechange= ...

  2. js spin 加载动画(loading)

    js spin 加载动画 最近做页面ajax加载是又用到loading动画,还好有一个spin.js 具体的包大家可以去http://fgnass.github.com/spin.js/下载, 如果想 ...

  3. React Native封装Toast与加载Loading组件

    React Native开发封装Toast与加载Loading组件 在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...

  4. 页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.

    一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui. ...

  5. js动态加载数据并合并单元格

    js动态加载数据合并单元格, 代码如下所示,可复制直接运行: <!DOCTYPE HTML> <html lang="en-US"> <head> ...

  6. 关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案

    关于使用Iscroll.js异步加载数据后不能滑动到最底端,拉到最下边又弹回去的问题困扰了我老半天,相信很多朋友都遇到了.我刚好不小心解决了,和大家分享一下.由于各种忙,下边就直接上代码吧. (前提是 ...

  7. loading数据加载的6种形式

    数据加载的几种形式及对应的交互设计 1.全屏加载 多出现在H5页面,例如微信的文章详情页.全屏加载的特点是数据一次性加载完成,内容加载完成之前界面都会停留在loading界面.进度条和有趣的动画设计, ...

  8. Echarts通过Ajax实现动态数据加载

    Echarts(3.x版)官网实例的数据都是静态的,实际使用中往往会要求从服务器端取数据进行动态显示,官网教程里给出的异步数据加载很粗略,下面就以官网最简单的实例为例子,详细演示如下过程:1.客户端通 ...

  9. [转载]再次谈谈easyui datagrid 的数据加载

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

随机推荐

  1. Android SDK工具(谷歌提供的16个工具)简介

    Android SDK包含了许多可以帮助你开发Android平台应用的工具.这些工具分为两类:一是SDK工具:而是平台工具.SDK工具独立于平台,任何开发Android应用的平台都需要配置.平台工具是 ...

  2. 【面试笔试算法】Program 2:Amusing Digits(网易游戏笔试题)

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 网易成立于1997年6月,是中国领先的互联网技术公司.其相继推出了门户网站.在线游戏.电子邮箱.在线教育.电子商务等多种服 ...

  3. Git与远程reposiory的相关命令

    问题1:Git如何同步远程repository的分支(branch) 某天,小C同学问我,为啥VV.git仓库里面本来已经删除了branchA这个分支,但是我的mirror中还是有这个分支呢? 分析: ...

  4. 【Android 应用开发】OpenGL ES 2.0 -- 制作 3D 彩色旋转三角形 - 顶点着色器 片元着色器 使用详解

    最近开始关注OpenGL ES 2.0 这是真正意义上的理解的第一个3D程序 , 从零开始学习 . 案例下载地址 : http://download.csdn.net/detail/han120201 ...

  5. Android Notification 版本适配方案

    Notification 介绍见:https://developer.android.com/reference/android/app/Notification.html Android api 一 ...

  6. 真机测试遇到0xE8008016错误修改方法

    错误描述 真机测试过程中,更换Provisioning Profile之后,出现错误:The entitlements specified in your application's Code Sig ...

  7. linux设备驱动模块引用和依赖

    /modules/04 # lsmod test 787 0 - Live 0xbf010000 (PO) func 633 1 test, Live 0xbf00c000 (PO) test -&g ...

  8. LeetCode(44)- Isomorphic Strings

    题目: Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the c ...

  9. 恶补web之八:jQuery(1)

    jquery是一个js库,极大的简化了js编程.jquery是一个写的更少,但做的更多的轻量级js库. jquery位于一个js文件中,其中包含了所有jquery函数,可以用如下标记把jquery添加 ...

  10. TCP浅谈为什么3次握手

    <计算机网络>中的例子是这样的,"已失效的连接请求报文段"的产生在这样一种情况:客户发出的第一个连接请求报文段并没有丢失,而是在某个网络结点长时间的滞留了,以致延误到连 ...