jQuery Mobile 手动显示…
来源:互联网 发布:知乎 恋人之间矛盾 编辑:程序博客网 时间:2024/04/25 07:42
1. 启动加载器,显示“加载中...”;
2. 进行ajax请求,请求完成后更新页面数据,刷新jQuery Mobile控件样式;
3. 关闭加载器。
下面就来讲解jQuery Mobile 1.2.0 和 1.1.0中手动显示加载器的方法(很简单,几行代码就OK了!)。
首先是jQuery Mobile1.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',{ ... }中的参数,实验各种不同的加载器效果。
加载器的具体说明见jQueryMobile 1.2.0
http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html
注意:jQuery Mobile1.1.0中显示ajax加载器与1.2.0版本完全不同!坑爹!
jQuery Mobile1.1.0显示加载器的代码如下:
显示的效果倒是差不多。
官方1.2.0文档中对1.1.0的说明如下:
Thepage loading dialog was previously configured globally with threesettings
$.mobile.loadingMessage,
$.mobile.loadingMessageTextVisibl
$.mobile.loadingMessageTheme
which
$.mobile.showPageLoadingMsg and
$.mobile.hidePageLoadingMsg
意思就是说:在1.2.0版本不在使用$.mobile.showPageLoadingMsg和$.mobile.hidePageLoadingMsg这两个方法显示加载器了。
- jQuery Mobile 手动显示…
- jQuery Mobile(Popup)
- jquery mobile 切换页面
- jQuery Mobile设计思想
- run Windows Mobile connecting in…
- jQuery Mobile系列之Fixed&nb…
- 用PHP, MySQL和jQuery mobile建一…
- poj 1195 Mobile phones(二维树状…
- jQuery Mobile系列之Accordion
- jQuery Mobile系列之Buttons
- jQuery Mobile系列之Checkboxes
- jQuery Mobile系列之Collapsible
- jQuery Mobile系列之Dialogs
- java Struts2 jquery uploadify 多…
- javascript jquery cons…
- jQuery ajax return语句…
- validationEngine中文版 — jquery…
- 利用Cutting Plane 显示…
- android listview addHe…
- PHP-ExcelReader个人总结
- android引入第三方jar包时报错java…
- PHP实现异步调用方法
- android用https发送post请求
- jQuery Mobile 手动显示…
- android2.2系统自带drawable资源
- ThinkPHP的Session操作
- Android系统设置
- sqlserver2008安装遇到的问题
- JS刷新父窗口的几种方式
- 【android】scaleType属性与ImagVi…
- adb无线网络调试
- nginx配置ThinkPHP Rewrite