
スキルアップ
2022.07.05
jQuery
2018.06.21
jQuery UI の progressbar を利用すると、ダウンロード時やファイル転送時などに 作業の進捗状況を表すような プログレスバー を作成することができます。
今回は、progressbar の使用方法について、解説いたします。
jQuery UI の progressbar を使用して プログレスバーを作成します。
スタートボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script type="text/javascript"> <!-- $(function(){ $("#wkBtn").click(function(){ $("#wkPg").progressbar({ value: 0, change: function() { $("#wkText").text($("#wkPg").progressbar("value") + "%"); }, complete: function() { $("#wkText").text($("#wkPg").progressbar("value") + "% 完了"); } }); var id = setInterval(function() { var val = $("#wkPg").progressbar("value"); $("#wkPg").progressbar("value", ++val); if (val >= 100) {clearInterval(id)} }, 10); }); }); //--> </script> <div style="background-color:lightblue; padding:20px 20px 10px;"> <input type="button" id="wkBtn" value="スタート"> <div id="wkPg"></div> <div id="wkText" style="bottom:10px;"></div> </div>
HTML 要素を指定して progressbar を呼び出し、中に表示したい内容を記述します。
change イベントは、プログレスバーの値が変更された時に発生するイベントで、complete イベントは、プログレスバーの値が最大値に達した時に発生するイベントです。
そして、setInterval メソッドで、10ミリ秒おきにプログレスバーの値を更新しています。
jQuery UI の導入についてはjQuery【 jQuery UI 】UI の導入と使用方法をご参照下さい。
上のサンプルでは オプション「 value 」を設定していますが、progressbar には、以下のようなオプションがあります。
disabled | プログレスバーを無効化するか否かを指定 初期値:false |
---|---|
max | プログレスバーの最大値を指定 初期値:0 |
value | プログレスバーの値を指定 初期値:0 |
上のサンプルでは イベントの「 change 」「 complete 」を使用していますが、progressbar には、以下のようなイベントがあります。
change( event, ui ) | プログレスバーの値が変更された時に実行する |
---|---|
complete( event, ui ) | プログレスバーの値が最大値に達した時に実行する |
create( event, ui ) | プログレスバーが生成された時に実行する |
progressbar には、以下のようなメソッドがあります。
destroy() | プログレスバーの機能を完全に削除 「 $(“#wkPg”).progressbar(“destroy”); 」と記述 |
---|---|
disable() | プログレスバーを無効化 |
enable() | プログレスバーを有効化 |
option(optionName) | optionNameに指定したオプションの現在の値を取得 |
option() | オプションの各キーと値がペアとなったオブジェクトを返す |
option(optionName, value) | 引数のoptionNameに指定したオプションに値を設定 |
option(options) | 各キーと値がペアとなったオブジェクトをオプションに指定 |
value() | プログレスバーの現在の値を取得 |
value(value) | プログレスバーの現在の値を指定 |
widget() | プログレスバーを含めたjQueryオブジェクトを返す |
jQuery UI の progressbar について、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
スキルアップ
2022.07.05
卒業生インタビュー
2022.07.01
スキルアップ
2022.07.01
スキルアップ
2022.07.01
スキルアップ
2022.06.27
スキルアップ
2022.06.24
INTERNOUS,inc. All rights reserved.