在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);
}
}); }

这样就可以在数据处理过程中,有加载中的效果。

参考:http://www.cnblogs.com/hiflora/p/3816212.html

http://blog.csdn.net/zht666/article/details/8563025

jQuery Mobile 手动显示ajax加载器的更多相关文章

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

    在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...

  2. jQuery Mobile中的页面加载与跳转机制

    第一次做用jQuery Mobile做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...

  3. jquery mobile转场时加载js失效(转)

    jquery mobile拦截了所有的http请求,并使用ajax请求取代传统的http.请求发出后,框架会将请求的内容插入到页面中data- role="page"的部分,取代原 ...

  4. jquery mobile转场时加载js失效

    jquery mobile拦截了所有的http请求,并使用ajax请求取代传统的http.请求发出后,框架会将请求的内容插入到页面中data- role="page"的部分,取代原 ...

  5. ajax加载引起瀑布流布局堆叠

    jQuery 瀑布流使用ajax加载数据库图片url ,ajax每次请求到的数据不变时,瀑布流效果没问题. 但当请求到的数据变化时,瀑布流图片格式会重叠 或者相隔很远等等的格式问题,这是由于图片加载是 ...

  6. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  7. js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

    js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...

  8. jq mobile非ajax加载,ready执行两次

    jqm只有通过ajax加载的页面才只执行一次ready(正常情况) 页面刷新(同非ajax加载的页面)都会执行两次ready,包括pageinit和pageshow事件也是如此. 两种避免的方法是: ...

  9. 360chrome,google chrome浏览器使用jquery.ajax加载本地html文件

    使用360chrome和google chrome浏览器加载本地html文件时,会报错,提示: XMLHttpRequest cannot load file:///Y:/jswg/code/html ...

随机推荐

  1. VC编译的时候因为加载符号导致编译过程异常缓慢的处理

    之前调试console程序用了一下Ctrl+C,弹出的异常处理选择框自己点了什么忘记了,结果之后再调试,发现特别慢,最下面一直在走着一系列dll的加载符号.让我特别二呼的是断网的话就没事了,联网就一直 ...

  2. 【黑马Android】(04)数据库的创建和sql语句增删改查/LinearLayout展示列表数据/ListView的使用和BaseAdater/内容提供者创建

    数据库的创建和sql语句增删改查 1. 载入驱动. 2. 连接数据库. 3. 操作数据库. 创建表: create table person( _id integer primary key, nam ...

  3. nginx-1.14.0安装

    1.百度搜索Nginx,点击Nginx news官网,点击nginx-1.13.10进入下载网页,选择Stable version的版本之后下载. 2.进入根目录,cd / 3.在根目录下创建soft ...

  4. Visual Studio 2017 RC使用初体验

    .NET Core新式,高效,特别适合用于大规模的Web应用:而传统的.NET Framework则非常适合用于开发Windows桌面应用程序. 一 安装 请下载Visual Studio 2017 ...

  5. pom打包参数选择

    pom.xml配置 <profiles> <profile> <id>dev</id> <properties> <token> ...

  6. Des加密方法

    //默认密钥向量 private static byte[] Keys = { 0x12, 0x34, 0x56, 0x78, 0x90, 0xAB, 0xCD, 0xEF }; private st ...

  7. Extjs5 app.js缓冲设置

    在6月2日Extjs5正式版公布后.粗略研究了一下,sencha推荐使用project编译来公布应用.开发过程中用sencha app watch命令就可以生成服务.每建立一个js类,就须要Ctrl+ ...

  8. SurvivalShooter学习笔记(一.相机跟随)

    1.场景碰撞已好,地板需建一Quad去掉渲染留下碰撞,设置layer为Floor:用于建立摄像机朝向地面的射线,确定鼠标停留点,确定主角需要的朝向. 2.设置摄像机跟随主角: 本例中摄像机设置为正交模 ...

  9. IOS-应用之间调用

    本文转载至 http://blog.csdn.net/likendsl/article/details/7553605 原文作者的博客值得关注. ios应用之间的调用步骤: 一.调用自己开发的应用 1 ...

  10. linux下安装oracle sqlplus以及imp、exp工具

    一.下载oracle 11g sqlplus软件 linux 64位操作系统,oracle安装包地址 http://www.oracle.com/technetwork/topics/linuxx86 ...