JavaScript + Ajax 実践サンプル集 - 進捗状況を表示する

進捗状況を表示する

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryのprogressbar()プラグインを利用して進捗状況を棒グラフで表示します。サンプルの[star]ボタンをクリックすると進捗グラフを表示します。 [stop]をクリックすると停止します。[reset]をクリックすると進捗グラフを初期化します。

このサンプルを編集して試してみる

$("#progressbar").reportprogress(++pct);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Progress bar </title>
  <link href="jQuery/progressBar/progressBar.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/progressBar/progressbar.js" type="text/javascript"></script>
  <script type="text/javascript">

var pct = 0;
    var handle = 0;

function update() {
      $("#progressbar").reportprogress(++pct);
      if (pct == 100) {
        clearInterval(handle);
        $("#run").val("start");
        pct = 0;
      }
    }

$(function() {

$("#run").click( function() {
			    if (this.value == "start") {
			      handle = setInterval("update()", 100);
			      this.value = "stop";
			    } else {
			      clearInterval(handle);
			      this.value = "start";
			    }
	    });

$("#reset").click(function() {
        pct = 0;
        $("#progressbar").reportprogress(0);
      });

});
    
  </script>

</head>
<body>
  <div id="wrap">
    
    <div id="progressbar"></div>
    <input type='button' id='run' value='start' />
    <input type='button' id='reset' value='reset' />
   
  </div>
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

進捗状況を表示する

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

進捗状況を表示する

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!