在使用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. 解决 winform 界面对不齐 z

    一个winform的程序,本机上界面对得很齐,到一到客户的机器上就惨不忍睹,一番研究后搞定: 1. AutoScaleMode = None 2. BackgroundImageLayout = No ...

  2. cocoa NSFileManager

    NSFileManager中包含了用来查询单词库目录.创建.重命名.删除目录以及获取/设置文件属性的方法(可读性,可编写性等等). 每个程序都会有它自己的沙盒,通过它你可以阅读/编写文件.写入沙盒的文 ...

  3. AspNetPager 自定义html

    如果,上面的分页控件里面,成功和失败都是我自己添加的,使用方法如下 anp.CustomInfoHTML = "总计%RecordCount%条记录,成功" + Success + ...

  4. selenium + python 自动化测试环境搭建

    selenium + python 自动化测试 —— 环境搭建 关于 selenium Selenium 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操 ...

  5. LR 解决中文乱码（来源——百度）

    因为我们使用的中文操作系统默认的中文编码格式是GB2312,所以LR对服务器的返回内容自动使用GB2312方式阅读的,但是几乎所有的中文网站现在都在使用UTF-8的方式来编码,由于解码编码的方式不同最 ...

  6. leetcode：Longest Palindromic Substring（求最大的回文字符串）

    Question:Given a string S, find the longest palindromic substring in S. You may assume that the maxi ...

  7. WinDriver&PCIE

    1.安装VS2012 安装VS2012略过,主要用它来做数据传输应用程序的,WINDRIVER提供了一系列API接口,方便了用户,使用户能直接进入用户态的编程,因为内核态的编程它已做好,不需要进行修改 ...

  8. linux 后台运行程序

    有些时候,我们需要在终端启动一个程序,并使之运行--但是如果关闭终端,那么这个程序也就随着关闭了.那么有没有什么方法在关闭终端后,让已经从这个终端启动的程序继续运行呢? 前置知识: xterm,con ...

  9. 【24点游戏】cocos2dx 源码

    1.  4个数字 24点判断 double Calc(double a, double b, string oper) { double result = 0; const char *p = ope ...

  10. python日志模块logging

    python日志模块logging   1. 基础用法 python提供了一个标准的日志接口,就是logging模块.日志级别有DEBUG.INFO.WARNING.ERROR.CRITICAL五种( ...