zoukankan      html  css  js  c++  java

  • 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.   
    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这两个方法显示加载器了。
  • 相关阅读:
    Android SDK
    1055
    清除浮动的三种方式
    解决块状元素垂直外边距的塌陷问题
    drf 验证接口权限
    Linux常用指令
    Linux安装python3,virtualenv和virtualenvwrapper
    Linux基本命令2
    Linux之文档与目录结构
    Linux基本命令
  • 原文地址：https://www.cnblogs.com/ranzige/p/3853947.html
Copyright © 2011-2022 走看看