Progressbar Widget

Categories: Widgets

version 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(进度条):

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

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

// getter
var disabled = $( ".selector" ).progressbar( "option", "disabled" );

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

maxType: Number

Default: 100progressbar(进度条)的最大值。Code examples:

初始化带有指定max选项的 progressbar(进度条):

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

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

// getter
var max = $( ".selector" ).progressbar( "option", "max" );

// setter
$( ".selector" ).progressbar( "option", "max", 1024 );

valueType: Number or Boolean

Default: 0progressbar(进度条)的进度值.支持多个类型:

  • Number: 0max之间的值.
  • Boolean:值可以设置为false 来创建一个不确定的progressbar(进度条)。

Code examples:

初始化带有指定value选项的 progressbar(进度条):

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

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

// getter
var value = $( ".selector" ).progressbar( "option", "value" );

// setter
$( ".selector" ).progressbar( "option", "value", 25 );

Methods

destroy()Returns: jQuery (plugin only)

完全移除 progressbar(进度条) 功能。这会把元素返回到它的预初始化状态。

  • 该方法不接受任何参数。

Code examples:

调用 destroy 方法:

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

disable()Returns: jQuery (plugin only)

禁用 progressbar(进度条) 。

  • 该方法不接受任何参数。

Code examples:

调用 disable 方法:

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

enable()Returns: jQuery (plugin only)

启用 progressbar(进度条) 。

  • 该方法不接受任何参数。

Code examples:

调用 enable 方法:

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

option( optionName )Returns: Object

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

  • optionNameType: String要获取值的选项的名称。

Code examples:

调用该方法:

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

option()Returns: PlainObject

获取一个包含键/值对的对象,键/值对表示当前 progressbar 选项哈希。

  • 该方法不接受任何参数。

Code examples:

调用该方法:

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

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

设置与指定的 optionName 关联的 progressbar 选项的值。

  • optionNameType: String要设置的选项的名称。
  • valueType: Object要为选项设置的值。

Code examples:

调用该方法:

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

option( options )Returns: jQuery (plugin only)

为 progressbar(进度条) 设置一个或多个选项。

  • optionsType: Object要设置的 option-value 对。

Code examples:

调用该方法:

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

value()Returns: Number or Boolean

获取progressbar(进度条)的当前值。

  • 该方法不接受任何参数。

Code examples:

调用该方法:

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

value( value )Returns: jQuery (plugin only)

设置progressbar(进度条)的当前值。

  • valueType: Number or Boolean用来设置的值。有效值的详细描述查看value 选项。

Code examples:

调用该方法:

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

widget()Returns: jQuery

返回一个 progressbar(进度条) 的jQuery对象。

  • 该方法不接受任何参数。

Code examples:

调用 widget 方法:

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

Events

change( event, ui )Type: progressbarchange

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

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

Code examples:

初始化带有指定 change回调的 progressbar(进度条):

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

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

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

complete( event, ui )Type: progressbarcomplete

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

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

Code examples:

初始化带有指定complete回调的 progressbar(进度条):

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

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

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

create( event, ui )Type: progressbarcreate

当progressbar(进度条)被创建时触发该事件。

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

Code examples:

初始化带有指定create回调的 progressbar(进度条):

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

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

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

Examples:

Example: 一个简单的 jQuery UI Progressbar

<!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>

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

<!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>