From: http://blog.csdn.net/zht666/article/details/8563025
?
在使用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?引用：
- <!DOCTYPE?html>??
- <html>??
- ????<head>??
- ????????<title>Ajax测试</title>??
- ????????<meta?charset="gbk">??
- ????????<meta?name="viewport"?content="width=device-width,?initial-scale=1">??
- ????????<!--?从官方下载的文件放在项目的?jquery-mobile?目录中?-->??
- ????????<link?rel="stylesheet"?href="jquery-mobile/jquery.mobile-1.2.0.min.css"/>??
- ????????<link?rel="stylesheet"?href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/>??
- ????????<script?src="jquery-mobile/jquery-1.8.2.min.js"></script>??
- ????????<script?src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script>??
- ????<head>??
编写javascript函数：
- <script>??
- //显示加载器??
- function?showLoader()?{??
- ????//显示加载器.for?jQuery?Mobile?1.2.0??
- ????$.mobile.loading('show',?{??
- ????????text:?'加载中...',?//加载器中显示的文字??
- ????????textVisible:?true,?//是否显示文字??
- ????????theme:?'a',????????//加载器主题样式a-e??
- ????????textonly:?false,???//是否只显示文字??
- ????????html:?""???????????//要显示的html内容，如图片等??
- ????});??
- }??
- ??
- //隐藏加载器.for?jQuery?Mobile?1.2.0??
- function?hideLoader()??
- {??
- ????//隐藏加载器??
- ????$.mobile.loading('hide');??
- }??
- </script>??
准备两个按钮，一个用于启动（显示）加载器，一个用于停止（隐藏）加载器：
- <body>??
- ????<div?data-role="page">??
- ????????<!--?头部?-->??
- ????????<div?data-role="header">??
- ????????????<h3>Ajax测试</h3>??
- ????????</div>??
- ????????<!--?内容?-->??
- ????????<div?data-role="content">??
- ????????????<h3>Ajax测试</h3>??
- ??????????????
- ????????????<input?type="button"?value="显示ajax加载器"?onclick="showLoader()"/>??
- ????????????<input?type="button"?value="隐藏ajax加载器"?onclick="hideLoader()"/>??
- ??????????????
- ?????????</div>??
- </body>??
效果如下（主题为：'a'）：
?
当然，你可以调整$.mobile.loading('show', { ... }中的参数，实验各种不同的加载器效果。
加载器的具体说明见jQuery Mobile 1.2.0 官方demo演示说明：
http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html