jqueryui时间插件_jQueryUI Progressbar插件

jqueryui时间插件

We have discussed about different jQuery UI plugins like datepicker, accordion and autocomplete in the previous posts. We will discuss about another interesting plugin in this post, the Progressbar plugin

在先前的文章中，我们讨论了不同的jQuery UI插件，例如datepicker ， 手风琴和自动完成 。 我们将在本文中讨论另一个有趣的插件， Progressbar插件。

The progressbar is designed to indicate the percentage of completeness for a process. jQuery UI provides a plugin to incorporate this functionality in your applications. We can classify progressbar into two types, determinate and indeterminate . We use determinate progressbar in our application if the actual status can be calculated otherwise indeterminate progressbar is used.

进度条旨在指示流程的完整性百分比。 jQuery UI提供了一个插件来将此功能集成到您的应用程序中。 我们可以将progressbar分为两种： 确定的和不确定的 。 如果可以计算实际状态，我们将在应用程序中使用确定进度条，否则将使用不确定进度条。

内容 (Contents)

• Progressbar Plugin Options
  进度栏插件选项
• Progressbar Plugin Methods
  进度栏插件方法
• Progressbar Plugin Events
  进度栏插件事件
• Progressbar Plugin in Action
  进度栏插件的使用

进度栏插件选项 (Progressbar Plugin Options)

In this section, we will discuss about available options to customize the progressbar plugin. We have used many of these options in the Progressbar plugin in Action section.

在本节中，我们将讨论自定义progressbar插件的可用选项。 我们在“操作”部分的“ 进度条”插件中使用了许多这些选项。

Options	Syntax	Description
disabled	$( “.selector” ).progressbar({ disabled: true });	Setting this option to true disables the progressbar.
max	$( “.selector” ).progressbar({ max: 1024 });	This option denotes the maximum value of the progressbar.
value	$( “.selector” ).progressbar({ value: 25 });	Integer or Boolean value of the progressbar. Integer value between zero max and indeterminate progressbar can be created if the boolean value is set to false.

选件	句法	描述
残障人士	$（“ .selector”）.progressbar（{disable：true}）;	将此选项设置为true将禁用进度条。
最高	$（“ .selector”）.progressbar（{max：1024}）;	此选项表示进度条的最大值。
值	$（“ .selector”）.progressbar（{value：25}）;	进度条的整数或布尔值。 如果布尔值设置为false，则可以创建零最大值和不确定进度条之间的整数值。

The above table briefly describes the available options to customize the progressbar plugin.

上表简要描述了可用于自定义progressbar插件的选项。

进度栏插件方法 (Progressbar Plugin Methods)

In this section, we will discuss about different methods associated with jQueryUI progressbar plugin. We have used many of these methods in the Progressbar plugin in Action section.

在本节中，我们将讨论与jQueryUI progressbar插件关联的不同方法。 我们在“操作”部分的“ 进度条”插件中使用了许多方法。

Methods	Usage	Description
destroy()	$( “.selector” ).progressbar( “destroy” );	This method will completely remove the progressbar functionality.
disable()	$( “.selector” ).progressbar( “disable” );	This method is used to disable the progressbar functionality.
enable()	$( “.selector” ).progressbar( “enable” );	This method enables the progressbar functionality.
instance()	$( “.selector” ).progressbar( “instance” );	This method is used to get the progressbar’s instance object
option( optionName, value )	$( “.selector” ).progressbar( “option”, “disabled”, true );	This method is used to set the value of the progressbar option associated with the optionName.
value()	$( “.selector” ).progressbar( “value”);	This method is used to get the value of the progressbar.
widget()	$( “.selector” ).progressbar( “widget” );	This method will return a jQuery object which contains the progressbar.

方法	用法	描述
破坏（）	$（“ .selector”）.progressbar（“ destroy”）;	此方法将完全删除进度条功能。
disable（）	$（“ .selector”）.progressbar（“禁用”）;	此方法用于禁用进度栏功能。
enable（）	$（“ .selector”）.progressbar（“启用”）;	此方法启用进度条功能。
instance（）	$（“ .selector”）.progressbar（“ instance”）;	此方法用于获取进度条的实例对象
option（optionName，value）	$（“ .selector”）.progressbar（“ option”，“ disabled”，true）;	此方法用于设置与optionName关联的progressbar选项的值。
值（）	$（“ .selector”）.progressbar（“值”）;	此方法用于获取进度栏的值。
小部件（）	$（“ .selector”）.progressbar（“ widget”）;	此方法将返回一个包含进度条的jQuery对象。

The above table briefly describes the different methods used to customize the progressbar plugin.

上表简要描述了用于自定义progressbar插件的不同方法。

