jQuery UI Progressbar
jQuery UI Progressbar
Progressbar指定操作或进度的完成百分比。
进度栏可以分为两种类型:
确定进度条
不确定进度条
确定进度条:
"确定进度条"仅在系统可以准确更新当前状态的情况下使用。确定的进度条从不应该从左到右填充，然后循环回空以进行单个过程。
不确定进度栏:
不确定进度栏用于提供用户反馈。
语法:
您可以以两种形式使用progressbar()方法:
$(selector, context).progressbar(options)
$(selector, context).progressbar("action", params)
第一种方法
progressbar(options)方法指定可以以进度条的形式管理HTML元素。这里的"选项"参数是一个对象，用于指定进度条的外观和行为。
语法:
$(selector, context).progressbar(options);
您可以使用JavaScript对象同时使用一个或多个选项。如果有多个选项，则必须使用逗号将它们分开，如下所示:
$(selector, context).progressbar({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表。
| 选项 | 说明 |
| disabled | 如果将此选项设置为true，则它将禁用进度条。默认情况下，其值为false。 |
| max | 此选项用于设置进度条的最大值。默认情况下，其值为100。 |
| value | 此选项指定进度条的初始值。默认情况下，其值为0。 |
jQueryUI Progressbar()方法的示例:
让我们以一个简单的示例来演示进度条的功能，该功能不将任何参数传递给progressbar()方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background: blue;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#progressbar-1").progressbar({
value: 30
});
});
</script>
</head>
<body>
<div id="progressbar-1"></div>
</body>
</html>