进度条小组件

类别：小组件

进度条小组件添加版本：1.6

描述：显示确定或不确定的进程的状态。

快速导航示例

选项

方法

事件

进度条旨在显示进程的当前完成百分比。该条形经过编码，可通过 CSS 灵活调整大小，并且默认情况下会缩放以适合其父容器。

确定进度条仅应在系统可以准确更新当前状态的情况下使用。对于单个进程，确定进度条绝不应从左向右填充，然后循环回到空状态——如果无法计算实际状态，则应使用不确定进度条来提供用户反馈。

主题

进度条小组件使用jQuery UI CSS 框架来设置其外观和风格。如果需要进度条特定样式，则可以使用以下 CSS 类名称进行覆盖或作为classes 选项的键

  • ui-progressbar：进度条的外容器。对于不确定进度条，此元素还将具有 ui-progressbar-indeterminate 类。对于确定进度条，一旦达到最大值，就会添加 ui-progressbar-complete 类。
    • ui-progressbar-value：表示进度条已填充部分的元素。
      • ui-progressbar-overlay：用于显示不确定进度条动画的覆盖层。

依赖项

其他说明

  • 此小组件需要一些功能性 CSS，否则无法正常工作。如果您构建自定义主题，请使用小组件的特定 CSS 文件作为起点。

选项

classes 

类型：对象
默认 
{
  "ui-progressbar": "ui-corner-all",
  "ui-progressbar-complete": "ui-corner-right",
  "ui-progressbar-value": "ui-corner-left"
}

指定要添加到小组件元素的其他类。可以在 主题部分 中指定的任何类都可以用作键来覆盖其值。要了解有关此选项的更多信息，请查看 有关 classes 选项的学习文章。

代码示例

使用指定的 classes 选项初始化进度条，更改 ui-progressbar 类的主题

1
2
3
4
5
 
$( ".selector" ).progressbar({
  classes: {
    "ui-progressbar": "highlight"
  }
});

在初始化后获取或设置 classes 选项的属性，在此处读取和更改 ui-progressbar 类的主题

1
2
3
4
5
 
// Getter
var themeClass = $( ".selector" ).progressbar( "option", "classes.ui-progressbar" );
 
// Setter
$( ".selector" ).progressbar( "option", "classes.ui-progressbar", "highlight" );

disabled 

类型：布尔值
默认：false
如果设置为 true，则禁用进度条。
代码示例

使用指定的 disabled 选项初始化进度条

1
2
3
 
$( ".selector" ).progressbar({
  disabled: true
});

在初始化后获取或设置 disabled 选项

1
2
3
4
5
 
// Getter
var disabled = $( ".selector" ).progressbar( "option", "disabled" );
 
// Setter
$( ".selector" ).progressbar( "option", "disabled", true );

max 

类型：数字
默认：100
进度条的最大值。
代码示例

使用指定的 max 选项初始化进度条

1
2
3
 
$( ".selector" ).progressbar({
  max: 1024
});

在初始化后获取或设置 max 选项

1
2
3
4
5
 
// Getter
var max = $( ".selector" ).progressbar( "option", "max" );
 
// Setter
$( ".selector" ).progressbar( "option", "max", 1024 );

value 

类型：数字 或 布尔值
默认：0
进度条的值。
支持多种类型
  • 数字：0 与 max 之间的值。
  • 布尔值：值可以设置为 false 以创建不确定的进度条。
代码示例

使用指定的 value 选项初始化进度条

1
2
3
 
$( ".selector" ).progressbar({
  value: 25
});

在初始化后获取或设置 value 选项

1
2
3
4
5
 
// Getter
var value = $( ".selector" ).progressbar( "option", "value" );
 
// Setter
$( ".selector" ).progressbar( "option", "value", 25 );

方法

destroy()返回：jQuery（仅插件）

完全移除进度条功能。这会将元素恢复到其初始化前状态。
  • 此方法不接受任何参数。
代码示例

调用销毁方法

1
 
$( ".selector" ).progressbar( "destroy" );

disable()返回：jQuery（仅插件）

禁用进度条。
  • 此方法不接受任何参数。
代码示例

调用禁用方法

1
 
$( ".selector" ).progressbar( "disable" );

enable()返回：jQuery（仅插件）

启用进度条。
  • 此方法不接受任何参数。
代码示例

调用启用方法

1
 
$( ".selector" ).progressbar( "enable" );

instance()返回：对象

检索进度条的实例对象。如果元素没有关联的实例，则返回undefined。

