jslb_progressbar001.js
3.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
//--jslb----------------------------------------------------------------------------
// 最新情報 : http://jsgt.org/mt/01/
// 著作権表示義務無し。商用利用、改造、自由。連絡不要。
////
// jsgt_progressBar プログレスバー オブジェクト
//
// @author Toshirou Takahashi http://jsgt.org/mt/archives/01/000543.html
// @version 0.01
// @license 著作権表示義務無し。商用利用、改造、自由。連絡不要。
// @sample oj = new jsgt_progressBar() //DIVを自動生成する場合
// @sample oj = new jsgt_progressBar('nloading') //既存のDIV名で指定する場合
// @param id プログレス用DIVのID名(デフォルト_progress)
// @method oj.prog_start() プログレススタート
// @method oj.prog_stop() プログレススタート
// @property oj.progress.div バーを出力するdivオブジェクト
// @property oj.progress.div.style スタイルオブジェクト(CSSを利用できます)
// @property oj.progress.prog_bar バーのキャラクタ(デフォルトは'|')
// @property oj.progress.prog_interval プログレスインターバル(デフォルトは50 1/1000秒単位)
// @property oj.progress.prog_count_max プログレスバーカウンターMax(デフォルトは18)
// @return プログレスバーオブジェクトのインスタンス
// @see http://jsgt.org/ajax/
//
if(document.getElementsByTagName('BODY').length==0)document.write('<body>')//ダミーのbodyタグ
function jsgt_progressBar(id)
{
this.progress = setProgressBars(id) ;
function setProgressBars(id)
{
// プログレスバーを出力するdiv
if(!id){
id = "_progress";
var creprgDIV = document.createElement("DIV") ;
this.div = document.body.appendChild(creprgDIV) ;
this.div.setAttribute("id",id) ;
this.div.style.position ="absolute";
this.div.style.top ="0px";
this.div.style.left ="0px";
this.div.style.width ="0px";
this.div.style.height ="0px";
} else {
this.div = document.getElementById(id)
}
// プログレスバー用DIVのデフォルト値(インスタンスで上書き変更できます)
this.div.style.color = 'red'; //バーの色
this.div.style.margin = '0px'; //バーのマージン
this.div.style.padding = '4px'; //バーパディング
// プログレスバーのデフォルト値
this.prog_bar= '|'; //バーのキャラクタ
this.prog_interval= 50; //プログレス インターバル 1/1000秒単位
this.prog_count =0; //プログレスカウンター初期値
this.prog_count_max =18; //プログレスバー カウンターMax
var prog_array= []; //バーのタイマーIDを格納する配列
//プログレス スタート
this.prog_start = function ()
{
//サイズを与えることで表示する
this.div.style.height ="12px";
this.div.style.width ="auto";
prog_array.unshift(
setInterval(
//プログレスバー出力
function ()
{
if(this.prog_count >= this.prog_count_max){
this.div.innerHTML = '' ; //初期化
this.prog_count =0;
}
this.div.innerHTML += this.prog_bar ;
this.prog_count++ ;
}
, this.prog_interval
)
)
}
//プログレス ストップ
this.prog_stop = function ()
{
clearInterval(prog_array[0])
//停止したタイマーを削除
prog_array.shift()
//消去
this.div.style.width ="0px";
this.div.style.height ="0px";
this.div.innerHTML = '' ;
}
return this
}
}