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');
                }
            }();
        }
    });

 

更多专业前端知识，请上 【猿2048】www.mk2048.com