jQWidgets jqxLoader 完整参考

简介

jqxLoader是jQWidgets库的一部分，用于在数据加载期间显示加载器或进度条。

使用方法

导入

首先需要在html页面中导入相关的库文件和样式文件：

<!-- jQuery库 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- jQWidgets核心库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/7.0.0/jqxcore.js"></script>

<!-- jQWidgets样式文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/7.0.0/jqx.base.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/7.0.0/jqx.darkblue.css" />

<!-- jqxLoader依赖的核心库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/7.0.0/jqxprogressbar.js"></script>

加载器

基本使用

// 创建加载器实例
$("#loader").jqxLoader({
    width: 300,
    height: 60,
    text: "Loading...",
    autoOpen: true
});

以上代码会在ID为“loader”的元素中创建一个宽度为300、高度为60的加载器实例，并自动打开。

自定义样式

如果希望自定义加载器的样式，可以通过jqxLoader的CSS选项来设置CSS类：

// 设置CSS类
$("#loader").jqxLoader({
    css: "my-loader"
});

/* 自定义CSS类 */
.my-loader .jqx-loader-content {
    background-color: #ffa500;
    border-radius: 10px;
    color: #fff; 
}

手动控制

可以使用api手动控制加载器的打开和关闭：

// 打开
$("#loader").jqxLoader("open");

// 关闭
$("#loader").jqxLoader("close");

事件

jqxLoader提供了几个有用的事件，可以根据需要进行监听：

$("#loader").on("open", function(event) {
    console.log("加载器已经打开");
});

$("#loader").on("close", function(event) {
    console.log("加载器已经关闭");
});

$("#loader").on("valueChanged", function(event) {
    console.log("加载器的进度已经改变，当前值为：" + event.args.value);
});

进度条

基本使用

// 创建进度条实例
$("#progressbar").jqxProgressBar({
    width: 300,
    height: 30,
    value: 50
});

以上代码会在ID为“progressbar”的元素中创建一个宽度为300、高度为30、初始值为50的进度条实例。

手动控制

可以使用api手动控制进度条的值：

// 设置值
$("#progressbar").jqxProgressBar("val", 75);

// 增加值
$("#progressbar").jqxProgressBar("incrementValue", 10);

// 减少值
$("#progressbar").jqxProgressBar("decrementValue", 10);

自定义样式

如果希望自定义进度条的样式，可以通过jqxProgressBar的CSS选项来设置CSS类：

// 设置CSS类
$("#progressbar").jqxProgressBar({
    css: "my-progressbar"
});

/* 自定义CSS类 */
.my-progressbar .jqx-progressbar-value {
    background-color: #ffa500;
}

事件

jqxProgressBar也提供了几个有用的事件，可以根据需要进行监听：

$("#progressbar").on("valueChanged", function(event) {
    console.log("进度条的值已经改变，当前值为：" + event.args.value);
});

$("#progressbar").on("complete", function(event) {
    console.log("进度条已经完成");
});

总结

以上是jQWidgets jqxLoader的使用方法和相关注意事项，开发者们可以根据实际需求进行选择和定制，以达到更好的效果。