Jqueryui-progressbar

提供：Dev Guides
移動先:案内、検索

JqueryUI-プログレスバー

進行状況バーは、操作またはプロセスの完了率を示します。 進行状況バーを*確定的な進行状況バー*および*不確定な進行状況バー*に分類できます。

  • 進行状況バーの決定*は、システムが現在のステータスを正確に更新できる状況でのみ使用してください。 確定的な進行状況バーは、左から右に塗りつぶされてから、単一のプロセスで空にループバックすることはありません。

実際のステータスを計算できない場合は、*不確定プログレスバー*を使用してユーザーフィードバックを提供する必要があります。

jQueryUIは使いやすいプログレスバーウィジェットを提供します。このウィジェットを使用して、アプリケーションが要求された操作を実行するのが難しいことをユーザーに知らせることができます。 jQueryUIは、プログレスバーを作成するためのprogressbar（）メソッドを提供します。

構文

  • progressbar（）*メソッドは2つの形式で使用できます-
  • link：/jqueryui/jqueryui_progressbar＃progressbar_options [$（selector、context）.progressbar（options）]メソッド
  • link：/jqueryui/jqueryui_progressbar＃progressbar_methods [$（selector、context）.progressbar（ "action"、params）]メソッド

[progressbar_options]#

$（セレクター、コンテキスト）.progressbar（オプション）メソッド

_progressbar（options）_メソッドは、HTML要素をプログレスバーの形式で管理できることを宣言します。 _options_パラメーターは、進行状況バーの外観と動作を指定するオブジェクトです。

構文

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

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。 提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します- 

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

次の表は、この方法で使用できるさまざまな_オプション_を示しています-

Sr.No. Option & Description
1

disabled

このオプションを_true_に設定すると、進行状況バーが無効になります。 デフォルトでは、その値は false です。

オプション-無効

このオプションを_true_に設定すると、進行状況バーが無効になります。 デフォルトでは、その値は false です。

構文 

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

max

このオプションは、プログレスバーの最大値を設定します。 デフォルトでは、その値は 100 です。

オプション-最大

このオプションは、プログレスバーの最大値を設定します。 デフォルトでは、その値は 100 です。

構文 

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

value

このオプションは、プログレスバーの初期値を指定します。 デフォルトでは、その値は 0 です。

オプション-値

このオプションは、プログレスバーの初期値を指定します。 デフォルトでは、その値は 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 に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-

この例は、_progressbar（）_メソッドを使用したプログレスバーの作成を示しています。 これはデフォルトの確定プログレスバーです。

最大値と値の使用

次の例は、JqueryUIのprogressbar関数で2つのオプション 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 に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。 今、あなたは結果で遊ぶことができます-

ここでは、進行状況バーが右から左に塗りつぶされ、値が300に達すると停止することがわかります。

[progressbar_methods]#

$（セレクター、コンテキスト）.progressbar（ "action"、params）メソッド

_progressbar（ "action"、params）_メソッドは、満たされたパーセンテージの変更など、プログレスバーでアクションを実行できます。 アクションは、最初の引数の文字列として指定されます（例：満たされた割合を変更するための「値」）。 次の表で、渡すことができるアクションを確認してください。

構文

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

次の表は、このメソッドで使用できるさまざまな_アクション_を示しています-

シニア

アクションと説明

1

link：#action_destroy [destroy]

このアクションにより、要素の進行状況バー機能が完全に削除されます。 要素は初期化前の状態に戻ります。 このメソッドは引数を取りません。

アクション-破壊

このアクションにより、要素の進行状況バー機能が完全に削除されます。 要素は初期化前の状態に戻ります。 このメソッドは引数を取りません。

構文 

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

2

link：#action_destroy [destroy]

このアクションにより、要素の進行状況バー機能が完全に削除されます。 要素は初期化前の状態に戻ります。 このメソッドは引数を取りません。

アクション-破壊

このアクションにより、要素の進行状況バー機能が完全に削除されます。 要素は初期化前の状態に戻ります。 このメソッドは引数を取りません。

構文 

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

