jQuery Mobile 手动显示…

来源:互联网 发布:知乎 恋人之间矛盾 编辑:程序博客网 时间:2022/08/16 17:57
 在使用jQueryMobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...)。这个时候,我们可以手动显示jQueryMobile的加载器,大致流程如下:

1. 启动加载器,显示“加载中...”;

2. 进行ajax请求,请求完成后更新页面数据,刷新jQuery Mobile控件样式;

3. 关闭加载器。

下面就来讲解jQuery Mobile 1.2.0 和 1.1.0中手动显示加载器的方法(很简单,几行代码就OK了!)。

先是jQuery Mobile1.2.0 引用:

[html] viewplaincopy
  1. >  
  2. <</SPAN>html>  
  3.     <</SPAN>head>  
  4.         <</SPAN>title>Ajax测试</</SPAN>title>  
  5.         <</SPAN>meta charset="gbk">  
  6.         <</SPAN>meta name="viewport" content="width=device-width, initial-scale=1">  
  7.           
  8.         <</SPAN>link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/>  
  9.         <</SPAN>link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/>  
  10.         <</SPAN>script src="jquery-mobile/jquery-1.8.2.min.js"></</SPAN>script>  
  11.         <</SPAN>script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></</SPAN>script>  
  12.     <</SPAN>head>  

编写javascript函数:

[javascript] viewplaincopy

准备两个按钮,一个用于启动(显示)加载器,一个用于停止(隐藏)加载器:

[html] viewplaincopy
  1. <</SPAN>body>  
  2.     <</SPAN>div data-role="page">  
  3.           
  4.         <</SPAN>div data-role="header">  
  5.             <</SPAN>h3>Ajax测试</</SPAN>h3>  
  6.         </</SPAN>div>  
  7.           
  8.         <</SPAN>div data-role="content">  
  9.             <</SPAN>h3>Ajax测试</</SPAN>h3>  
  10.               
  11.             <</SPAN>input type="button" value="显示ajax加载器" onclick="showLoader()"/>  
  12.             <</SPAN>input type="button" value="隐藏ajax加载器" onclick="hideLoader()"/>  
  13.               
  14.          </</SPAN>div>  
  15. </</SPAN>body>  

效果如下(主题为:'a'):

 

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

加载器的具体说明见jQueryMobile 1.2.0 官方demo演示说明

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

 

注意:jQuery Mobile1.1.0中显示ajax加载器与1.2.0版本完全不同!坑爹!

jQuery Mobile1.1.0显示加载器的代码如下:

[javascript] viewplaincopy

显示的效果倒是差不多。

官方1.2.0文档中对1.1.0的说明如下:

Thepage loading dialog was previously configured globally with threesettings
$.mobile.loadingMessage,
$.mobile.loadingMessageTextVisible, and 
$.mobile.loadingMessageTheme
 
which arenow deprecated. In addition to the methods forshowing and hiding,
$.mobile.showPageLoadingMsg and
$.mobile.hidePageLoadingMsg
 are alsodeprecated.

意思就是说:在1.2.0版本不在使用$.mobile.showPageLoadingMsg$.mobile.hidePageLoadingMsg这两个方法显示加载器了。

 

0 0