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

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

  1. <script>
  2. //显示加载器
  3. function showLoader() {
  4. //显示加载器.for jQuery Mobile 1.2.0
  5. $.mobile.loading('show', {
  6. text: '加载中...', //加载器中显示的文字
  7. textVisible: true, //是否显示文字
  8. theme: 'a', //加载器主题样式a-e
  9. textonly: false, //是否只显示文字
  10. html: "" //要显示的html内容,如图片等
  11. });
  12. }
  13.  
  14. //隐藏加载器.for jQuery Mobile 1.2.0
  15. function hideLoader()
  16. {
  17. //隐藏加载器
  18. $.mobile.loading('hide');
  19. }
  20. </script>

然后在ajax中调用:

  1. //获取进度
  2. function InsertStatus(matterID, obj) {
  3. var a = $(obj).parent().parent().parent();
  4. $.ajax({
  5. type: "POST",
  6. contentType: "application/json",
  7. url: "/ToDoList/InsertStatus/?matterID=" + matterID,
  8. beforeSend: function () {
  9. showLoader();
  10. },
  11. complete:function(){
  12. hideLoader();
  13. },
  14. success: function (msg) {
  15. if (msg > 0) {
  16. $("#popdiv").text("获取进度成功");
  17. } else {
  18. $("#popdiv").text("获取进度失败");
  19. }
  20. //弹出提示信息
  21. $("#GettingProgress").attr('data-rel', 'dialog');
  22. $("#GettingProgress").trigger('create');
  23. $("#popdiv").popup("open");
  24. setTimeout(function () { $("#popdiv").popup("close"); }, 2000);
  25. }
  26. });
  27.  
  28. }

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

参考: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. JVM性能调优监控工具专题一:JVM自带性能调优工具(jps,jstack,jmap,jhat,jstat,hprof)

    性能分析工具jstatjmapjhatjstack 前提概要:         JDK本身提供了很多方便的JVM性能调优监控工具,除了集成式的VisualVM和jConsole外,还有jps.jsta ...

  2. WCF系列 基础概念

    WCF全称Windows Communication Foundation,是微软构建面向服务的分布式编程框架.而它其实是统一了COM和.Net Remoting等分布式技术提供一个完整,通用,可靠的 ...

  3. 第二百四十三节,Bootstrap模态框插件

    Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框 ...

  4. Firefox模拟手机访问手机网站

    说明: 此方法只能用以那些以识别UA来判断的网站 使用步骤: 第一步:打开Firefox,点击菜单,工具-〉附加组件-〉获取附加组件: 第二步:查询安装三个组件:User Agent Switcher ...

  5. css中div高度自适应

    高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...

  6. C# 多线程学习(五)线程同步和冲突解决

    from:https://blog.csdn.net/codedoctor/article/details/74358257 首先先说一个线程不同步的例子吧,以下为售票员的模拟售票,多个售票员出售10 ...

  7. 修改MyEclipse内存

    Window --->   preferrences-->installed JREs :点击JDK修改argument为:-Xms512m -Xmx1024m -XX:PermSize= ...

  8. hdu3625(第一类斯特林数)

    与第二类有些区别! #include <stdio.h> #include <stdlib.h> #include <string.h> #include < ...

  9. 滚动插件 animatescroll(可以设置要滚动到位置)

     1. 引入   <script src="js/animatescroll.js"></script> 2.设置要滚动到的位置  $('目标位置').an ...

  10. 机械迷城MAC下载及攻略

    点击下载 无意间在verycd上看到这个游戏,很好玩的一个游戏. 画风非常可爱,有点复古风. 这里是 机械迷城 的专题频道 http://pc.pcgames.com.cn/pczq/jxmc/