[jQuery UI] プログレスバーを実装する（Progressbar）

投稿日：2018年5月28日

jQueryUIでプログレスバーを実装するサンプルです。

サンプルソース

例）jQuery UIを使ったプログレスバーサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryUIプログレスバーサンプル</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script>
$(function(){
  //プログレスバー設定
  $("#pgb").progressbar({
    value: 0,
    max:100,
    change: function(){
      var v = $("#pgb").progressbar("value");
      $("#lbl").text(v + "%");
    },
    complete: function(){
      $("#lbl").text("完了しました");
    }
  });

  //カウントアップ
  $("#btn1").click(function(){
    var a = $("#pgb").progressbar("value");
    $("#pgb").progressbar("value", a+10);
  });

  //値を取得
  $("#btn2").click(function(){
    var x = $("#pgb").progressbar("value");
    alert("値は" + x + "%です。");
  });

  //クリア
  $("#btn3").click(function(){
    $("#pgb").progressbar("value", 0);
  });
});
</script>
</head>
<body>
  <div id="pgb"><div id="lbl">0%</div></div>
  <input type="button" id="btn1" value="カウントアップ">
  <input type="button" id="btn2" value="値取得">
  <input type="button" id="btn3" value="クリア">
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQueryUIプログレスバーサンプル</title>

$(function(){

//プログレスバー設定

$("#pgb").progressbar({

value: 0,

max:100,

change: function(){

var v = $("#pgb").progressbar("value");

$("#lbl").text(v + "%");

complete: function(){

$("#lbl").text("完了しました");

}

});

//カウントアップ

$("#btn1").click(function(){

var a = $("#pgb").progressbar("value");

$("#pgb").progressbar("value", a+10);

});

//値を取得

$("#btn2").click(function(){

var x = $("#pgb").progressbar("value");

alert("値は" + x + "%です。");

});

//クリア

$("#btn3").click(function(){

$("#pgb").progressbar("value", 0);

});

</script>

</head>

<body>

</body>

</html>

実行サンプル

上記サンプルの実行結果です。

解説

jQueryUI（Progressbar）公式ページ ⇒ https://jqueryui.com/progressbar/

執筆者：とら