在使用jQuery Mobile开发时，有时候我们需要在请求ajax期间，显示加载提示框（例如：一个旋转图片+一个提示：加载中...）。这个时候，我们可以手动显示jQuery Mobile的加载器，大致流程如下：

1. 启动加载器，显示“加载中...”；

2. 进行ajax请求，请求完成后更新页面数据，刷新jQuery Mobile控件样式；

3. 关闭加载器。

下面就来讲解jQuery Mobile 1.2.0 和 1.1.0 中手动显示加载器的方法（很简单，几行代码就OK了！）。

首先是jQuery Mobile 1.2.0 引用：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Ajax测试</title>
  5. <meta charset="gbk">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- 从官方下载的文件放在项目的 jquery-mobile 目录中 -->
  8. <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/>
  9. <link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/>
  10. <script src="jquery-mobile/jquery-1.8.2.min.js"></script>
  11. <script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script>
  12. <head>

编写javascript函数：

  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. //隐藏加载器.for jQuery Mobile 1.2.0
  14. function hideLoader()
  15. {
  16. //隐藏加载器
  17. $.mobile.loading('hide');
  18. }
  19. </script>

准备两个按钮，一个用于启动（显示）加载器，一个用于停止（隐藏）加载器：

  1. <body>
  2. <div data-role="page">
  3. <!-- 头部 -->
  4. <div data-role="header">
  5. <h3>Ajax测试</h3>
  6. </div>
  7. <!-- 内容 -->
  8. <div data-role="content">
  9. <h3>Ajax测试</h3>
  10. <input type="button" value="显示ajax加载器" onclick="showLoader()"/>
  11. <input type="button" value="隐藏ajax加载器" onclick="hideLoader()"/>
  12. </div>
  13. </body>

效果如下（主题为：'a'）：

