最近文章
联系方式
您现在的位置:主页 > 最近文章 > 内容

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

发布时间:2018-12-26 编辑:AG集&#

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

在使用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

 

注意: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.   
  11.     //隐藏加载器.for jQuery Mobile 1.1.0  
  12.     function hideLoader() {  
  13.         //隐藏加载器   
  14.         $.mobile.hidePageLoadingMsg();  
  15.     }  
  16. </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这两个方法显示加载器了。

 

有问题欢迎提问交流!


jQuery Mobile 怎定义全局不用AJAX加载新链接

干脆用原生jQuery写算了,反正你也不用Mobile的
 
jquery+ajax实现查询数据时,JSP页面显示“正在加载中” ,查询完了之后在页面显示查询出来的数据

教你个最简单的。$(function(){ $.get("URL", function(Msg){ $("你要显示提示的地方").html("数据正在加载中。。"); $("你要显示查询数据的地方").html(Msg); }); }); 。可以了,兄弟,够详细了吧。
 

http://www.bkjia.com/jQuery/878789.htmlwww.bkjia.comtruehttp://www.bkjia.com/jQuery/878789.htmlTechArticlejQuery Mobile 手动显示ajax加载器,提示加载中...,jqueryajax 在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:...

本文源自: 揭秘环亚娱乐骗局

上一篇:jQuery Mobile插件学习笔记

下一篇:没有了

Copyright © 2005-2016 http://www.chickagoan.com 揭秘环亚娱乐骗局_揭秘环亚娱乐黑钱_环亚娱乐安全_网易新闻版权所有 揭秘环亚娱乐骗局_揭秘环亚娱乐黑钱_环亚娱乐安全_网易新闻