ProgressBar是一款基於jQuery開發進度條外掛，它的優點是：使用程式碼簡潔，可輕鬆定製它的外觀；當頁面請求耗時較長，需要使用者等待時使用，如檔案上傳和大圖片，多資料載入時，可新增外掛，以增加使用者的體驗。

       ProgressBar外掛在Images資料夾中對應6張圖片，其中1張是背景色圖片，另外5張為自定義的5種進度顏色圖片。這5張圖片都由長度相等的兩個部分組成，前部分用於顯示所完成的進度值，後部分用於顯示餘下的進度值，後部分用於顯示餘下的進度值，通過不同的顏色進行區分。

進度條外掛ProgressBar的使用：

（1）外掛檔案：

       Js-8-9/jquery.ProgressBar.js

（2）下載地址：

       http://t.wits.sg/jquery-progress-bar/

（3）功能描述：

       在頁面中增加一個ID號為"pb"的<p>元素，編寫Javascript程式碼將該元素與進度條件相繫結，分別顯示使用不同引數呼叫時的頁面效果。

（4）實現程式碼：

<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Js-8-10/jquery.progressbar.js"></script>

<style type="text/css">
    body{font-size:13px}
    h3,p{padding:0px;margin:0px}
</style>

<script type="text/javascript">
    $(function() {
        $("#pb").progressBar();    //繫結初始化
        /*$("#pb").progressBar(68,{
            barImage:'images/progressbg_orange.gif',
            showText:false
        });//改變進度條顯示的圖片顏色*/
        /*$("#pb").progressBar(68,{
            max:'100',
            textFormat:'fraction',
            callback:function(data) {
                if (data.running_value == data.value){
                    alert("上傳成功");
                }
            }
        });//呼叫回撥函式*/
        /*$("#pb").progressBar(68,{
            barImage:'images/progressbg_yellow.gif',
            width:120,
            height:12
        });//自定義進度條的寬與高*/
    })
</script>
 

<div>
    <h3>進度條：</h3>
    <P id="pb">100</p>
</div>

（5）程式碼分析：

       在本示例中，頁面中的元素與進度條外掛繫結的程式碼格式如下：

$(頁面元素).progressBar(persent,config)

       其中，$(頁面元素)表示需要被繫結的頁面元素，progressBar()為進度條外掛初始化並繫結元素的方法，該方法中的引數present表示當前進度的百分比值，引數config是一個物件，通過該物件可以設定進度條外掛在初始化時的各項屬性值，如進度條的速度，背景色等。

       頁面中的元素在呼叫progressBar()初始化進度條時，引數present，config都是可選項，程式碼如下：

$(頁面元素).progressBar()

       上述程式碼僅是表示初始化一個進度表條頁面元素，並沒有指定該進度條的值，另外，進度條的當前值也可以從元素中獲取。

       此外，也可以指定進度條的值，初始化頁面元素，程式碼如下：

$(頁面元素).progressBar(persent)

       上述程式碼表示按指定的百分比值，初始化一個進度條頁面元素，present表示進度調外掛的當前百分比進度值。此外，也可以呼叫兩個引數初始化頁面進度條元素，程式碼如下：

$(頁面元素).progressBar(persent,config)

       上述程式碼表示，按指定的present百分比值和config物件設定的屬性值，初始化一個進度條頁面元素。config是一個物件，它包含設定進度條的多項屬性和事件，其屬性和事件的詳細功能如下表格：

說明：當使用頁面元素呼叫進度條的progressBar()方法時，不管該方法中有無引數，只能對一個元素使用一次，不能重複使用，否則，進度條的顯示將會有異樣。