登录
目录
当前位置： 首页 > 文档资料 > jQueryUI 入门教程 >

Progressbar（Progressbar）

优质
小牛编辑
130浏览
2023-12-01

进度条表示操作或过程的完成百分比。 我们可以将进度条分类为determinate progress bar和indeterminate progress bar 。

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

如果无法计算实际状态，则应使用indeterminate progress bar来提供用户反馈。

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

语法 (Syntax)

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

  • $（selector，context）.progressbar（options）方法

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

$（selector，context）.progressbar（options）方法

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

语法 (Syntax)

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

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

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

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

Sr.No.选项和说明
1disabled

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

Option - disabled

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

Syntax

$( ".selector" ).progressbar({ disabled: true });
2max

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

Option - max

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

Syntax

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

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

Option - value

此选项指定进度条的初始值。 默认情况下，其值为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()方法创建进度条。 这是默认的确定进度条。

使用max和value

以下示例演示了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)方法可以对进度条执行操作，例如更改填充百分比。 该操作在第一个参数中指定为字符串（例如，“value”以更改填充的百分比）。 请查看下表中可以传递的操作。

语法 (Syntax)

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

下表列出了此方法可以使用的不同actions -

Sr.No.行动和描述
1destroy

此操作完全删除元素的进度条功能。 元素返回到pre-init状态。 此方法不接受任何参数。

Action - destroy

此操作完全删除元素的进度条功能。 元素返回到pre-init状态。 此方法不接受任何参数。

Syntax

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

此操作完全删除元素的进度条功能。 元素返回到pre-init状态。 此方法不接受任何参数。

Action - destroy

此操作完全删除元素的进度条功能。 元素返回到pre-init状态。 此方法不接受任何参数。

Syntax

$( ".selector" ).progressbar("destroy");
3disable

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

Action - disable

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

Syntax

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

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

Action - enable

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

Syntax

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

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

Action - option( optionName )

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

Syntax

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

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

Action - option

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

Syntax

var options = $( ".selector" ).progressbar( "option" );
7option( optionName, value )

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

Action - option( optionName, value )

此操作设置与指定的optionName关联的progressbar选项的值。 参数optionName是要设置的选项的名称， value是要为该选项设置的值。

Syntax

$( ".selector" ).progressbar( "option", "disabled", true );
8option( options )

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

Action - option( options )

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

Syntax

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

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

Action - value

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

Syntax

$( ".selector" ).progressbar("value");
10value( value )

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

Action - value( value )

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

Syntax

$( ".selector" ).progressbar( "value", 50 );
11widget

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

Action - widget

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

Syntax

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

例子 (Example)

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

让我们将上述代码保存在HTML文件progressbarexample.htm ，并在支持javascript的标准浏览器中打开它

禁用进度条

最大值设置的进度条

进度条元素的事件管理

除了我们在前面几节中看到的progressbar（options）方法之外，JqueryUI还提供了为特定事件触发的事件方法。 这些事件方法如下 -

Sr.No.事件方法和描述
1change(event, ui)

只要进度条的值发生更改，就会触发此事件。 其中event是Event类型， ui是Object类型。

Event - change(event, ui)

只要进度条的值发生更改，就会触发此事件。 其中event是Event类型， ui是Object类型。

Syntax

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

当进度条达到maximumm值时会触发此事件。 其中event是Event类型， ui是Object类型。

Event - complete(event, ui)

>当进度条达到maximumm值时，将触发此事件。 其中event是Event类型， ui是Object类型。

Syntax

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

每当创建进度条时都会触发此事件。 其中event是Event类型， ui是Object类型。

Event - create(event, ui)

每当创建进度条时都会触发此事件。 其中event是Event类型， ui是Object类型。

Syntax

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

例子 (Example)

以下示例演示了进度栏功能期间的事件方法用法。 此示例演示了事件的使用change和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>

让我们将上述代码保存在HTML文件progressbarexample.htm ，并在支持javascript的标准浏览器中打开它

在这里您可以看到进度条更改其打印的更改值，并在完成事件时“加载完成！” 消息显示。

免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn