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>
１週間でできる会員サイト「Limited」
必要最小限。だから分かりやすい。始めやすい。続けやすい。
限定① 安⼼・安全の会員制
限定② 必要最⼩限の機能
限定③ 独⾃機能を追加可能