jQuery Mobile 如何手动显示ajax加载器，提示加载中
在使用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'）：
http://img.my.csdn.net/uploads/201302/01/1359701104_3709.png
当然，你可以调整$.mobile.loading('show', { ... }中的参数，实验各种不同的加载器效果。
加载器的具体说明见jQuery Mobile 1.2.0 官方demo演示说明：
http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html
jquery mobile 1.3.2中如下显示加载中图片<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="css/jquery.mobile.structure-1.3.2.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script>
function goTo(page) {
showLoading();
$.mobile.changePage(page, {
transition: "slide"
});
}
function goBack() {
$.mobile.back();
}
function showLoading(){
$.mobile.loadingMessageTextVisible = true;
$.mobile.showPageLoadingMsg("a", "加载中..." );
}
function hideLoading(){
$.mobile.hidePageLoadingMsg();
}
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" data-position="fixed">
<h1>phonegap中文网</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#" onclick="showLoading();">关于我们</a></li>
<li><a href="#page3">联系我们</a></li>
<li><a href="#" onclick="goTo('zhaopin.html');">求职招聘</a></li>
</ul>
</div>
<div data-role="footer">
<h4>页脚</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>关于我们</h1>
</div>
<div data-role="content">
内容
</div>
<div data-role="footer">
<h4>页脚</h4>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>联系我们</h1>
</div>
<div data-role="content">
内容
</div>
<div data-role="footer">
<h4>页脚</h4>
</div>
</div>
<div data-role="page" id="page4">
<div data-role="header">
<h1>求职招聘</h1>
</div>
<div data-role="content">
内容
</div>
<div data-role="footer">
<h4>页脚</h4>
</div>
</div>
</body>
</html> 使用jquery mobile1.3.2
function test(){
$.mobile.loading('show');
/**若干逻辑代码**/
//$.mobile.loading('hide');
}
然后发现总是逻辑代码执行完毕后才显示loading……
这个怎么解决啊？ ｉｕｖ 发表于 2013-9-25 11:52
使用jquery mobile1.3.2
function test(){
一般是点击跳转的时候让 loading 显示 跳转过去就自动隐藏了，后面的课程会给大家讲解一下 admin 发表于 2013-9-25 11:56
一般是点击跳转的时候让 loading 显示 跳转过去就自动隐藏了，后面的课程会给大家讲解一下 ...
但是我有这样的需求啊~~~ 帮帮顶顶！！ 正在学习中 谢谢楼主了 非常支持 开源
页:
[1]