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>