jQWidgets jqxProgressBar 完整参考

简介

jQWidgets jqxProgressBar 是一个基于 JavaScript 的 UI 组件，用于在 Web 应用程序中显示进度条。可以自定义进度条的颜色、宽度、高度、动画方式等。

特性

• 支持水平和垂直进度条
• 支持动画效果
• 可自定义进度条颜色、宽度和高度等
• 可设置提示语
• 支持自定义 CSS 样式

安装

可以通过以下方式安装：

• 下载源代码并引入相应的 js 和 css 文件
• 使用 npm 安装： $ npm install jqwidgets

使用

1. HTML 结构

在页面中添加一个空的 div 标签，用于容纳进度条。

<div id="progressBar"></div>

2. CSS 样式

为了展示进度条，必须为 $("#progressBar") 标签添加样式。

#progressBar {
  margin-top: 30px;
  margin-bottom: 30px;
  width: 500px;
  height: 30px;
}

3. JS 代码

// 实例化进度条
$('#progressBar').jqxProgressBar({
  width: '400px',
  height: '30px',
  value: 50,
  showText: true
});

// 修改进度条的值
$('#progressBar').val(75);

API 参考

属性

• value：设置或获取进度条的值，取值范围为 0 - 100。
• width：设置或获取进度条的宽度。
• height：设置或获取进度条的高度。
• orientation：设置或获取进度条的方向，可选值为 'horizontal' 和 'vertical'。
• showText：设置或获取是否显示进度条的百分比文本。

方法

• val(value)：设置或获取进度条的值，参数 value 可传入数值类型，返回当前进度条的值。
• destroy()：销毁进度条。

事件

• create：当进度条被创建时触发的事件。
• complete：当进度条完成时触发的事件。

示例

// 创建一个水平进度条
$('#horizontalProgressBar').jqxProgressBar({
  width: '400px',
  height: '30px'
});

// 修改水平进度条的值
$('#horizontalProgressBar').val(75);

// 创建一个垂直进度条
$('#verticalProgressBar').jqxProgressBar({
  width: '30px',
  height: '200px',
  orientation: 'vertical'
});

// 修改垂直进度条的值
$('#verticalProgressBar').val(25);

更多示例请查看官方文档：jQWidgets jqxProgressBar。