jQuery Mobile 加载器 show() 方法

在移动设备上，数据加载可能需要花费一些时间，为了提高用户体验，我们可以在加载数据时使用jQuery Mobile的加载器来提示用户目前正在进行数据加载。

show()方法允许我们在移动设备上显示加载器。

语法

$.mobile.loading( 'show', {
    text: '加载中',
    textVisible: true,
    theme: 'a',
    html: ''
});

参数

• text：加载器中要显示的文本。
• textVisible：是否显示加载器中的文本。默认为 true。
• theme：加载器主题。可以选择 a、b、c、d 或 e，但默认为 a。
• html：可选的HTML字符串，将在加载器中显示。

示例

以下代码演示如何使用show()方法在移动设备上显示加载器：

$( document ).on( "click", ".load-data-btn", function() {
    $.mobile.loading( "show", {
        text: "正在加载数据...",
        textVisible: true,
        theme: "a",
        html: ""
    });
    
    $.ajax({
        url: "example.com/data",
        success: function( result ) {
            $.mobile.loading( "hide" );
            // 处理返回结果
        },
        error: function() {
            $.mobile.loading( "hide" );
            // 处理错误信息
        }
    });
});

在上面的示例中，我们首先在点击 load-data-btn按钮后显示加载器，然后使用Ajax加载数据。如果加载成功，则隐藏加载器并处理返回结果。如果发生错误，则隐藏加载器并处理错误信息。

结论

通过使用jQuery Mobile的 show()方法，我们可以为移动设备上的数据加载添加一个漂亮的加载器，从而提高用户体验。