srcmini本文概述
进度栏指定操作或进度的完成百分比。
进度栏可以分为两种类型：
- 确定进度条
- 不确定进度条
确定进度栏：
确定进度栏仅在系统可以准确更新当前状态的情况下使用。确定的进度条从不应该从左到右填充, 然后对于单个进程, 请循环回到空白。
不确定进度条：
不确定进度条用于提供用户反馈。
句法：
你可以以两种形式使用progressbar()方法：
$(selector, context).progressbar (options) Method$(selector, context).progressbar ("action", params) Method第一种方法
progressbar（选项）方法指定可以以进度条的形式管理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>立即测试
评论前必须登录！
注册