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

最新推荐文章于 2021-08-06 16:08:33 发布

海涛zht666

最新推荐文章于 2021-08-06 16:08:33 发布

阅读量4.8w

点赞数 2

分类专栏： HTML5

本文链接：https://blog.csdn.net/zht666/article/details/8563025

版权

HTML5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在使用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加载器" οnclick="showLoader()"/>
                <input type="button" value="隐藏ajax加载器" οnclick="hideLoader()"/>
                
             </div>
    </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显示加载器的代码如下：

<script>
    //显示加载器
    function showLoader() {
        //显示加载器.for jQuery Mobile 1.1.0
        $.mobile.loadingMessage = '加载中...';     //显示的文字
        $.mobile.loadingMessageTextVisible = true; //是否显示文字
        $.mobile.loadingMessageTheme = 'a';        //加载器主题样式a-e
        $.mobile.showPageLoadingMsg();             //显示加载器
    }

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

有问题欢迎提问交流！

转载请注明原文地址：http://blog.csdn.net/zht666/article/details/8563025

海涛zht666

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
jQuery Mobile 手动显示ajax加载器，提示加载中...

在使用jQuery Mobile开发时，有时候我们需要在请求ajax期间，显示加载提示框（例如：一个旋转图片+一个提示：加载中...）。这个时候，我们可以手动显示jQuery Mobile的加载器，大致流程如下：1. 启动加载器，显示“加载中...”；2. 进行ajax请求，请求完成后更新页面数据，刷新jQuery Mobile控件样式；3. 关闭加载器。下面就来讲解jQuery
复制链接

扫一扫