jQWidgets jqxLoader autoOpen 属性

简介

jQWidgets jqxLoader 是一个 jQuery UI 插件，它为网页加载过程中添加了一个 loading 效果，使用户可以知道加载进度和状态。jqxLoader 的 autoOpen 属性用于控制 loading 效果的自动开启和关闭。如果将该属性设置为 true，则加载时自动弹出 loading 效果，加载完成后自动关闭；如果将该属性设置为 false，则需要手动调用 show 和 hide 方法控制 loading 效果的开启和关闭。

用法示例

首先需要引入 jQWidgets 和 jQuery 库：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqxw/jqx.base.css">
<script src="https://cdn.jsdelivr.net/npm/jqxw/jqxcore.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqxw/jqxloader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

然后可以按照以下方式创建 jqxLoader 实例：

// 创建 jqxLoader 实例
var loader = $('#loader').jqxLoader({
    width: 100,
    height: 60,
    autoOpen: true // 设置 autoOpen 为 true，自动弹出 loading 效果
});

// 模拟加载过程
setTimeout(function() {
    // 加载完成后自动关闭 loading 效果
    loader.jqxLoader('close');
}, 3000);

在上述示例中，我们将 autoOpen 设置为 true，加载时自动弹出 loading 效果，加载完成后自动关闭。

如果将 autoOpen 设置为 false，则需要手动调用 show 和 hide 方法控制 loading 效果的开启和关闭：

// 创建 jqxLoader 实例
var loader2 = $('#loader2').jqxLoader({
    width: 100,
    height: 60,
    autoOpen: false // 设置 autoOpen 为 false，不自动弹出 loading 效果
});

// 模拟加载过程
loader2.jqxLoader('show'); // 手动弹出 loading 效果
setTimeout(function() {
    loader2.jqxLoader('hide'); // 手动关闭 loading 效果
}, 3000);

属性列表

autoOpen 为 jqxLoader 插件的属性，其它常用属性包括：

• width：loading 效果的宽度；
• height：loading 效果的高度；
• imagePosition：加载动画的位置（可选值有：top、center、bottom）；
• text：loading 效果的提示文字；
• textPosition：提示文字的位置（可选值有：bottom、top）；
• autoOpenDelay：自动弹出 loading 效果的延迟时间；
• isModal：是否以模态框的形式展示 loading 效果。

总结

jQWidgets jqxLoader 是一个简单易用的 loading 效果插件，常用于网页加载等耗时操作时使用。autoOpen 属性是其常用属性之一，用于控制 loading 效果的自动开启和关闭，能够大大简化开发过程。