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>