JqueryUI-プログレスバー

プログレスバーは、操作またはプロセスの完了率を示します。プログレスバーを次のように分類できますdeterminate progress bar そして indeterminate progress bar。

Determinate progress barシステムが現在のステータスを正確に更新できる状況でのみ使用する必要があります。確定したプログレスバーが左から右にいっぱいになることはなく、1つのプロセスで空にループバックする必要があります。

実際のステータスを計算できない場合は、 indeterminate progress bar ユーザーフィードバックを提供するために使用する必要があります。

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

構文

ザ・ progressbar() メソッドは2つの形式で使用できます-

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

  • $（selector、context）.progressbar（ "action"、params）メソッド

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

プログレスバー（オプション）メソッドは、HTML要素は、プログレスバーの形で管理することができることを宣言します。オプションのパラメータは、プログレスバーの外観と動作を指定するオブジェクトです。

構文

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

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

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

次の表に、この方法で使用できるさまざまなオプションを示します。

シニア番号 オプションと説明
1 無効

このオプションをtrueに設定すると、プログレスバーが無効になります。デフォルトでは、その値はfalse。

Option - disabled

このオプションをtrueに設定すると、プログレスバーが無効になります。デフォルトでは、その値はfalse。

Syntax

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

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

Option - max

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

Syntax

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

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

Option - value

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

Syntax

$( ".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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

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

最大値と値の使用

次の例は、2つのオプションの使用法を示しています values そして max JqueryUIのプログレスバー関数で。

<!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.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

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

$（selector、context）.progressbar（ "action"、params）メソッド

プログレスバー（「アクション」は、paramsは）この方法は、このような充填率を変化させるように、プログレスバーのアクションを実行することができます。アクションは、最初の引数の文字列として指定されます（たとえば、入力されたパーセンテージを変更するための「値」）。次の表で、渡すことができるアクションを確認してください。

構文

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

次の表に、この方法で使用できるさまざまなアクションを示します。

シニア番号 アクションと説明
1 破壊

このアクションにより、要素のプログレスバー機能が完全に削除されます。要素は初期化前の状態に戻ります。このメソッドは引数を受け入れません。

Action - destroy

このアクションにより、要素のプログレスバー機能が完全に削除されます。要素は初期化前の状態に戻ります。このメソッドは引数を受け入れません。

Syntax

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

このアクションにより、要素のプログレスバー機能が完全に削除されます。要素は初期化前の状態に戻ります。このメソッドは引数を受け入れません。

Action - destroy

このアクションにより、要素のプログレスバー機能が完全に削除されます。要素は初期化前の状態に戻ります。このメソッドは引数を受け入れません。

Syntax

$( ".selector" ).progressbar("destroy");
3 無効にする

このアクションは、要素のプログレスバー機能を無効にします。このメソッドは引数を受け入れません。

Action - disable

このアクションは、要素のプログレスバー機能を無効にします。このメソッドは引数を受け入れません。

Syntax

$( ".selector" ).progressbar("disable");
4 有効にする

このアクションにより、プログレスバー機能が有効になります。このメソッドは引数を受け入れません。

Action - enable

このアクションにより、プログレスバー機能が有効になります。このメソッドは引数を受け入れません。

Syntax

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

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

Action - option( optionName )

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

Syntax

var isDisabled = $( ".selector" ).progressbar( "option", "disabled" );
6 オプション

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

Action - option

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

Syntax

var options = $( ".selector" ).progressbar( "option" );
7 option（optionName、value）

このアクションは、指定されたoptionNameに関連付けられたプログレスバーオプションの値を設定します。

Action - option( optionName, value )

このアクションは、指定されたoptionNameに関連付けられたプログレスバーオプションの値を設定します。引数optionNameは設定するオプションの名前であり、valueはオプションに設定する値です。

Syntax

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

このアクションは、プログレスバーの1つ以上のオプションを設定します。引数optionsは、設定するオプションと値のペアのマップです。

Action - option( options )

このアクションは、プログレスバーの1つ以上のオプションを設定します。引数optionsは、設定するオプションと値のペアのマップです。

Syntax

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

このアクションは、options.valueの現在の値、つまり進行状況バーの塗りつぶしのパーセンテージを取得します。

Action - value

このアクションは、options.valueの現在の値、つまり進行状況バーの塗りつぶしのパーセンテージを取得します。

Syntax

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

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

Action - value( value )

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

Syntax

$( ".selector" ).progressbar( "value", 50 );
11 ウィジェット

このアクションは、プログレスバーを含む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をサポートする標準のブラウザで開くと、次の出力も表示される必要があります-

無効なプログレスバー


最大値が設定されたプログレスバー

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved