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 引用：

[html] view plaincopy

  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函数：

[javascript] view plaincopy

  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. //隐藏加载器.for jQuery Mobile 1.2.0
  14. function hideLoader()
  15. {
  16. //隐藏加载器
  17. $.mobile.loading(‘hide‘);
  18. }
  19. </script>

准备两个按钮，一个用于启动（显示）加载器，一个用于停止（隐藏）加载器：

[html] view plaincopy

  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. <input type="button" value="显示ajax加载器" onclick="showLoader()"/>
  11. <input type="button" value="隐藏ajax加载器" onclick="hideLoader()"/>
  12. </div>
  13. </body>

效果如下（主题为：‘a‘）：

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

加载器的具体说明见jQuery Mobile 1.2.0 官方demo演示说明：

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

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

jQuery Mobile 1.1.0显示加载器的代码如下：

[javascript] view plaincopy

  1. <script>
  2. //显示加载器
  3. function showLoader() {
  4. //显示加载器.for jQuery Mobile 1.1.0
  5. $.mobile.loadingMessage = ‘加载中...‘;     //显示的文字
  6. $.mobile.loadingMessageTextVisible = true; //是否显示文字
  7. $.mobile.loadingMessageTheme = ‘a‘;        //加载器主题样式a-e
  8. $.mobile.showPageLoadingMsg();             //显示加载器
  9. }
  10. //隐藏加载器.for jQuery Mobile 1.1.0
  11. function hideLoader() {
  12. //隐藏加载器
  13. $.mobile.hidePageLoadingMsg();
  14. }
  15. </script>

显示的效果倒是差不多。

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

The page loading dialog was previously configured globally with three settings
$.mobile.loadingMessage,
$.mobile.loadingMessageTextVisible, and 
$.mobile.loadingMessageTheme 
which are now deprecated. In addition to the methods for showing and hiding,
$.mobile.showPageLoadingMsg and
$.mobile.hidePageLoadingMsg are also deprecated.

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

有问题欢迎提问交流！

时间： 2024-12-23 06:12:30

jQuery Mobile 手动显示ajax加载器，提示加载中...的相关文章

jQuery Mobile 手动显示ajax加载器

在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更好一些. 先看两个方法,显示和关闭,方法来自于参考:http://blog.csdn.net/zht666/article/details/8563025 <script> //显示加载器 function showLoader() { //显示加载器.for jQuery Mobile 1.2.

使用js加载器动态加载外部Javascript文件

今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js 1 var MiniSite=new Object(); 2 /** 3 * 判断浏览器 4 */ 5 MiniSite.Browser={ 6 ie:/msie/.test(window.navigator.userAgent.toLowerCase()), 7 moz:/gecko/.test(window.navigator.userAgent.toLowerCase()), 8 opera:/o

自研模块加载器(二) 加载器结构与设计导论

结构导论 模块部分 数据初始化: 加载器中设计来一个名为Module的构造函数,每个模块都是此构造函数实例对象.构造函数中给实例对象扩展了"未来"所需用到的属性和方法. 模块存储: 加载器中设计来一个名为cache的缓存对象,每个文件(模块)都会存储在cache对象中. 具体存储方式: { "当前模块的绝对路径" : new Module()}, 注意: 当前模块的绝对路径是通过资源部分,资源定位方法实现的. 每个模块创建都先初始化数据,存储在缓存对象中. 资源部分

JQuery Mobile 手机显示页面偏小

今天第一次用JQuery Mobile做了个3个手机小页面,一个登陆页面.一个列表页面和一个表单页面,页面中的组件呈现一切正常. 但出现了一个奇怪的问题,登陆页面大小正常,到了列表页面和表单页面就显得非常小,对比各种CSS样式,完全没问题. 花了1个小时中发现,原来在页面head中少了一句话 <meta name="viewport" content="width=device-width, initial-scale=1" />

jQuery Mobile 脚本加载问题

刚开始使用jQuery Mobile,发现很多问题需要重新考虑,比如脚本加载问题. 在普通html中,如果a.html中有链接到b.html,b.html中有类似代码: $(document).ready(function() { alert("hello"); }); 则这段代码可以被正常执行. 而在jQuery Mobile中,这样做就行不通了,在浏览器中直接刷新b.html,则代码可以正常执行,而从a.html跳转到b.html时则不会被执行!为什么? 参见: http://ww

AMD加载器实现笔记(四)

继续这一系列的内容,到目前为止除了AMD规范中config的map.config参数外,我们已经全部支持其他属性了.这一篇文章中,我们来为增加对map的支持.同样问题,想要增加map的支持首先要知道map的语义. 主要用于解决在两个不同模块集中使用一个模块的不同版本,并且保证两个模块集的交互没有冲突. 假设磁盘有如下文件: 当'some/newmodule'请求'foo'模块时,它将从foo1.2.js总得到'foo1.2'模块:当'some/oldmodule'请求'foo'模块时它将从foo

JavaScript AMD 模块加载器原理与实现

关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者遵循 CMD规范.前者的规范产出比较适合于浏览器异步环境的习惯,后者的规范产出对于写过 nodejs 的同学来说是比较爽的.关于两者的比较,有兴趣的同学请参看玉伯在知乎的回答 AMD和CMD的区别有哪些.本文希望能按照 AMD 规范来简单实现自己的一个模块加载器,以此来搞清楚模块加载器的工作原理.

如何通过预加载器提升网页加载速度

预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措.Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了 Alexa 排名前2000名网站,性能有20%的提升. 它并不是一门新技术,有人认为只有 Chrome 才具备这个功能.也有人认为它是有史以来提升浏览器性能最有效的方法.如果你第一次接触预加载器,也许心中已经有了无数个问号.什么是预加载器?它是如何提升浏览器性能的? 首先需要了解浏览器是如何加载网页的 一个网页的加载依赖于脚本文件.CS

扩展类加载器的加载问题

我们都知道java的类载入器共有三级,分别是bootstrap (引导类)加载器.extension(扩展类)加载器和 system (系统类)加载器.这三个加载器是父子关系,其中 bootstrap 类加载器在顶端,而 system 加载器在结构的最底层.同时他们都采取向上传递的机制,即有了要加载的类,先问问自己的父加载器,若父加载器不能加载,自己再加载. 我们写了一个helloworld类,加载的时候,二进制字节码送给系统类加载器,但是系统类会询问它的父加载器(扩展类)你能加载不?扩展类加载