PhoneGap中文网

标题: jQuery Mobile 如何手动显示ajax加载器，提示加载中 [打印本页]
作者: admin    时间: 2013-8-24 16:48
标题: 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 引用：
  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.       
  14.     //隐藏加载器.for jQuery Mobile 1.2.0  
  15.     function hideLoader()  
  16.     {  
  17.         //隐藏加载器  
  18.         $.mobile.loading('hide');  
  19.     }  
  20.     </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.                   
  11.                 <input type="button" value="显示ajax加载器" onclick="showLoader()"/>  
  12.                 <input type="button" value="隐藏ajax加载器" onclick="hideLoader()"/>  
  13.                   
  14.              </div>  
  15.     </body>  
复制代码
效果如下（主题为：'a'）：

当然，你可以调整$.mobile.loading('show', { ... }中的参数，实验各种不同的加载器效果。


加载器的具体说明见jQuery Mobile 1.2.0 官方demo演示说明：


http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html

作者: admin    时间: 2013-8-24 17:08
jquery mobile 1.3.2中如下显示加载中图片
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jQuery Mobile Web 应用程序</title>
  6. <link href="css/jquery.mobile.structure-1.3.2.css" rel="stylesheet" type="text/css"/>
  7. <link href="css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
  8. <script src="js/jquery.js" type="text/javascript"></script>
  9. <script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
  10. <script>
  11. function goTo(page) {
  12.     showLoading();
  13.     $.mobile.changePage(page, {
  14.           transition: "slide"
  15.         });
  16. }
  17. function goBack() {
  18.     $.mobile.back();
  19. }

  21. function showLoading(){
  22.     $.mobile.loadingMessageTextVisible = true;
  23.     $.mobile.showPageLoadingMsg("a", "加载中..." );
  24. }
  25. function hideLoading(){
  26.     $.mobile.hidePageLoadingMsg();
  27. }


  30. </script>
  31. </head>
  32. <body>

  34. <div data-role="page" id="page">
  35.     <div data-role="header" data-position="fixed">
  36.         <h1>phonegap中文网</h1>
  37.     </div>
  38.     <div data-role="content">   
  39.         <ul data-role="listview">
  40.             <li><a href="#" onclick="showLoading();">关于我们</a></li>
  41.             <li><a href="#page3">联系我们</a></li>
  42.             <li><a href="#" onclick="goTo('zhaopin.html');">求职招聘</a></li>
  43.         </ul>        
  44.     </div>
  45.     <div data-role="footer">
  46.         <h4>页脚</h4>
  47.     </div>
  48. </div>

  50. <div data-role="page" id="page2">
  51.     <div data-role="header">
  52.         <h1>关于我们</h1>
  53.     </div>
  54.     <div data-role="content">   
  55.         内容
  56.     </div>
  57.     <div data-role="footer">
  58.         <h4>页脚</h4>
  59.     </div>
  60. </div>

  62. <div data-role="page" id="page3">
  63.     <div data-role="header">
  64.         <h1>联系我们</h1>
  65.     </div>
  66.     <div data-role="content">   
  67.         内容
  68.     </div>
  69.     <div data-role="footer">
  70.         <h4>页脚</h4>
  71.     </div>
  72. </div>

  74. <div data-role="page" id="page4">
  75.     <div data-role="header">
  76.         <h1>求职招聘</h1>
  77.     </div>
  78.     <div data-role="content">   
  79.         内容
  80.     </div>
  81.     <div data-role="footer">
  82.         <h4>页脚</h4>
  83.     </div>
  84. </div>

  86. </body>
  87. </html>
复制代码
作者: ｉｕｖ    时间: 2013-9-25 11:52
使用jquery mobile  1.3.2

function test(){
$.mobile.loading('show');
/**若干逻辑代码**/
//$.mobile.loading('hide');  
}
然后发现总是逻辑代码执行完毕后才显示loading……
这个怎么解决啊？
作者: admin    时间: 2013-9-25 11:56
ｉｕｖ 发表于 2013-9-25 11:52
使用jquery mobile  1.3.2

function test(){

一般是点击跳转的时候让 loading 显示   跳转过去就自动隐藏了，后面的课程会给大家讲解一下
作者: ｉｕｖ    时间: 2013-9-25 19:00
admin 发表于 2013-9-25 11:56
一般是点击跳转的时候让 loading 显示   跳转过去就自动隐藏了，后面的课程会给大家讲解一下 ...

但是我有这样的需求啊~~~
作者: phonegap100    时间: 2013-9-30 21:37
帮帮顶顶！！
作者: admin    时间: 2013-10-3 07:40
正在学习中 谢谢楼主了 非常支持 开源



欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2