在使用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. Dubbo原理解析-注册中心之Zookeeper协议注册中心

    下面我们来看下开源dubbo推荐的业界成熟的zookeeper做为注册中心, zookeeper是hadoop的一个子项目是分布式系统的可靠协调者,他提供了配置维护,名字服务,分布式同步等服务.对于z ...

  2. Java 与无符号那些事儿

    最近在使用 Java 作为 WebSocket 客户端连接 Node.js 的 WebSocket 服务器的时候,由于使用的客户端库比较老,所以遇到了字节符号的问题,上网查了一下,看到这篇文章写的很有 ...

  3. Drupal如何处理系统变量？

    Drupal的系统变量都保存在数据库variable表中: 然后,开发人员可以通过下面的API函数操作这些系统变量: function variable_get($name, $default = N ...

  4. 运行Python2.x程序报编码错误的解决办法-UnicodeDecodeError: 'ascii' codec can't decode byte 0xb7 in position 7: ordina not in range(128)

    Python编码问题的终极解决方案:在python的Lib\site-packages文件夹下新建一个sitecustomize.py文件,输入: import sys sys.setdefaulte ...

  5. 【LeetCode】70 - Climbing Stairs

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  6. UI控件入门

    其实整个学习过程.确实有点儿混乱,因为不懂的东西太多,一会儿看这,一会儿看那,马上就乱了. 还是先做点儿简单的事儿,说控件,但不会说完全,只是入个门,知道怎么学控件,具体要学好每一个控件需要项目中磨练 ...

  7. Python filter()删除1-100内素数

    用filter()删除1-100内的素数: #!/usr/bin/env python #coding:utf-8 import math def fil(n): #定义fil函数 flag = 0 ...

  8. centos 7搭建vpn(pptpd)服务器 （只限centos 7）

    第一步:首先检查ppp是否开启  若使用XEN构架的VPS,此步骤不用执行 终端输入命令:cat /dev/ppp 开启成功的标志:No such file or directory 或者 No su ...

  9. Strider SSH Deploy配置

    登录需要ssh, ssh 免密码登录配置自行百度.shell里写成自己的需要的命令

  10. Blog 入职新公司的一些吐槽！

    入职公司已经两个星期了,说真的也很惭愧.我们这小批入职的一共六个人,五个人是实习生,我是唯一一个社招. 所以 我要吐槽 !! 吐槽1 人家都是90后(TAT) 其实真的不要觉得年龄是压力!看看路边KF ...