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: 100
progressbar(进度条)的最大值。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: 0
progressbar(进度条)的进度值.支持多个类型:
- Number:
0
到max
之间的值. - 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 选项的值。
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(进度条)的当前值。
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>