在使用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. [转] C#中绘制矢量图形

    无涯 原文 C# 绘制矢量图形 [原创] 近来参与了一个项目,软件主要的功能就是使用C#画矢量图,然后导出到Word.Excel.Powerpoint中,并且能够再次被编辑.以下是我们的解决过程: 首 ...

  2. XSS 前端防火墙（5）： 整装待发

    到目前为止,我们把能用前端脚本防御 XSS 的方案都列举了一遍. 尽管看起来似乎很复杂累赘,不过那些是理论探讨而已,在实际中未必要都实现.我们的目标只是为了预警,能发现问题就行,并非要做到滴水不漏的程 ...

  3. FreeMarker笔记 第三章 模板

    ,先来一打小白兔: 3.1 总体结构 用程序语言编写的程序就是模板,模板也被成为FTL(代表FreeMarker模板语言). 模板是由如下部分混合而成的: Text文本:文本会照着原样来输出: Int ...

  4. vector.resize 与 vector.reserve的区别 .xml

    pre{ line-height:1; color:#9f1d66; background-color:#a0ffc0; font-size:16px;}.sysFunc{color:#5d57ff; ...

  5. JNI编程，C++调用Java

    本地代码中使用Java对象 通过使用合适的JNI函数,你可以创建Java对象,get.set 静态(static)和 实例(instance)的域,调用静态(static)和实例(instance)函 ...

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

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

  7. Linux学习--第二波

    虽然安装的centos感觉不能上网,权限也不知道怎么设置. 偶然的机会发现了一个好东西,博客:http://www.cnblogs.com/xiaoluo501395377/tag/CentOS/.有 ...

  8. Tips for android

    对话框样式Activity获得窗口外点击事件(注册Activity时指明theme为adnroid:Theme.Dialog) 在API11之后添加了setFinishOnTouchOutside() ...

  9. Git 提交后开始自动构建

    设定Git仓库的钩子 一般路径为 xxx.git/hooks 参考文档 https://git-scm.com/docs/githooks 修改 post-receive #!/bin/bash wh ...

  10. carthage 简单使用步骤

    brew install carthage切至项目目录:cd xxx创建Cartfile文件vi Cartfile填写依赖git "https://xxxxx" "mas ...