当然，你可以调整$.mobile.loading('show', { ... }中的参数，实验各种不同的加载器效果。

加载器的具体说明见jQuery Mobile 1.2.0 官方demo演示说明：

http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html

注意：jQuery Mobile1.1.0中显示ajax加载器与1.2.0版本完全不同！坑爹！

jQuery Mobile 1.1.0显示加载器的代码如下：

  1. <script>
  2. //显示加载器
  3. function showLoader() {
  4. //显示加载器.for jQuery Mobile 1.1.0
  5. $.mobile.loadingMessage = '加载中...';     //显示的文字
  6. $.mobile.loadingMessageTextVisible = true; //是否显示文字
  7. $.mobile.loadingMessageTheme = 'a';        //加载器主题样式a-e
  8. $.mobile.showPageLoadingMsg();             //显示加载器
  9. }
  10. //隐藏加载器.for jQuery Mobile 1.1.0
  11. function hideLoader() {
  12. //隐藏加载器
  13. $.mobile.hidePageLoadingMsg();
  14. }
  15. </script>

显示的效果倒是差不多。

官方1.2.0文档中对1.1.0的说明如下：

The page loading dialog was previously configured globally with three settings
$.mobile.loadingMessage,
$.mobile.loadingMessageTextVisible, and 
$.mobile.loadingMessageTheme 
which are now deprecated. In addition to the methods for showing and hiding,
$.mobile.showPageLoadingMsg and
$.mobile.hidePageLoadingMsg are also deprecated.

意思就是说：在1.2.0版本不在使用$.mobile.showPageLoadingMsg和$.mobile.hidePageLoadingMsg这两个方法显示加载器了。

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

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

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

  2. jquery mobile 和phonegap开发总结之三跨域加载页面

    跨域加载 一要进行一定的配置见下面 $( document ).bind( "mobileinit", function() { // Make your jQuery Mobil ...

  3. 如何让 jQuery Mobile 不显示讨厌的 loading 界面

    jQuery Mobile 的一个BUG: 当不采用 ajax 以及 他自己的 back 返回的时候,即: 点击浏览器后退按钮时,将会从缓存之中加载页面,此时,讨厌的 loading 动画出来了,而且 ...

  4. 使用js加载器动态加载外部Javascript文件

    原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...

  5. JavaScript学习总结(十九)——使用js加载器动态加载外部Javascript文件

    今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js 1 var MiniSite=new Object(); 2 /** 3 * 判断浏览器 4 */ 5 M ...

  6. 使用js加载器动态加载外部js、css文件

    let MiniSite = new Object(); /** * 判断浏览器 */ MiniSite.Browser = { ie: /msie/.test(window.navigator.us ...

  7. jquery mobile 的loading提示“正在加载...”在不同版本中的不同实现方式

    在jquery mobile开发中,在页面的切换.或者ajax获取数据时由于网速慢等其他原因,会有一个加载的时间,如果能在这段时间给一个“正在加载...”的提示,用户体验会更好.下面来简单的介绍一下在 ...

  8. jQuery Mobile 脚本加载问题

    刚开始使用jQuery Mobile,发现很多问题需要重新考虑,比如脚本加载问题. 在普通html中,如果a.html中有链接到b.html,b.html中有类似代码: $(document).rea ...

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

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

随机推荐

  1. android操作SQLite

    一.SQLite SQLite是一种转为嵌入式设备设计的轻型数据库,其只有五种数据类型,分别是: NULL: 空值 INTEGER: 整数 REAL: 浮点数 TEXT: 字符串 BLOB: 大数据 ...

  2. 使用java开源工具httpClient及jsoup抓取解析网页数据

    今天做项目的时候遇到这样一个需求,需要在网页上展示今日黄历信息,数据格式如下 公历时间:2016年04月11日 星期一 农历时间:猴年三月初五 天干地支:丙申年 壬辰月 癸亥日 宜:求子 祈福 开光 ...

  3. 深入解读saltstack的安装及配置1

    安装 一.安装方法:http://www.linuxeye.com/Linux/2765.html 二.建议安装epel后安装saltstack:http://www.a8z8.com/html/20 ...

  4. 转来的 cuda makefile 写法学习

    原文作者:FreeAquar 原文出处:http://www.cnblogs.com/FreeAquar/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...

  5. ASP.NET MVC3细嚼慢咽---(1)网站创建与发布

      这一节我们演示下怎样使用VS2010创建与发布MVC3建立的网站.使用VS2010创建MVC3.0网站,需要下载MVC3.0的安装包,这个大家可以去网络上下载.     1.项目创建       ...

  6. Typecho集成ueditor笔记

    前言:萝卜青菜各有所爱,因为个人需求所以需要在博客中集成ueditor,并非是我不喜欢md语法 其实本篇的笔记的书写最早也是在本地的md编辑器上完成的 1. 首先下载ueditor编辑器,然后重命名文 ...

  7. Java多线程之 ThreadLocal

    一.什么是ThreadLocal? 顾名思义它是local variable(线程局部变量).它的功用非常简单,就是为每一个使用该变量的线程都提供一个变量值的副本,是每一个线程都可以独立地改变自己的副 ...

  8. NServiceBus-网关和多站点分布

    多站点部署的企业的数量.净系统由于增加的挑战高可用性和用户要求更快的响应时间,服务器和数据访问更接近. RPC技术迅速陷入困境在这些环境中,使机器在同一个站点和远程站点看起来是一样的. 在这些情况下, ...

  9. 在mac上搭建python环境

    原文出处:http://blog.justbilt.com/2014/07/02/setup_python_on_mac/ 这两天重新搞了下python的环境,发现好多地方还是容易忘记,因此有了这篇文 ...

  10. 谷歌眼镜--UI指南

    1>使用玻璃HTML模板 不是所有的内容都在几行文字来表达.有时候你需要结构化的内容发送到用户的时间轴,或者你需要控制对格式.为了适应这种情况,镜像API提供了一个 HTML 时间表的项目,接受 ...