进度栏插件事件 (Progressbar Plugin Events)

In this section, we will discuss about different events associated with jQueryUI progressbar plugin. We have used many of these events the Progressbar plugin in Action section.

在本节中，我们将讨论与jQueryUI progressbar插件相关的不同事件。 我们在“操作”部分中使用了许多此类事件Progressbar插件 。

Events	Usage	Description
change( event, ui )	$( “.selector” ).progressbar({,change: function( event, ui ) {}});	This event is fired when the value is changed and executes the callback function.
complete( event, ui )	$( “.selector” ).progressbar({,complete: function( event, ui ) {}});	This event is fired when the value of the progressbar reaches it’s maximum.
create( event, ui )	$( “.selector” ).progressbar({,create: function( event, ui ) {}});	This event is fired when the progressbar is created.

大事记	用法	描述
更改（事件，用户界面）	$（“ .selector”）.progressbar（{，change：function（event，ui）{}}）;	更改值并执行回调函数时将触发此事件。
complete（event，ui）	$（“ .selector”）.progressbar（{，complete：function（event，ui）{}}）;	当进度栏的值达到最大值时会触发此事件。
create（event，ui）	$（“ .selector”）.progressbar（{，create：function（event，ui）{}}）;	创建进度条时将触发此事件。

The above table briefly describes the events associated with progressbar plugin.

上表简要描述了与progressbar插件相关的事件。

进度栏插件的使用 (Progressbar Plugin in Action)

In this section, we will try different examples to explore the uses of jQueryUI Progressbar plugin.

在本节中，我们将尝试不同的示例来探索jQueryUI Progressbar插件的用法。

默认功能 (Default Functionality)

The following example demonstrates the default functionality of a determinate progress bar. In this example, you can see an integer value is specified to demonstrate the progressbar of a determinate process.

以下示例演示了确定进度条的默认功能。 在此示例中，您可以看到指定了一个整value来演示确定进程的进度条。

progressbar-determinate.html

progressbar-determinate.html

<!doctype html>
<html>
<head>
  <title>jQuery UI Progressbar - Default Determinate</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <script>
  $(function() {
    $( "#progressbar" ).progressbar({
      value: 60
    });
  });
  </script>

</head>
<body>
<div id="progressbar"></div>
</body>
</html>

You will see the following output in browser.

您将在浏览器中看到以下输出。

The following example demonstrates the default functionality of a indeterminate progress bar. In this example, we set the value to false to demonstrate progressbar of an indeterminate process.

下面的示例演示了不确定进度条的默认功能。 在此示例中，我们将value设置为false以演示不确定过程的进度条。

progressbar-indeterminate.html

progressbar-indeterminate.html

<!doctype html>
<html>
<head>
  <title>jQuery UI Progressbar - Default Indeterminate</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <script>
  $(function() {
    $( "#progressbar" ).progressbar({
      value: false
    });
  });
  </script>

</head>
<body>
<div id="progressbar"></div>
</body>
</html>

You will see the following output in your browser.

您将在浏览器中看到以下输出。

演示地址

带有自定义标签的进度栏 (Progressbar with Custom Label)

The following example demonstrates the progressbar plugin with custom label.

以下示例演示了带有自定义标签的progressbar插件。

progressbar-customlabel.html

progressbar-customlabel.html

<!doctype html>
<html>
<head>
  <title>jQuery UI Progressbar - Custom Label</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <style>
.ui-progressbar{
	position: relative;
}  
.progress-label {
	position: absolute;
	left: 50%;
	top: 4px;
	font-weight: bold;
	text-shadow: 1px 1px 0 #fff;
}
</style>

  <script>
 $(function() {
    var progressbar = $( "#progress-bar" ),
      progressLabel = $( ".progress-label" );
 
    progressbar.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 + 2 );
 
      if ( val < 99 ) {
        setTimeout( progress, 90 );
      }
    }
 
    setTimeout( progress, 2500 );
  });
  </script>

</head>
<body>
<div id="progress-bar"><div class="progress-label">Loading...</div></div>
</body>
</html>

You will see the following output in the browser.

您将在浏览器中看到以下输出。

演示地址

In this example, you can see the use of change and complete events. I hope you understood the basic concepts of
在此示例中，您可以看到change和complete事件的使用。 我希望您了解 progressbar plugin and you can try using all the options, methods and events mentioned in this post. Progressbar插件的基本概念，并且可以尝试使用本文中提到的所有选项，方法和事件。

That’s all for now and you will see more jQuery plugins in the coming posts.

到此为止，您将在接下来的文章中看到更多的jQuery插件。

翻译自: https://www.journaldev.com/5831/jqueryui-progressbar-plugin

jqueryui时间插件