簡約之美，JQuery之進度條插件

  JQuery Progress Bar是基於JQuery開發的進度條插件，秉承了JQuery的簡約哲學。不只容易使用，並且能夠輕鬆定製外觀。對於使用了JQuery框架的項目來講，須要使用進度條控件時這是一個不錯的選擇。

JQuery Progress Bar與常規插件同樣，只要用選擇器選擇一個HTML元素後，直接調用插件的公開方法便可。它提供的公開方法名稱爲progressBar()。那麼，當HTML頁面上有一個id爲progress1的元素時，能夠這樣初始化該控件：

$("#progress1").progressBar();

它的構造函數能夠接收以下表所示的參數。

  
 
 
   
 
    
 
     
 
      
方法及參數
 
      
用途
 
     
 
     
 
      
progressBar()
 
      
按默認設置初始化一個進度條
 
     
 
     
 
      
progressBar(persent)
 
      
按默認設置初始化或更新一個進度條，設置進度條的百分比至persent%.
 
     
 
     
 
      
progressBar(config)
 
      
按config中指定的設置初始化一個進度條，百分比爲0%。注意不要在初始化以後使用該方法來更改進度條的設置，不然可能引發顯示不正常。
 
     
 
     
 
      
progressBar(persent,config)
 
      
按config中指定的設置初始化一個進度條，百分比爲persent%。注意不要在初始化以後使用該方法來更改進度條的設置，不然可能引發顯示不正常。
 
     
 
    
 
   
 

  
其中，config參數是一個哈希結構對象，它包含了以下屬性用於設置進度條的外觀特性

屬性	用途
increment	設置進度條每步的增加度。默認值爲2。
speed	設置進度條初始化時動態滑動效果的速度。默認值爲15。這個值越大，則滑動速度越慢。
showText	設置是否顯示百分比標識文字。默認值爲ture，即顯示百分比文字標識。
boxImage	設置邊框圖片。默認值爲images/progressbar.gif。如需定製邊框，則修改該屬性，指向要使用的圖片便可。
barImage	設置進度標識圖片。默認值爲images/progressbg_green.gif。如需定製，則修改該屬性，指向要使用的圖片便可。這個圖片分類兩節，前半節用於標識完成進度，後半截用於標識剩餘未完成進度。兩節長度相等，且等於進度條的寬度。
width	設置進度條的寬度，這個值必須與barImage和boxImage所指向的圖片相適應。默認值爲120。
height	設置進度條的高度，這個值必須與barImage和boxImage所指向的圖片相適應。默認值爲12。

與服務器的交互就不在這裏講了，就只是使用ajax從服務器獲取進度值，而後用progressBar(persent)更新進度便可。