1. 启动加载器,显示“加载中...”;
2. 进行ajax请求,请求完成后更新页面数据,刷新jQuery Mobile控件样式;
3. 关闭加载器。
下面就来讲解jQuery Mobile 1.2.0 和 1.1.0 中手动显示加载器的方法(很简单,几行代码就OK了!)。
首先是jQuery Mobile 1.2.0
- >
- <</SPAN>html>
-
<</SPAN>head> -
<</SPAN>title>Ajax测试</</SPAN>title> -
<</SPAN>meta charset="gbk"> -
<</SPAN>meta name="viewport" content="width=device-width, initial-scale=1"> -
-
<</SPAN>link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/> -
<</SPAN>link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/> -
<</SPAN>script src="jquery-mobile/jquery-1.8.2.min.js"></</SPAN>script> -
<</SPAN>script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></</SPAN>script> -
<</SPAN>head>
编写javascript函数:
准备两个按钮,一个用于启动(显示)加载器,一个用于停止(隐藏)加载器:
- <</SPAN>body>
-
<</SPAN>div data-role="page"> -
-
<</SPAN>div data-role="header"> -
<</SPAN>h3>Ajax测试</</SPAN>h3> -
</</SPAN>div> -
-
<</SPAN>div data-role="content"> -
<</SPAN>h3>Ajax测试</</SPAN>h3> -
-
<</SPAN>input type="button" value="显示ajax加载器" onclick="showLoader()"/> -
<</SPAN>input type="button" value="隐藏ajax加载器" onclick="hideLoader()"/> -
-
</</SPAN>div> - </</SPAN>body>
效果如下(主题为:'a'):
当然,你可以调整$.mobile.loading('show', { ... }中的参数,实验各种不同的加载器效果。
加载器的具体说明见jQuery Mobile 1.2.0
http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html
注意:jQuery Mobile1.1.0中显示ajax加载器与1.2.0版本完全不同!坑爹!
jQuery Mobile 1.1.0显示加载器的代码如下:
显示的效果倒是差不多。
官方1.2.0文档中对1.1.0的说明如下:
The page loading dialog was previously configured globally with three settings
$.mobile.loadingMessage,
$.mobile.loadingMessageTextVisibl
$.mobile.loadingMessageTheme
which
$.mobile.showPageLoadingMsg and
$.mobile.hidePageLoadingMsg
意思就是说:在1.2.0版本不在使用$.mobile.showPageLoadingMsg和$.mobile.hidePageLoadingMsg这两个方法显示加载器了。