3

link：#action_disable [disable]

このアクションは、要素の進行状況バー機能を無効にします。 このメソッドは引数を取りません。

アクション-無効

このアクションは、要素の進行状況バー機能を無効にします。 このメソッドは引数を取りません。

構文 

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

4

link：#action_enable [enable]

このアクションにより、進行状況バー機能が有効になります。 このメソッドは引数を取りません。

アクション-有効

このアクションにより、進行状況バー機能が有効になります。 このメソッドは引数を取りません。

構文 

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

5

link：#action_optionName [option（optionName）]

このアクションは、指定された_optionName_に現在関連付けられている値を取得します。 ここで、_optionName_は文字列です。

アクション-option（optionName）

このアクションは、指定された_optionName_に現在関連付けられている値を取得します。 ここで、_optionName_は文字列です。

構文 

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

6

link：#action_option [option]

このアクションは、現在のプログレスバーオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。 このメソッドは引数を取りません。

アクション-オプション

このアクションは、現在のプログレスバーオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。 このメソッドは引数を取りません。

構文 

var options = $( ".selector" ).progressbar( "option" );

7

link：#action_optionName_value [option（optionName、value）]

このアクションは、指定された_optionName_に関連付けられたprogressbarオプションの値を設定します。

アクション-option（optionName、value）

このアクションは、指定された_optionName_に関連付けられたprogressbarオプションの値を設定します。 引数_optionName_は設定するオプションの名前であり、_value_はオプションに設定する値です。

構文 

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

8

link：#action_options [option（options）]

このアクションは、進行状況バーの1つ以上のオプションを設定します。 引数_options_は、設定するオプションと値のペアのマップです。

アクション-オプション（オプション）

このアクションは、進行状況バーの1つ以上のオプションを設定します。 引数_options_は、設定するオプションと値のペアのマップです。

構文 

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

9

link：#action_value [value]

このアクションは、_options.value_の現在の値、つまり進行状況バーの塗りつぶしの割合を取得します。

アクション-値

このアクションは、_options.value_の現在の値、つまり進行状況バーの塗りつぶしの割合を取得します。

構文 

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

10

link：#action_value_value [value（value）]

このアクションは、プログレスバーに入力されたパーセンテージに新しい値を指定します。 引数_value_は、数値またはブール値にすることができます。

アクション-値（値）

このアクションは、プログレスバーに入力されたパーセンテージに新しい値を指定します。 引数_value_は、数値またはブール値にすることができます。

構文 

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

11

link：#action_widget [widget]

このアクションは、プログレスバーを含むjQueryオブジェクトを返します。 このメソッドは引数を取りません。

アクション-ウィジェット

このアクションは、プログレスバーを含む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 に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も確認する必要があります-

無効な進行状況バー

===== Progress bar with max value set

=== Event Management on progress bar elements

前のセクションで見たprogressbar（options）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。 これらのイベントメソッドは以下のとおりです-

Sr.No. Event Method & Description
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_型です。

イベント-完了（イベント、UI）

>このイベントは、プログレスバーが最大値に達するとトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

構文 

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

create(event, ui)

このイベントは、progressbarが作成されるたびにトリガーされます。 ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-create（event、ui）

このイベントは、progressbarが作成されるたびにトリガーされます。 ここで、_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 に保存し、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も確認する必要があります-

ここでは、プログレスバーが変更されると、変更された値が出力され、イベントが完了すると「Loading Completed！」が表示されます。メッセージが表示されます。

link：/index [Tutorials Point、title = "Tutorials Point"]

  • リンク：/about/index [__私たちについて]
  • リンク：/about/about_terms_of_use [__利用規約]
  • リンク：/about/about_privacy [__プライバシーポリシー]
  • リンク：/about/faq [__ FAQ’s]
  • リンク：/about/about_helping [__ He​​lping]
  • リンク：/about/contact_us [__連絡先]

©Copyright 2019。 全著作権所有。

「https://www.finddevguides.com/index.php?title=Jqueryui-progressbar&oldid=2345」から取得
Powered by MediaWiki