jQuery UI进度栏

简介

jQuery UI进度栏是一个 jQuery UI 插件，它提供了一个用户友好的进度展示栏。它可以用于展示任务的进度和显示加载进度等。它完全可定制和易于使用，可以使用CSS和JavaScript来实现自定义的外观和功能。

特点

• 支持动画效果
• 支持水平和垂直模式
• 支持自定义颜色、高度、宽度和边框样式
• 支持多种事件回调函数，包括进度值改变、完成、重置等
• 支持自动更新进度值，可以设置刷新频率

使用

引入

<!-- CSS文件 -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<!-- JS文件 -->
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

HTML结构

<div id="progressbar"></div>

初始化

$("#progressbar").progressbar({
  value: 37
});

配置项

• value: 进度值，默认为0，取值范围为0~100。
• disabled: 是否禁用，默认false。
• max: 进度最大值，默认为100。
• orientation: 进度栏方向，默认为水平(horizontal)，可选值为"horizontal"和"vertical"。
• color: 进度颜色，默认为"green"。
• height: 进度栏高度，默认为16像素。
• width: 进度栏宽度，默认为自适应。
• showValue: 是否显示进度值，默认为true。
• refreshInterval: 进度刷新频率，单位毫秒，默认为0（不刷新）。
• complete: 进度完成时的回调函数。
• change: 进度改变时的回调函数。
• create: 进度栏创建时的回调函数。

方法

• value(value): 设置或获取进度值。
• option(optionName): 获取指定配置项的值。
• option(optionName, value): 设置指定配置项的值。

实例

基本用法

$("#progressbar").progressbar({
  value: 50
});

禁用进度栏

$("#progressbar").progressbar({
  disabled: true
});

自定义颜色和高度

.custom-progressbar .ui-progressbar-value {
  background-color: red;
  height: 30px;
}

$("#progressbar").progressbar({
  value: 50,
  color: "custom-progressbar",
  height: 30
});

垂直进度栏

$("#progressbar").progressbar({
  value: 50,
  orientation: "vertical"
});

结语

jQuery UI进度栏是一个强大而易于使用的插件，它为开发人员提供了一个方便快捷的方法来展示任务的进度和显示加载进度等。如果你正在开发一个与进度展示有关的应用程序，那么这个插件绝对应该是你的首选。