jQuery UI进度栏 


jQuery UI进度栏

进度栏指定操作或进度的完成百分比。

进度栏可以分为两种类型:

  • 确定进度条
  • 不确定进度条

确定进度栏:

确定进度栏仅在系统可以准确更新当前状态的情况下使用。确定的进度条从不应该从左到右填充,然后对于单个进程,请循环回到空白。

不确定进度栏:

不确定进度条用于提供用户反馈。

句法:

您可以以两种形式使用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..... });

以下是可与该方法一起使用的不同选项的列表。

Option Description
disabled If you set this option to true then it disables the progress bars. By default its value is false.
max This option is used to set the maximum value for a progress bar. By default its value is 100.
value This option specifies the initial value of the progress bar. By default its value is 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="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://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>
0



error: 内容受到保护 !!