JqueryUI - 进度条

进度条指示操作或流程的完成百分比。我们可以将进度条分为确定进度条和不确定进度条。

确定进度条仅适用于系统能够准确更新当前状态的情况。对于单个进程，确定的进度条不应该从左到右填充，然后循环回空。

如果无法计算实际状态，则应使用不确定的进度条来提供用户反馈。

jQueryUI 提供了一个易于使用的进度条小部件，我们可以使用它来让用户知道我们的应用程序正在努力执行请求的操作。jQueryUI 提供了progressbar() 方法来创建进度条。

句法

Progressbar ()方法可以以两种形式使用 -

$(选择器,上下文).progressbar(选项)方法

ProgressBar (Options)方法声明可以以进度条的形式管理HTML元素。options参数是一个指定进度条的外观和Behave的对象。

句法

$(选择器, 上下文).progressbar (选项);

您可以使用 Javascript 对象一次提供一个或多个选项。如果要提供多个选项，那么您将使用逗号分隔它们，如下所示 -

$(选择器, 上下文).progressbar({选项1: 值1, 选项2: 值2..... });

下表列出了可以与此方法一起使用的不同选项-

先生。 选项和说明
1 残疾人

当此选项设置为true时，将禁用进度条。默认情况下它的值为false。

Option - disabled

This option when set to true disables the progress bars. By default its value is false.

Syntax

$( ".selector" ).progressbar({ disabled: true });
2 最大限度

此选项设置进度条的最大值。默认情况下其值为100。

Option - max

This option sets the maximum value for a progress bar. By default its value is 100.

Syntax

$( ".selector" ).progressbar({ max: 500});
3 价值

该选项指定进度条的初始值。默认情况下其值为0。

Option - value

This option specifies the initial value of the progress bar. By default its value is 0.

Syntax

$( ".selector" ).progressbar({ value: 20 });

以下部分将向您展示进度条功能的一些工作示例。

默认功能

以下示例演示了进度条功能的简单示例，未向Progressbar()方法传递任何参数。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://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: #cedc98;
            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>

让我们将上面的代码保存在 HTML 文件progressbarexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出。现在，您可以使用结果 -

此示例显示使用progressbar()方法创建进度条。这是默认的确定进度条。

使用最大值和值

下面的例子演示了JqueryUI的progressbar函数中两个选项values和max的用法。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://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: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>
      
      <script>
         $(function() {
            var progressbar = $( "#progressbar-2" );
            $( "#progressbar-2" ).progressbar({
               value: 30,
               max:300
            });
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            setTimeout( progress, 3000 );
         });
      </script>
   </head>
   
   <body>
      <div id = "progressbar-2"></div>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件progressbarexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出。现在，您可以使用结果 -

在这里您可以看到进度条从右向左填充，并在值达到 300 时停止。

$(selector, context).progressbar("action", params) 方法

ProgressBar ("action", params)方法可以对进度条执行操作，例如更改填充的百分比。该操作被指定为第一个参数中的字符串（例如，用于更改填充百分比的“值”）。查看下表中可以通过的操作。

句法

$(选择器, 上下文).progressbar("action", params);;

下表列出了可以与此方法一起使用的不同操作-

先生。 动作与描述
1 破坏

此操作完全删除元素的进度条功能。元素返回到其初始化前的状态。此方法不接受任何参数。

Action - destroy

This action removes the progress bar functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.

Syntax

$( ".selector" ).progressbar("destroy");
2 破坏

此操作完全删除元素的进度条功能。元素返回到其初始化前的状态。此方法不接受任何参数。

Action - destroy

This action removes the progress bar functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.

Syntax

$( ".selector" ).progressbar("destroy");
3 禁用

此操作会禁用元素的进度条功能。此方法不接受任何参数。

Action - disable

This action disables the progress bar functionality of an element. This method does not accept any arguments.

Syntax

$( ".selector" ).progressbar("disable");
4 使能够

此操作启用进度条功能。此方法不接受任何参数。

Action - enable

This action enables the progress bar functionality. This method does not accept any arguments.

Syntax

$( ".selector" ).progressbar("enable");
5 选项（选项名称）

此操作检索当前与指定optionName关联的值。其中optionName是一个字符串。

Action - option( optionName )

This action retrieves the value currently associated with specified optionName. Where optionName is a String.

Syntax

var isDisabled = $( ".selector" ).progressbar( "option", "disabled" );
6 选项

此操作获取一个对象，其中包含表示当前进度条选项哈希的键/值对。此方法不接受任何参数。

Action - option

