Control.ProgressBar 百分比進度條實際執行情形

Control.ProgressBar 是一個基於百分比的進度條，可以設置為固定時間間隔執行程式或者是手動設置進度條進度，只需要建立一個DIV相對或者絕對位置，將 JavaScript 設置內部元件的寬度等等。

使用方法：
首先載入套件與框架程式碼
//使用 Google AJAX API 取得 Prototype 1.7.1.0 版本
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
//Control Progressbar 主程式碼
<script src="progressbar.js"></script>
在 Header 的地方加入 CSS 的程式碼
#progress_bar {
    width:102px;
    height:7px;
    border:1px solid #ccc;
    padding:0;
    margin:0;
    position:relative;
    background-image:url("/stylesheets/progress_bar.gif");
    //進度條的圖片
    background-repeat:repeat-x;
}
#progress_bar div {
    background-color:#fff;
}


HTML部分的程式碼寫入像上圖範例中程式
<div id="progress_bar"></div>
<div style="margin-top:10px;">
    <input type="button" value="Start" id="progress_bar_start"/>
    <input type="button" value="Stop" id="progress_bar_stop"/>
    <input type="button" value="Reset" id="progress_bar_reset"/>
    <input type="button" value="+ 5%" id="progress_bar_step_5"/>
    <input type="button" value="+ 25%" id="progress_bar_step_25"/>
</div>

最後在 JavaScript 的部分寫入啟動的程式碼
var progress_bar = new Control.ProgressBar('progress_bar',{
    interval: 0.15
});
$('progress_bar_stop').observe('click',progress_bar.stop.bind(progress_bar));
$('progress_bar_start').observe('click',progress_bar.start.bind(progress_bar));
$('progress_bar_reset').observe('click',progress_bar.reset.bind(progress_bar));
$('progress_bar_step_5').observe('click',progress_bar.step.bind(progress_bar,5));
$('progress_bar_step_25').observe('click',progress_bar.step.bind(progress_bar,25));

附上可修改的參數值

參數	預設	說明
afterChange	空函式	每次改變之後的所執行的函式
classNames	{active:'progress_bar_active', inactive:'progress_bar_inactive'}	執行中和一般狀態的 Class 名稱
interval	0.25	每次執行的間隔時間.以每秒為單位
max	100	進度條最大值
min	0	進度條最小值
step	1	每次進度幾格

可使用方法

方法	說明
initialize(元件[,選項(可選)])	初始化程式
poll(連結[,時間間隔,選項])	送給某一個連結以AJAX方式增減時間值
reset()	重新設定為 0 %
setProgress(數字)	設定進度條 % 數
start()	進度條開始跑
step(數字)	設定每次的間隔
stop()	停止進度條
active	時間是否正在啟動中
container	現在的物件名稱
progress	目前的進度條數字
afterChange(數字進度,啟動中)	每次改變進度條時啟動

作者網站：http://livepipe.net/control/progressbar
檔案大小：3.91 KB
檔案下載：https://github.com/beastridge/livepipe-ui/blob/master/src/progressbar.js
檔案備份：下載