jQuery Mobile 手动显示ajax加载器

2021年09月15日 阅读数:1
这篇文章主要向大家介绍jQuery Mobile 手动显示ajax加载器,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

在jquery mobile开发中,常常须要调用ajax方法,异步获取数据,若是异步获取数据方法因为网速等等的缘由,会有一个反应时间,若是能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更好一些。javascript

先看两个方法,显示和关闭,方法来自于参考:javascript:void(0)html

jQuery Mobile 手动显示ajax加载器_加载器
<script>  
//显示加载器  
function showLoader() {  
    //显示加载器.for jQuery Mobile 1.2.0  
    $.mobile.loading('show', {  
        text: '加载中...', //加载器中显示的文字  
        textVisible: true, //是否显示文字  
        theme: 'a',        //加载器主题样式a-e  
        textonly: false,   //是否只显示文字  
        html: ""           //要显示的html内容,如图片等  
    });  
}  
  
//隐藏加载器.for jQuery Mobile 1.2.0  
function hideLoader()  
{  
    //隐藏加载器  
    $.mobile.loading('hide');  
}  
</script>  
jQuery Mobile 手动显示ajax加载器_加载器

而后在ajax中调用:java

jQuery Mobile 手动显示ajax加载器_加载器
//获取进度
function InsertStatus(matterID, obj) {
    var a = $(obj).parent().parent().parent();
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "/ToDoList/InsertStatus/?matterID=" + matterID,
        beforeSend: function () {         
            showLoader();
        },
        complete:function(){       
            hideLoader();
        },
        success: function (msg) {
            if (msg > 0) {
                $("#popdiv").text("获取进度成功");
            } else {
                $("#popdiv").text("获取进度失败");
            }
            //弹出提示信息
            $("#GettingProgress").attr('data-rel', 'dialog');
            $("#GettingProgress").trigger('create');
            $("#popdiv").popup("open");
            setTimeout(function () { $("#popdiv").popup("close"); }, 2000);
        }
    });

}
jQuery Mobile 手动显示ajax加载器_加载器

这样就能够在数据处理过程当中,有加载中的效果。jquery