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>