jQuery Mobile Loader 类选项

jQuery Mobile是一个基于jQuery开发的移动端UI框架，为了提高用户体验，jQuery Mobile提供了Loader类选项用于显示页面加载指示器，以让用户知道页面正在加载中。

Loader类选项的作用

Loader类选项用于在页面加载过程中显示一个指示器，以告知用户页面正在加载中，提高用户体验。

Loader类选项的基本用法

在使用Loader类选项之前，我们需要引入jQuery库和jQuery Mobile库：

<!-- 引入jQuery库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入jQuery Mobile库 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>

然后，我们就可以在页面加载过程中显示一个指示器。例如：

<div class="ui-loader">
    <span class="ui-icon ui-icon-loading spin"></span>
</div>

以上代码将会在页面加载时显示一个旋转的加载图标。

Loader类选项的高级用法

除了默认的旋转加载图标，jQuery Mobile还提供了一些其他的Loader类选项用于自定义加载指示器的样式，例如：

1. Themed Loader

<div class="ui-loader ui-corner-all ui-body-a ui-loader-verbose">
    <span class="ui-icon ui-icon-bars"></span>
    <h1>Loading...</h1>
</div>

以上代码将会显示一个带有标题的加载指示器，它的样式是和页面主题一致的。

2. Text Only Loader

<div class="ui-loader ui-corner-all ui-body-a ui-loader-textonly">
    <span class="ui-icon ui-icon-loading"></span>
    <h1>Loading...</h1>
</div>

以上代码将会显示一个只有文本的加载指示器，没有图标。

3. Inline Loader

<div class="ui-loader ui-corner-all ui-body-a ui-loader-inline">
    <span class="ui-icon ui-icon-loading"></span>
</div>

以上代码将会显示一个内联的加载指示器，它适用于在按钮上显示正在加载的状态。

总结

Loader类选项用于显示页面加载指示器，以提高用户体验。它提供了多种样式选择，可以根据实际情况进行配置。