JqueryUI 进度条

创建于 2024-12-03 / 16
字体： [默认] [大] [更大]

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

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

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

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

语法

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

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

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

语法

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

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

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

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

序号 选项 & 说明
1 disabled

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

Option - disabled

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

语法

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

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

Option - max

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

语法

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

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

Option - value

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

语法

$( ".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 的使用

下面的例子演示了两个选项values和max在JqueryUI的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() {
            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);;

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

序号 操作 & 说明
1 destroy

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

Action - destroy

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

语法

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

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

Action - destroy

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

语法

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

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

Action - disable

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

语法

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

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

Action - enable

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

语法

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

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

Action - option( optionName )

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

语法

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

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

Action - option

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

语法

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

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

Action - option( optionName, value )

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

语法

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

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

Action - option( options )

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

语法

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

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

Action - value

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

语法

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

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

Action - value( value )

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

语法

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

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

Action - widget

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

语法

$( ".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 的标准浏览器中打开它，您应该看到以下输出 −

禁用进度条


Progress bar with max value set

进度条元素的事件管理

除了我们在前面部分看到的进度条（选项）方法之外，JqueryUI 还提供了针对特定事件触发的事件方法。 下面列出了这些事件方法 −

序号 事件方法 & 说明
1 change(event, ui)

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

事件 - change(event, ui)

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

语法

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

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

事件 - complete(event, ui)

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

语法

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

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

事件 - create(event, ui)

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

语法

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

示例

以下示例演示了进度条功能期间的事件方法用法。 此示例演示事件 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 的标准浏览器中打开它，您应该看到以下输出 −

在这里，您可以看到随着进度条的变化，它的变化值被打印出来，并且在完成事件后显示"加载完成！" 消息显示。


0 人点赞过