jQuery 在jQuery Mobile中显示页面加载旋转器

在本文中，我们将介绍如何在使用jQuery Mobile进行Ajax调用时，在页面上显示一个加载旋转器。

阅读更多：jQuery 教程

使用jQuery Mobile加载旋转器

在jQuery Mobile中，可以使用$.mobile.loading方法来显示和隐藏页面加载旋转器。该方法接受一个参数对象，可以设置旋转器的样式和显示文本。

以下是显示旋转器的示例代码：

// 显示加载旋转器
$.mobile.loading("show", {
    text: "加载中", // 文本显示在旋转器上方
    textVisible: true, // 显示文本
    theme: "b", // 旋转器样式
    html: "" // 设置html内容
});

当要隐藏旋转器时，可以使用以下代码：

// 隐藏加载旋转器
$.mobile.loading("hide");

示例

让我们假设有一个使用jQuery Mobile的网页，其中有一个按钮，点击后会进行Ajax调用。在Ajax调用期间，我们需要显示一个加载旋转器。

首先，在HTML中添加一个按钮和一个加载旋转器的容器：

<button id="ajaxButton">Ajax调用</button>
<div id="spinnerContainer"></div>

然后，在JavaScript中，通过监听按钮的点击事件来进行Ajax调用，并在调用开始和结束时显示和隐藏加载旋转器：

$("#ajaxButton").on("click", function() {
    // 显示加载旋转器
    $.mobile.loading("show", {
        text: "加载中",
        textVisible: true,
        theme: "b",
        html: ""
    });

    // 发起Ajax调用
    $.ajax({
        url: "example.com/ajax",
        method: "GET",
        success: function(data) {
            // 处理返回的数据
            console.log(data);
        },
        error: function() {
            // 处理错误
            console.error("Ajax调用失败");
        },
        complete: function() {
            // 隐藏加载旋转器
            $.mobile.loading("hide");
        }
    });
});

当用户点击按钮时，旋转器将显示在按钮上方，直到Ajax调用完成。

总结

在本文中，我们介绍了如何在使用jQuery Mobile进行Ajax调用时，在页面上显示一个加载旋转器。通过使用$.mobile.loading方法，我们可以轻松地控制旋转器的显示和隐藏，从而提高用户体验。使用加载旋转器可以让用户知道数据正在加载，避免让用户感到页面无响应。这是一个简单而强大的功能，在开发移动应用和响应式网页时非常有用。希望本文对你的学习和项目开发有所帮助！