jquery mobile中显示加载中提示框和关闭提示框

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

先看两个方法,显示和关闭,方法来自于参考:http://blog.csdn.net/zht666/article/details/8563025

<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>  

然后在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中显示加载中提示框和关闭提示框,布布扣,bubuko.com

时间: 2024-10-05 16:26:12

jquery mobile中显示加载中提示框和关闭提示框的相关文章

微信小程序 在使用wx.request时显示加载中

微信小程序中,向后台请求数据是,通常想给用户提示正在加载中,如下图: 我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.request加工下就可以了,在utils下新建js文件network.js var requestHandler = { url: '', data: {}, method: '', success: function (res) { }, fail: function () { }, complet

WPF防止界面卡死并显示加载中效果

原文:WPF防止界面卡死并显示加载中效果 网上貌似没有完整的WPF正在加载的例子,所以自己写了一个,希望能帮到有需要的同学 前台: <Window x:Class="WpfApplication1.Loading" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml

【Jquery mobile】动态加载ListView 转

[Jquery mobile]动态加载ListView 分类: Jquery Mobile2011-12-01 09:04 13984人阅读 评论(1) 收藏 举报 jquerylistviewmobilestylesheetjavascriptlist 动态增加列表项是一个基本的功能,今天测试了一下.先贴下效果图: 点击“更多...”,就会增加列表项. 代码如下: [html] view plaincopy <!DOCTYPE html> <html> <head>

jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head > 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>验证加载顺序</title> 5 <s

《H5 App开发》MUI框架显示加载中动画

最近使用MUI框架比较多,现在有个需求就是在每个页面加上一个加载中动画 如图: 在百度上找到两个MUI框架的加载中样式, 第一种是需要引用一个js库,在这里不多做解释,小编推荐第二种方式, 只需要一串代码就可以实现 <div class="mui-loading" v-if="loading"> <div class="mui-spinner"></div> </div> 可以利用vue中v-if来

使用svg显示加载中提示界面

<div> <ul v-if="true"> <li></li> <li></li> <li></li> </ul> <ul v-else="false"> <li> <img src="../images/icon.svg"> </li> </ul> 原文地址:https://w

jQuery Mobile 手动显示ajax加载器,提示加载中...

在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大致流程如下: 1. 启动加载器,显示“加载中...”: 2. 进行ajax请求,请求完成后更新页面数据,刷新jQuery Mobile控件样式: 3. 关闭加载器. 下面就来讲解jQuery Mobile 1.2.0 和 1.1.0 中手动显示加载器的方法(很简单,几行代码就OK了!). 首先是jQ

jquery 显示“加载状态 结束”

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head runat="server"> 4

【安卓基础】简单快捷的加载中对话框

遇到的需求 项目中有些界面需要显示加载中,例如登陆界面.注册界面等等.一开始考虑找个第三方库,但是第三方库往往为了达到普遍的适用性,封装得非常复杂.有时候一个库就差不多1mb大小,这样接入成本太大了,况且一个项目还需要其他第三方库接入,如果每一个功能都用第三方库解决,势必导致开发出来的应用体积臃肿,而且难以管理结构. 而我只是需要简单展示一个加载中提示,所以自己实现一个会更加合理,而且更加小巧灵活. 方案的选择 在安卓开发中,系统提供了对话框类用于开发.所以我直接选择使用Support V7的A