您的位置：首页 > Web前端 > JQuery

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

2016-11-25 20:49 281 查看
在使用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加载器" onclick="showLoader()"/>

                <input type="button" value="隐藏ajax加载器" onclick="hideLoader()"/>

                

             </div>

    </body>

    <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加载器" onclick="showLoader()"/>

                <input type="button" value="隐藏ajax加载器" onclick="hideLoader()"/>

                

             </div>

    </body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航