jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery UI の利用 > jQuery UI - プログレスバー

jQuery UI - プログレスバー

スポンサーリンク

処理の進捗状況を示す場合には、プログレスバーを表示した方が親切である場合があります。

最近の傾向としては Web の場合はサーバー側で行う処理時間の長い処理の途中経過を示すのは、現在何パーセントという風に表示するのではなく、 "Please wait" 程度にとどめておきグルグルまわるアイコンを表示。ビジネスロジックとして、現在何パーセント(例えばソーシャルサイトやデートサイトのプロフィール入力状況など) という進捗を示したい場合に、プログレスバーを表示、という場合が多いように思います。

いずれにせよ、上手にプログレスバーも使いたいものです。

jQuery プログレスバーウィジェットの基本的な使用方法

プログレスバーを使うのは簡単です。多くの他のウィジェットと同様に、div 要素に対して progressbar() を呼び出せば OK です。

デフォルトで最小値 0、最大値 100 で、その値には value を通してアクセスできます。

ここでは初期値として 5 を設定して、ボタンをクリックする度に値をインクリメントしています。

$(document).ready( function() {

  var v = 5;

  $('#pbdemo1').progressbar({
    value: v
  });

  $('#button1').click(function(){
    $('#pbdemo1').progressbar('value', ++v);
  });

});
スポンサーリンク
ホーム > jQuery UI の利用 > jQuery UI - プログレスバー
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール
スポンサーリンク

© 2011-2013 Keisuke Oyama jQuery 入門