Progressbar Widget

Categories: Widgets

Progressbar Widgetversion added: 1.6

Description: 显示一个确定的或不确定的进程状态。

QuickNavExamples

Options

Methods

Events

进度条被设计来显示进度的当前完成百分比。进度条通过 CSS 编码灵活调整大小，默认会缩放到适应父容器的大小。

一个确定的进度条只能在系统可以准确更新当前状态的情况下使用。一个确定的进度条不会从左向右填充，然后循环回到空 - 如果不能计算实际状态，则使用不确定的进度条以便提供用户反馈。

主题（Theming）

进度条部件（Progressbar Widget）使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用进度条指定的样式，则可以使用下面的 CSS class 名称：

  • ui-progressbar：进度条的外层容器。该元素会为不确定的进度条另外添加一个 ui-progressbar-indeterminate class。
    • ui-progressbar-value：该元素代表进度条的填充部分。
      • ui-progressbar-overlay：用于为不确定的进度条显示动画的覆盖层。

依赖（Dependencies）

其他注意事项（Additional Notes）:

  • 该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。

Options

disabledType: Boolean

Default: false
如果设置为 true，则禁用该 progressbar（进度条）。 Code examples:

初始化带有指定disabled选项的 progressbar（进度条）：

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

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

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

maxType: Number

Default: 100
progressbar（进度条）的最大值。
Code examples:

初始化带有指定max选项的 progressbar（进度条）：

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

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

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

valueType: Number or Boolean

Default: 0
progressbar（进度条）的进度值.
支持多个类型：
  • Number: 0 到 max之间的值.
  • Boolean:值可以设置为false 来创建一个不确定的progressbar（进度条）。
Code examples:

初始化带有指定value选项的 progressbar（进度条）：

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

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

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

Methods

destroy()Returns: jQuery (plugin only)

完全移除 progressbar（进度条） 功能。这会把元素返回到它的预初始化状态。
  • 该方法不接受任何参数。
Code examples:

调用 destroy 方法：

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

disable()Returns: jQuery (plugin only)

禁用 progressbar（进度条） 。
  • 该方法不接受任何参数。
Code examples:

调用 disable 方法：

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

enable()Returns: jQuery (plugin only)

启用 progressbar（进度条） 。
  • 该方法不接受任何参数。
Code examples:

调用 enable 方法：

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

option( optionName )Returns: Object

获取当前与指定的 optionName 关联的值。
  • optionName
    Type: String
    要获取值的选项的名称。
Code examples:

调用该方法：

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

option()Returns: PlainObject

获取一个包含键/值对的对象，键/值对表示当前 progressbar 选项哈希。
  • 该方法不接受任何参数。
Code examples:

调用该方法：

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

option( optionName, value )Returns: jQuery (plugin only)

设置与指定的 optionName 关联的 progressbar 选项的值。
  • optionName
    Type: String
    要设置的选项的名称。
  • value
    Type: Object
    要为选项设置的值。
Code examples:

调用该方法：

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

option( options )Returns: jQuery (plugin only)

为 progressbar（进度条） 设置一个或多个选项。
  • options
    Type: Object
    要设置的 option-value 对。
Code examples:

调用该方法：

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

value()Returns: Number or Boolean

获取progressbar（进度条）的当前值。
  • 该方法不接受任何参数。
Code examples:

调用该方法：

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

value( value )Returns: jQuery (plugin only)

设置progressbar（进度条）的当前值。
  • value
    Type: Number or Boolean
    用来设置的值。有效值的详细描述查看value 选项。
Code examples:

调用该方法：

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

widget()Returns: jQuery

返回一个 progressbar（进度条） 的jQuery对象。
  • 该方法不接受任何参数。
Code examples:

调用 widget 方法：

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

Events

change( event, ui )Type: progressbarchange

当 progressbar（进度条） 的值改变的时候触发该事件。

注意：ui 对象是空的，这里包含它是为了与其他事件保持一致性。

Code examples:

初始化带有指定 change回调的 progressbar（进度条）：

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

绑定一个事件监听器到 progressbarchange 事件：

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

complete( event, ui )Type: progressbarcomplete

当progressbar（进度条）达到最大值时触发该事件。

注意：ui 对象是空的，这里包含它是为了与其他事件保持一致性。

Code examples:

初始化带有指定complete回调的 progressbar（进度条）：

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

绑定一个事件监听器到 progressbarcomplete 事件：

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

create( event, ui )Type: progressbarcreate

当progressbar（进度条）被创建时触发该事件。

注意：ui 对象是空的，这里包含它是为了与其他事件保持一致性。

Code examples:

初始化带有指定create回调的 progressbar（进度条）：

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

绑定一个事件监听器到 progressbarcreate 事件：

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

Examples:

Example: 一个简单的 jQuery UI Progressbar

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="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="progressbar"></div>
 
<script>
$( "#progressbar" ).progressbar({
  value: 37
});
</script>
 
</body>
</html>

Demo:

Example: 一个简单的 jQuery UI 不确定的进度条（Indeterminate Progressbar）。

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="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="progressbar"></div>
 
<script>
$( "#progressbar" ).progressbar({
  value: false
});
</script>
 
</body>
</html>

Demo: