jQuery Mobile Loader 小部件完整参考

jQuery Mobile Loader 小部件可以让您在页面中间显示一个加载指示器，以告诉用户正在进行某些操作。

使用方法

使用 jQuery Mobile Loader 小部件非常简单。只需在 HTML 页面中添加以下代码即可：

<div class="ui-loader"></div>

属性

主题颜色

您可以使用 data-theme 属性来更改加载指示器的主题颜色。

例如，要将加载指示器的主题颜色更改为红色：

<div class="ui-loader" data-theme="a"></div>

加载文本

您可以使用 data-text 属性来添加自定义加载文本。默认加载文本为 "loading"。

例如，要将加载文本更改为 "请稍等"：

<div class="ui-loader" data-text="请稍等"></div>

加载器类型

您可以使用 data-type 属性来更改加载指示器的类型。可用的加载器类型有 "default"、"circle" 和 "dots"。默认加载器类型为 "default"。

例如，要将加载器类型更改为 "circle"：

<div class="ui-loader" data-type="circle"></div>

JavaScript API

您还可以使用 JavaScript API 通过代码控制加载指示器。

显示加载指示器

要显示加载指示器，请使用以下代码：

$.mobile.loading('show');

隐藏加载指示器

要隐藏加载指示器，请使用以下代码：

$.mobile.loading('hide');

示例

以下代码演示如何在页面加载时显示加载指示器，并在 AJAX 完成时隐藏加载指示器：

$(document).on({
    ajaxStart: function() {
        $.mobile.loading('show');
    },
    ajaxStop: function() {
        $.mobile.loading('hide');
    }
});

结论

jQuery Mobile Loader 小部件是一个非常有用的工具，可让您在操作完成之前为用户提供反馈。它可以很容易地与其他 jQuery Mobile 小部件以及常规的 JavaScript 代码集成，使其非常灵活。