📌  相关文章
📜  JqueryUI-进度栏

📅  最后修改于: 2020-10-23 07:21:19             🧑  作者: Mango

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

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

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

jQueryUI提供了一个易于使用的进度条小部件，我们可以使用该小部件让用户知道我们的应用程序难以执行所请求的操作。 jQueryUI提供了progressbar（）方法来创建进度条。

句法

progressbar（）方法可以两种形式使用-

$（选择器，上下文）.progressbar（选项）方法

progressbar（选项）方法声明可以以进度条的形式管理HTML元素。 options参数是一个对象，用于指定进度条的外观和行为。

句法

$(selector, context).progressbar (options);

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

$(selector, context).progressbar({option1: value1, option2: value2..... });

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

Sr.No. Option & Description
1 disabled

This option when set to true disables the progress bars. By default its value is 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 max

This option sets the maximum value for a progress bar. By default its value is 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 value

This option specifies the initial value of the progress bar. By default its value is 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功能示例，未将任何参数传递给progressbar（）方法。


      jQuery UI ProgressBar functionality

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

本示例显示了使用progressbar（）方法创建进度条。这是默认的确定进度栏。

使用最大值和值

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


      jQuery UI ProgressBar functionality

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

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

$（选择器，上下文）.progressbar（“动作”，参数）方法

进度条（“操作”，参数）方法可以对进度条执行操作，例如更改填充百分比。该操作在第一个参数中指定为字符串（例如，“ value”以更改填充百分比）。在下表中检查可以传递的操作。

句法

$(selector, context).progressbar ("action", params);;

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

Sr.No. Action & Description
1 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.

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 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.

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 disable

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

Action – disable

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

Syntax

$( ".selector" ).progressbar("disable");
4 enable

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

Action – enable

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

Syntax

$( ".selector" ).progressbar("enable");
5 option( optionName )

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

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 option

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

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 option( optionName, value )

This action sets the value of the progressbar option associated with the specified 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 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.

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 value

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

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 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.

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 widget

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

Action – widget

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

Syntax

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

Example

Now let us see an example using the actions from the above table. The following example demonstrates the use of disable() and option( optionName, value ) methods.



   
      
      jQuery UI ProgressBar functionality
      
      
      
      
      
      
      
   
   
   
      
Disabled Progressbar

      


      
Progressbar with max value set

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.



   
      
      jQuery UI ProgressBar functionality
      
      
      
      
      
      
      
   
   
   
      

         

            Loading...

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.