From: http://blog.csdn.net/zht666/article/details/8563025
在使用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 引用:
- <!DOCTYPE html>
- <html>
- <head>
- <title>Ajax测试</title>
- <meta charset="gbk">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <!-- 从官方下载的文件放在项目的 jquery-mobile 目录中 -->
- <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/>
- <link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/>
- <script src="jquery-mobile/jquery-1.8.2.min.js"></script>
- <script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script>
- <head>
编写javascript函数:
- <script>
- //显示加载器
- function showLoader() {
- //显示加载器.for jQuery Mobile 1.2.0
- $.mobile.loading('show', {
- text: '加载中...', //加载器中显示的文字
- textVisible: true, //是否显示文字
- theme: 'a', //加载器主题样式a-e
- textonly: false, //是否只显示文字
- html: "" //要显示的html内容,如图片等
- });
- }
- //隐藏加载器.for jQuery Mobile 1.2.0
- function hideLoader()
- {
- //隐藏加载器
- $.mobile.loading('hide');
- }
- </script>
准备两个按钮,一个用于启动(显示)加载器,一个用于停止(隐藏)加载器:
- <body>
- <div data-role="page">
- <!-- 头部 -->
- <div data-role="header">
- <h3>Ajax测试</h3>
- </div>
- <!-- 内容 -->
- <div data-role="content">
- <h3>Ajax测试</h3>
- <input type="button" value="显示ajax加载器" onclick="showLoader()"/>
- <input type="button" value="隐藏ajax加载器" onclick="hideLoader()"/>
- </div>
- </body>
效果如下(主题为:'a'):
当然,你可以调整$.mobile.loading('show', { ... }中的参数,实验各种不同的加载器效果。
加载器的具体说明见jQuery Mobile 1.2.0 官方demo演示说明:
相关推荐
Ajax.BeginForm 提交,需要引用此文件才会执行OnSuccess
jquery.mobile.custom.min.js v1.4.2 偶然发现这文件不好找还有挺贵,所以传一个
最新jquery.mobile-1.4.0 jquery.mobile-1.4.0.zip 含Demos 最新jquery.mobile-1.4.0-UI(jQuery+CSS+images+demos.index.html) jquery.mobile-1.4.0.min... jquery.mobile-1.4.0.min.map(各种IDE环境的智能提示)
jquery.mobile-1.4.5.min.js A Touch-Optimized Web Framework jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, ...
jquery.mobile-1.4.5 jquery.mobile-1.4.5 jquery.mobile-1.4.5
jquery mobile 1.4.5.js
基于jquery.masonry插件开发的瀑布流ajax动态加载数据功能(使用的是aspx的页面)
包含jquery.mobile-1.0.1.min.js和jquery.mobile-1.0.1.min.css
html5 开发 jquery.mobile.theme-1.4.5.min.css 样式表
jquery.mobile.custom.min.js v1.4.2,偶然发现这文件不好找,所以传一个
jquery.mobile.tabs 是最新juqery的技术包含jquery.mobile.tabs.css 以及jquery.mobile.tabs.js 方便新手找资源
手机页面内容逐渐加载jquery.mobile插件.rar手机页面内容逐渐加载jquery.mobile插件.rar手机页面内容逐渐加载jquery.mobile插件.rar手机页面内容逐渐加载jquery.mobile插件.rar手机页面内容逐渐加载jquery.mobile...
jquery1.9.1 支持低版本ajax (ajax前jQuery.support.cors=true )
移动开发所需要的css文件 jQuery Mobile 1.4.5 | Git HEADhash: 68e55e7 <> 2014-10-31T17:33:30Z | (c) 2010, 2014 jQuery Foundation, Inc. | jquery.org/license */
jQueryMobile jQueryMobile.js jQueryMobile开发
jquery.mobile-1.3.2.js
jquery.unobtrusive-ajax 一个Ajax 异步刷新的脚本 具体方法在我的主页,大家可以看一下,如有疑问,欢迎留言
使用jquerymobile移动框架,利用jquery的ajax滚动加载内容。