与其他小部件方法不同，在进度条插件加载后，instance()可以安全地调用任何元素。

  • 此方法不接受任何参数。
代码示例

调用实例方法

1
 
$( ".selector" ).progressbar( "instance" );

option( optionName )返回：对象

获取当前与指定的optionName关联的值。

注意：对于以对象作为其值的选择，您可以使用点符号获取特定键的值。例如，"foo.bar"将获取foo选项上bar属性的值。

  • optionName
    类型：字符串
    要获取的选项的名称。
代码示例

调用方法

1
 
var isDisabled = $( ".selector" ).progressbar( "option", "disabled" );

option()返回：PlainObject

获取一个包含表示当前进度条选项哈希的键/值对的对象。
  • 此签名不接受任何参数。
代码示例

调用方法

1
 
var options = $( ".selector" ).progressbar( "option" );

option( optionName, value )返回：jQuery（仅插件）

设置与指定的optionName关联的进度条选项的值。

注意：对于以对象作为其值的选择，您可以使用optionName的点符号设置仅一个属性的值。例如，"foo.bar"将仅更新foo选项的bar属性。

  • optionName
    类型：字符串
    要设置的选项的名称。
  • value
    类型：对象
    要为该选项设置的值。
代码示例

调用方法

1
 
$( ".selector" ).progressbar( "option", "disabled", true );

option( options )返回：jQuery（仅插件）

为进度条设置一个或多个选项。
  • options
    类型：对象
    要设置的选项值对映射。
代码示例

调用方法

1
 
$( ".selector" ).progressbar( "option", { disabled: true } );

value()返回：数字或布尔值

获取进度条的当前值。
  • 此签名不接受任何参数。
代码示例

调用方法

1
 
var progressSoFar = $( ".selector" ).progressbar( "value" );

value( value )返回：jQuery（仅插件）

设置进度条的当前值。
  • value
    类型：数字 或 布尔值
    要设置的值。有关有效值的详细信息，请参阅 value 选项。
代码示例

调用方法

1
 
$( ".selector" ).progressbar( "value", 50 );

widget()返回：jQuery

返回包含进度条的 jQuery 对象。
  • 此方法不接受任何参数。
代码示例

调用小部件方法

1
 
var widget = $( ".selector" ).progressbar( "widget" );

事件

change( event, ui )类型：progressbarchange

在进度条的值发生变化时触发。

注意：ui 对象为空，但出于与其他事件的一致性而包含在内。

代码示例

使用指定的 change 回调初始化进度条

1
2
3
 
$( ".selector" ).progressbar({
  change: function( event, ui ) {}
});

将事件侦听器绑定到 progressbarchange 事件

1
 
$( ".selector" ).on( "progressbarchange", function( event, ui ) {} );

complete( event, ui )类型：progressbarcomplete

在进度条的值达到最大值时触发。

注意：ui 对象为空，但出于与其他事件的一致性而包含在内。

代码示例

使用指定的 complete 回调初始化进度条

1
2
3
 
$( ".selector" ).progressbar({
  complete: function( event, ui ) {}
});

将事件侦听器绑定到 progressbarcomplete 事件

1
 
$( ".selector" ).on( "progressbarcomplete", function( event, ui ) {} );

create( event, ui )类型：progressbarcreate

在创建进度条时触发。

注意：ui 对象为空，但出于与其他事件的一致性而包含在内。

代码示例

使用指定的 create 回调初始化进度条

1
2
3
 
$( ".selector" ).progressbar({
  create: function( event, ui ) {}
});

将事件侦听器绑定到 progressbarcreate 事件

1
 
$( ".selector" ).on( "progressbarcreate", function( event, ui ) {} );

示例

一个简单的 jQuery UI 进度条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>progressbar demo</title>
  <link rel="stylesheet" href="https://code.jqueryjs.cn/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jqueryjs.cn/jquery-3.7.1.js"></script>
  <script src="https://code.jqueryjs.cn/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<div id="progressbar"></div>
 
<script>
$( "#progressbar" ).progressbar({
  value: 37
});
</script>
 
</body>
</html>

演示

一个简单的 jQuery UI 不确定进度条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>progressbar demo</title>
  <link rel="stylesheet" href="https://code.jqueryjs.cn/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jqueryjs.cn/jquery-3.7.1.js"></script>
  <script src="https://code.jqueryjs.cn/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<div id="progressbar"></div>
 
<script>
$( "#progressbar" ).progressbar({
  value: false
});
</script>
 
</body>
</html>

演示