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

<!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

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值