在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. Practial Vim 学习笔记一

    . 号作用是重复上一个动作. >+G  缩进 j 光标下移 u 撤销操作 $ 光标移到行尾 x 删除光标下的字符 dd 删除整行 i 切换到Insert模式 Esc 返回 f 将光标移到下个字符 ...

  2. Java字符串中文检测转换

    public class ChineseUtils { public static void main(String[] args) { String str = "中国 (1).jpg&q ...

  3. 远程访问Mysql的解决方案

    在网上有很多关于这个的解决方案,我也采用了 写的比较详细的如:1. 改表法. 可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电脑,登入mysql后,更 ...

  4. OSX 10.8+下开启Web共享的方法 /转

    OSX 10.8+ Mountain Lion 下开启 Web Sharing(Web 共享)的方法 JUL 28, 2012  #OS X  #how-to  #apache  #web  #sha ...

  5. easyui menu 添加hideItem/showItem 方法

    $.extend($.fn.menu.methods,{ showItem:function(jq,text){ return jq.each(function(){ var item = $(thi ...

  6. 运行jsp需要安装_______Web服务器。

    运行jsp需要安装_______Web服务器. A.Apache B.tomcat C.WebLogic D.IIS 解答:BC Apache是PHP程序运行的服务器,IIS是.net程序运行的服务器 ...

  7. 关于JSON日期格式显示及My97日期控件

    1.My97日期控件.显示不同的日期格式,可以调整"dateFmt“的参数来配置: 详细DEMO:http://www.my97.net/demo/index.htm <p>日期 ...

  8. ==和Equal()的区别

    我们在编程的时候,经常会遇到判断两个对象是否相等的情况.说到判断两个对象是否相等,就不得不说对象的类型和对象在内存中的存储情况. 对象类型可以分为值类型和引用类型: 值类型包括:简单类型.结构类型.枚 ...

  9. [CB2]start up

    1.更新源 From:http://cubie.cc/forum.php?mod=viewthread&tid=3054&extra= sudo emacs 打开/etc/apt/so ...

  10. VisualSVN 5.1.5 破解版 手动破解教程 生成dll文件

    VisualSVN 5.1.5 破解版 手动破解教程 生成VisualSVN.Core.L.dll文件 附上本人用到的命令: ildasm "D:\Program Files (x86)\V ...