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

作者:本站编辑发布时间:2015-11-25 来源:本站原创点击数:

1. 启动加载器，显示“加载中...”；
2. 进行ajax请求，请求完成后更新页面数据，刷新jQuery Mobile控件样式；
3. 关闭加载器。

首先是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>

效果如下（主题为：'a'）：

当然，你可以调整$.mobile.loading('show', { ... }中的参数，实验各种不同的加载器效果。