JqueryUI教程

JqueryUI - Progressbar

← 上一节 下一节 →

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

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

如果无法计算实际状态，则不确定进度条应该用于提供用户反馈.

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

语法

progressbar()方法可用于两种形式 :

  • $(selector, context).progressbar (options) 方法

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


$(selector, context).progressbar (options) Method方法

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

语法

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


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

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


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

Sr.No.选项&安培;描述
1disabled

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

选项 - 已停用

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

语法 

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

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

选项 - 最大

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

语法 

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

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

选项 - 值

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

语法 

 
 $(".selector").progletbar({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函数中两个选项值和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"以更改填充的百分比）。 请查看下表中可以传递的操作。

语法

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

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

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

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

Action - option( options )

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

Syntax

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

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

Action - value

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

Syntax

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

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

Action - value( value )

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

Syntax

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

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

Action - widget

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

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>

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

禁用进度条


进度条设置了最大值

进度条元素的事件管理

除了我们在前面部分中看到的progressbar(options)方法之外，JqueryUI还提供了针对特定事件触发的事件方法。 这些事件方法如下所列 

Event方法和描述

change(event, ui)

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

Event - change(event, ui)

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

Syntax

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

complete(event, ui)

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

Event - complete(event, ui)

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

Syntax

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

create(event, ui)

只要创建了进度条，就会触发此事件。 其中event是Event类型，ui是Object类型。

Event - create(event, ui)

只要创建了进度条，就会触发此事件。 其中event是Event类型，ui是Object类型。

Syntax

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

示例

以下示例演示了进度栏功能期间的事件方法用法。 此示例演示了事件的使用更改和完成。

<!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的标准浏览器中打开它，您还必须看到以下输出

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


← 上一节 下一节 →

相关菜鸟教程