This action gets an object containing key/value pairs representing the current progressbar options hash. This method does not accept any arguments.

Syntax

var options = $( ".selector" ).progressbar( "option" );
7 选项（选项名称，值）

此操作设置与指定optionName关联的进度条选项的值。

Action - option( optionName, value )

This action sets the value of the progressbar option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.

Syntax

$( ".selector" ).progressbar( "option", "disabled", true );
8 选项（选项）

此操作为进度条设置一个或多个选项。参数options是要设置的选项值对的映射。

Action - option( options )

This action sets one or more options for the progress bars. The argument options is a map of option-value pairs to be set.

Syntax

( ".selector" ).progressbar( "option", { disabled: true } );
9 价值

此操作检索options.value的当前值，即进度条中的填充百分比。

Action - value

This action retrieves the current value of options.value, that is, the percentage of fill in the progress bar.

Syntax

$( ".selector" ).progressbar("value");
10 值（值）

此操作指定进度条中填充的百分比的新值。参数值可以是数字或布尔值。

Action - value( value )

This action specifies a new value to the percentage filled in the progress bar. The argument value can be a Number or Boolean.

Syntax

$( ".selector" ).progressbar( "value", 50 );
11 小部件

此操作返回一个包含进度条的 jQuery 对象。此方法不接受任何参数。

Action - widget

This action returns a jQuery object containing the progressbar. This method does not accept any arguments.

Syntax

$( ".selector" ).progressbar("widget");

例子

现在让我们看一个使用上表中的操作的示例。以下示例演示了disable()和 option( optionName, value ) 方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://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: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
      </style>
      
      <script>
         $(function() {
            $( "#progressbar-3" ).progressbar({
               value: 30
            });
            $( "#progressbar-3" ).progressbar('disable');
            $( "#progressbar-4" ).progressbar({
               value: 30
            });
            var progressbar = $( "#progressbar-4" );
            $( "#progressbar-4" ).progressbar( "option", "max", 1024 );
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            setTimeout( progress, 3000 );
         });
      </script>
   </head>
   
   <body>
      <h3>Disabled Progressbar</h3>
      <div id = "progressbar-3"></div><br>
      <h3>Progressbar with max value set</h3>
      <div id = "progressbar-4"></div>
   </body>
</html>

Let us save the above code in an HTML file progressbarexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

Disabled Progress bar


Progress bar with max value set

Event Management on progress bar elements

In addition to the progressbar (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −

Sr.No. Event Method & Description
1 change(event, ui)

This event is triggered whenever the value of progress bar changes. Where event is of type Event, and ui is of type Object.

Event - change(event, ui)

This event is triggered whenever the value of progress bar changes. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).progressbar({
   change: function( event, ui ) {}
});
2 complete(event, ui)

This event is triggered when the progressbar reaches the maximumm value. Where event is of type Event, and ui is of type Object.

Event - complete(event, ui)

>This event is triggered when the progressbar reaches the maximumm value. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).progressbar({
   complete: function( event, ui ) {}
});
3 create(event, ui)

This event is triggered whenever progressbar is created. Where event is of type Event, and ui is of type Object.

Event - create(event, ui)

This event is triggered whenever progressbar is created. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).progressbar({
   create: function( event, ui ) {}
});

Example

The following example demonstrates the event method usage during progressbar functionality. This example demonstrates the use of events change and complete.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI ProgressBar functionality</title>
      <link href = "https://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: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
            font-weight: bold;
         }
         .progress-label {
            position: absolute;
            left: 50%;
            top: 13px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #fff;
         }
      </style>
      
      <script>
         $(function() {
            var progressbar = $( "#progressbar-5" );
            progressLabel = $( ".progress-label" );
            $( "#progressbar-5" ).progressbar({
               value: false,
               change: function() {
                  progressLabel.text( 
                     progressbar.progressbar( "value" ) + "%" );
               },
               complete: function() {
                  progressLabel.text( "Loading Completed!" );
               }
            });
            function progress() {
               var val = progressbar.progressbar( "value" ) || 0;
               progressbar.progressbar( "value", val + 1 );
               if ( val < 99 ) {
                  setTimeout( progress, 100 );
               }
            }
            setTimeout( progress, 3000 );
         });
      </script>
   </head>
   
   <body>
      <div id = "progressbar-5">
         <div class = "progress-label">
            Loading...
         </div>
      </div>
   </body>
</html>

Let us save the above code in an HTML file progressbarexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

Here you can see as the progressbar changes its changed value is printed and upon complete event the "Loading Completed!" message displays.