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.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>

讓我們將上述程式碼儲存在一個名為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.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>

讓我們將上述程式碼儲存在一個名為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.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>

讓我們將上述程式碼儲存在一個名為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.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>

讓我們將上述程式碼儲存在一個名為progressbarexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出：

在這裡您可以看到，隨著進度條的變化，它的更改值被打印出來，並且在 complete 事件發生時，“載入完成！”訊息顯示。

列印頁面
上一頁
下一頁
廣告
© . All rights reserved.