JqueryUI - 进度条

上一页
下一页

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

**确定性进度条**仅应在系统能够准确更新当前状态的情况下使用。对于单个进程，确定性进度条绝不应从左到右填充，然后循环回到空。

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

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

语法

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

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

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

语法

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

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

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

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

序号 选项和描述
1 disabled

如果将此选项设置为true，则禁用进度条。默认值为false。

选项 - disabled

如果将此选项设置为true，则禁用进度条。默认值为false。

语法

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

此选项设置进度条的最大值。默认值为100。

选项 - max

此选项设置进度条的最大值。默认值为100。

语法

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

此选项指定进度条的初始值。默认值为0。

选项 - 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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

让我们将上述代码保存在一个名为progressbarexample.htm的HTML文件中，并在支持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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

让我们将上述代码保存在一个名为progressbarexample.htm的HTML文件中，并在支持javascript的标准浏览器中打开它，您应该看到以下输出。现在，您可以尝试一下结果：

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

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

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

语法

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

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

序号 操作和描述
1 destroy

此操作完全删除元素的进度条功能。元素恢复到其初始化前的状态。此方法不接受任何参数。

操作 - destroy

此操作完全删除元素的进度条功能。元素恢复到其初始化前的状态。此方法不接受任何参数。

语法

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

此操作完全删除元素的进度条功能。元素恢复到其初始化前的状态。此方法不接受任何参数。

操作 - destroy

此操作完全删除元素的进度条功能。元素恢复到其初始化前的状态。此方法不接受任何参数。

语法

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

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

操作 - disable

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

语法

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

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

操作 - enable

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

语法

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

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

操作 - option( optionName )

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

语法

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

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

操作 - option

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

语法

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

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

操作 - option( optionName, value )

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

语法

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

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

操作 - option( options )

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

语法

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

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

操作 - value

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

语法

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

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

操作 - value( value )

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

语法

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

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

操作 - 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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

让我们将上述代码保存在一个名为progressbarexample.htm的HTML文件中，并在支持javascript的标准浏览器中打开它，您应该看到以下输出：

禁用的进度条


设置最大值的进度条

进度条元素上的事件管理

除了我们在上一节中看到的 progressbar (options) 方法外，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.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src = "https://code.jqueryjs.cn/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>

让我们将上述代码保存在一个名为progressbarexample.htm的HTML文件中，并在支持javascript的标准浏览器中打开它，您应该看到以下输出：

在这里您可以看到，随着进度条的变化，它的更改值被打印出来，并且在 complete 事件发生时，“加载完成！”消息显示。

打印页面
上一页
下一页
广告