`

jQuery Mobile 手动显示ajax加载器，提示加载中...

 
阅读更多

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

[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.   
  14. //隐藏加载器.for jQuery Mobile 1.2.0  
  15. function hideLoader()  
  16. {  
  17.     //隐藏加载器  
  18.     $.mobile.loading('hide');  
  19. }  
  20. </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.               
  11.             <input type="button" value="显示ajax加载器" onclick="showLoader()"/>  
  12.             <input type="button" value="隐藏ajax加载器" onclick="hideLoader()"/>  
  13.               
  14.          </div>  
  15. </body>  

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

 

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

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

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

分享到：
| android >WebView 实现 JS , JAVA 互调
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery.mobile-1.3.2

    1. **单一页面架构**：jQuery Mobile 使用单页模板，通过AJAX技术实现页面间的平滑切换，减少了页面加载时间，提升了用户体验。 2. **数据URL标记**：通过添加"data-"前缀的HTML属性，可以轻松地对元素进行扩展，让...

    jquery.mobile-1.0

    1. 一站式页面结构：jQuery Mobile 1.0 引入了一种称为“单一页面应用程序”（Single-Page Application）的模型，通过AJAX技术实现页面无刷新跳转，提高了用户体验。 2. 自动页面增强：只需添加特定的类或数据属性，...

    jquery.mobile-1.4.5

    - jQuery Mobile 基于jQuery库，所以首先需要理解jQuery的基本语法，如选择器、事件处理和DOM操作。 - 它使用HTML5数据属性（data-attributes）来标记和配置UI元素，如`data-role="page"` 和 `data-enhance="true...

    JqueryMobile常见问题整理

    3. **CSS 选择器的调整**：避免使用基于 `:visible` 或 `:hidden` 的 CSS 选择器，因为这些在 jQuery Mobile 中可能不准确。可以使用 `.ui-page-active` 类来选择当前活动页面。 4. **JavaScript 重新绑定**：在页面...

    JQuery Mobile权威指南+附书源码+中文api

    1. **单一页面应用模式**：jQuery Mobile 使用 AJAX 技术实现页面间的平滑过渡，使得用户感觉像是在一个单个的页面中操作，提高了用户体验。 2. **触控优化**：jQuery Mobile 针对触摸设备进行了优化，提供了诸如...

    jquerymobile中文文档

    - 自定义主题颜色，通过修改 `jquery.mobile.theme.css` 文件中的颜色变量。 **五、jQuery Mobile 应用场景** jQuery Mobile 适用于构建移动版网站、混合应用（使用WebView）以及简单的原生应用。它简化了在不同...

    Jquery Mobile的应用

    - **链接增强**：jQuery Mobile会自动处理页面间的导航，通过`data-rel="external"`或`data-ajax="false"`可以阻止默认的AJAX加载。 - **主题系统**：jQuery Mobile使用主题CSS来改变组件的外观，可以通过`data-...

    jQuery Mobile快速入门源码

    在处理事件时，jQuery Mobile提供了特有的事件模型，如`pageinit`（页面加载完成后触发）、`pagebeforeshow`（页面显示前触发）和`pageshow`（页面显示后触发）等，这些事件对于响应式设计和动态内容加载至关重要。...

    jQueryMobile HTML5开发框架 v1.5.0 rc1.zip

    在“jQueryMobile HTML5开发框架 v1.5.0 rc1.zip”中，我们可以找到该框架的早期版本1.5.0的候选发布1（Release Candidate 1）。这个版本通常在正式发布前提供给开发者测试，以确保新功能的稳定性和兼容性。下面将...

    JQuery Mobile 1.0.1

    当用户在jQuery Mobile应用中导航时，框架会自动处理页面的异步加载和缓存，以实现平滑的页面过渡效果。`data-ajax="false"`可以禁用这一特性，以便于处理需要完整页面刷新的情况。 7. **事件和API**： jQuery ...

    jquery mobike

    1. **性能优化**：减少不必要的 AJAX 导航，避免加载整个页面，使用 `$.mobile.changePage()` 手动控制页面切换。 2. **页面预加载**：使用 `data-dom-cache="true"` 缓存页面，减少加载时间。 3. **自定义主题**：...

    Jquery mobile

    - **jquerymobile_juz.ppt**：可能是关于 jQuery Mobile 的演示文稿，包含了框架的基本介绍和实例演示，适合初学者快速入门。 总的来说，jQuery Mobile 提供了一个强大的工具集，让开发者能够高效地创建功能丰富的...

    jQuery前端开发实战教程.pdf

    6. jQuery Mobile 列表视图：在jQuery Mobile列表视图中，可以自动缩放图片大小至特定尺寸，例如题目中的60像素，以便在列表中统一显示。 7. JavaScript库：jQuery诞生后，出现了许多其他JavaScript库，如Prototype...

    JQuery 1.5 API 中文版 html索引版

    jQuery 1.5中包含了一系列强大的选择器，如基本选择器（ID，类，标签），层次选择器（后代，子元素，相邻兄弟，通用兄弟），属性选择器（根据属性值、以某种方式结束、包含某个值等）以及表单选择器（用于选择表单...

    jquery学习资料

    - **jQuery Mobile**: 专为触摸设备设计的框架，提供了触控友好的组件和交互。 - **轻量级版本**: jQuery 3.x对旧浏览器的支持减少，体积更小，适用于现代浏览器的移动应用。 通过深入学习和实践《学习Jquery笔记...

    jQuery实现的往返城市和日期查询特效源码.zip

    3. **实时查询**：利用jQuery的事件监听和AJAX技术，用户在选择城市和日期后，系统可以立即向服务器发送请求，获取并显示相关的查询结果。这种实时反馈减少了用户的等待时间，增强了用户体验。 4. **UI特效**：...

    jquery常用插件

    在IT行业中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。这个“jquery常用插件”压缩包很可能是包含了一系列实用的jQuery扩展，这些插件能帮助开发者...

    JQM实战源码

    1. **页面事件**：jQuery Mobile 有特定的页面生命周期事件，如`pageinit`（页面首次加载）、`pagebeforechange`（页面切换前）和`pagechange`（页面切换后）等，适用于页面级的逻辑处理。 2. **触控事件**：针对...

    锋利的jQuery

    9. **响应式设计**：jQuery也能与响应式设计相结合，通过监听窗口大小变化事件(window.resize)来调整布局，或者使用插件如jQuery Mobile来支持移动设备。 10. **兼容性和版本管理**：虽然jQuery对旧浏览器有很好的...

    jQuery压塑包

    jQuery生态系统中有大量插件和库，如jQuery UI提供了一系列可定制的用户界面组件，而jQuery Mobile则专为移动设备设计。这些扩展丰富了jQuery的功能，使其能够满足各种开发需求。 **实战应用** "jQuery实战.pdf"很...

Magicbox
Global site tag (gtag.js) - Google Analytics