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. }

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


  27. </script>
  28. </head>
  29. <body>

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

  45. <div data-role="page" id="page2">
  46.     <div data-role="header">
  47.         <h1>关于我们</h1>
  48.     </div>
  49.     <div data-role="content">   
  50.         内容
  51.     </div>
  52.     <div data-role="footer">
  53.         <h4>页脚</h4>
  54.     </div>
  55. </div>

  56. <div data-role="page" id="page3">
  57.     <div data-role="header">
  58.         <h1>联系我们</h1>
  59.     </div>
  60.     <div data-role="content">   
  61.         内容
  62.     </div>
  63.     <div data-role="footer">
  64.         <h4>页脚</h4>
  65.     </div>
  66. </div>

  67. <div data-role="page" id="page4">
  68.     <div data-role="header">
  69.         <h1>求职招聘</h1>
  70.     </div>
  71.     <div data-role="content">   
  72.         内容
  73.     </div>
  74.     <div data-role="footer">
  75.         <h4>页脚</h4>
  76.     </div>
  77. </div>

  78. </body>
  79. </html>
复制代码

作者: iuv    时间: 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
iuv 发表于 2013-9-25 11:52
使用jquery mobile  1.3.2

function test(){

一般是点击跳转的时候让 loading 显示   跳转过去就自动隐藏了,后面的课程会给大家讲解一下
作者: iuv    时间: 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