jQuery Mobile Loader loading() 方法(1)

📌 相关文章

📜 jQuery Mobile Loader loading() 方法(1)

📅 最后修改于: 2023-12-03 14:43:09.726000 🧑 作者: Mango

jQuery Mobile Loader `loading()` 方法

在使用 jQuery Mobile 开发移动应用时，我们通常需要在异步加载数据或进行长时间运算时，通过 UI 显示给用户操作正在进行中，这就需要用到 jQuery Mobile Loader 的 loading() 方法。

1. 方法说明

loading() 方法是 jQuery Mobile 提供的加载指示器，可以让用户知道当前操作正在进行中，以缓解用户等待的焦虑感。

2. 方法语法

$(selector).loading('show', options);
$(selector).loading('hide');

3. 方法参数

show：显示加载指示器；
hide：隐藏加载指示器；
selector：表示加载指示器要显示在哪个元素上。该元素必须是 jQuery 选择器；
options：配置选项，可以包含以下属性：
- textVisible：指示器文本是否可见，默认为 true；
- theme：指示器主题，可以是 jQuery Mobile 官方主题或自定义主题；
- text：指示器文本内容；
- textonly：是否只显示文本。

4. 使用示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Mobile Loader</title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body>
    <button id="demo">点击加载</button>
    <div id="loading"></div> <!-- 这里是显示指示器的元素 -->
    <script>
    $(document).ready(function(){
        $('#demo').click(function(){
            $('#loading').loading('show', {text: '加载中...'});
            setTimeout(function(){
                $('#loading').loading('hide');
            }, 2000);
        });
    });
    </script>
</body>
</html>

代码解释：

当用户点击"点击加载"按钮时，会显示"加载中..."的加载提示器；
然后，延迟 2 秒后，会隐藏加载指示器。

5. 总结

jQuery Mobile Loader 的 loading() 方法是一种简单有效的给用户提示操作正在进行中的方式。通过以上示例，你已经可以轻松上手使用这个方法了。祝你在使用 jQuery Mobile 开发移动应用时，更加得心应手！