ProgressBar 一個簡單好用的程式進度條套件
 |
| ProgressBar執行畫面 |
使用方法：
先載入必要的檔案
//Protytype框架檔案
<script type="text/javascript" src="js/prototype/prototype.js"></script>
//ProgressBar的主程式檔案
<script type="text/javascript" src="js/bramus/jsProgressBarHandler.js"></script>
然後只要在HTML元素中輸入有Class Name 等於 progressBar
<span class="progressBar" id="element">15%</span>
這樣基本的進度條就完成了
如果要不同樣式呈現效果可用以下JavaScript自訂外觀樣式
<script type="text/javascript">
document.observe('dom:loaded', function() {
//Prototype 的啟動時執行以下函式
manualPB = new JS_BRAMUS.jsProgressBar(
$('element'),52,{ //預設位置52%
//以下為全部可修改參數不再另外列表
animate : true, //是否以動畫方式移動%數 預設為true
showText : false,//是否顯示文字 預設為true
width : 154, //寬度
height : 11, //高度
boxImage : 'images/bramus/custom1_box.gif', //進度條外框的圖片
barImage : Array( //進度條的圖片 可以使用單張 以陣列方式表示%數不同會換圖片
'images/bramus/percentImage_back4.png',
'images/bramus/percentImage_back3.png',
'images/bramus/percentImage_back2.png',
'images/bramus/percentImage_back1.png'
),
onTick : function(pbObj) { //每次數值變動時會執行的函式
switch(pbObj.getPercentage()) {
case 98: alert('98%了'); break;
case 100: alert('100%完成了'); break;
}
return true;
}
}
);
}, false);
</script>
也可在WebApp進行中修改進度條進度
以下為進度條修改的方法
display(elementId, percentage, colorCode)
進度條的顯示
int colorCode: 1 = 綠色
int colorCode: 2 = 黃色
int colorCode: 3 = 橘色
int colorCode: 4 = 紅色
例如:myJsProgressBarHandler.display('element','10','4');
表示 ID為element的元素顯示為 10% 紅色
emptyProgress(elementId)
進度條顯示為0%
例如:myJsProgressBarHandler.emptyProgress('element');
表示ID為element顯示為0%
plus(elementId, percentage)
進度條加上指定%數
例如:myJsProgressBarHandler.plus('element','10');
表示ID為element加上10%
minus(elementId, percentage)
進度條減掉指定%數
例如:myJsProgressBarHandler.plus('element','10');
表示ID為element減掉10%
setProgress(elementId, percentage)
進度條加上指定%數
例如:myJsProgressBarHandler.plus('element','-10');
表示ID為element減掉10%
fillProgress(elementId, percentage)
進度條填滿到指定%數
例如:myJsProgressBarHandler.plus('element','50');
表示ID為element變成50%
作者網站：http://www.webappers.com/progressBar/
檔案大小：56.7 KB(包含範例和所有的程式碼)
檔案下載：http://www.bram.us/wordpress/wp-content/uploads/2008/11/jsprogressbarhandler_033.zip
檔案備份：下載
0 意見