jQuery-UI プログレスバー

jQuery-UI プログレスバー

基本



(1)プログレスバーの表示領域
<div id="progress1"> </div>
<script type="text/javascript">
$(function() {
  // (2)プログレスバーを生成
  $('#progress1').progressbar({
    value: 37,
    max: 150
  });
});
</script>

進捗を文字表示



(1)プログレスバーの表示領域
<div id="progress2">
  <div id="loading2"> </div>
</div>
(2)値の表示位置を調整
<style type="text/css">
  #loading2 {
    /*表示位置の絶対位置指定*/
    position: absolute;
    left: 50%;
  }
</style>
絶対表示については「CSS position」参照
<script type="text/javascript">
  $(function() {
    // (2)プログレスバーを生成
    $('#progress2').progressbar({
      value: 37,
      max: 150
    });
    // (3)現在の値(割合)を表示
    var per = $('#progress2').progressbar('value') / $('#progress2').progressbar('option', 'max');
    $('#loading2').text(Math.ceil(per * 100) + '%');
  });
</script>

動作デモ



(1)プログレスバーの表示領域
<div id="progress3">
  <div id="loading3"> </div>
</div>
(2)値の表示位置を調整
<style type="text/css">
  #loading3 {
    position: absolute;
    left: 50%;
  }
</style>
<script type="text/javascript">
  $(function(){
    var objP = $('#progress3');
    var objText = $('#loading3');
    
    objP.progressbar({
      value: 0,
      change: function(){
        objText.text(objP.progressbar('value') + '%');
      }
    });
    
    //0.1秒に1回、function(){~}を実行する
    var timer = setInterval(function(){
      var nowValue = objP.progressbar('value');
      //nowValue += 1 した値をプログレスバーに設定
      objP.progressbar('value', ++nowValue);
      if (nowValue >= 100){
        //本当は100になった時に時計を止める
        //clearInterval(timer);
        
        //デモ用。100になった時に値を0に。
        objP.progressbar('value', -100);
      }
    },100);
  });
</script>

前の記事

jQuery-UI スライダー