快捷導(dǎo)航

Jquery進(jìn)度條插件 Progress Bar小問題解決

更新時間：2011年07月12日 23:23:27 作者：

今天遇到一個進(jìn)度條的小問題，搞的我小糾結(jié)了一會，最后感謝同事分享文章，得以結(jié)局，呵呵，小經(jīng)驗還是要保存的

個人使用總結(jié)：

 
<script type="text/javascript" src="/Scripts/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="/Scripts/Method/jquery.progressbar.min.js"></script>【Progresbar插件很重要】 
<script type="text/javascript"> 
$(document).ready(function () { 
　　　　$("#progress1").progressBar(68, { barImage: '/content/images/progressbg_red.gif' }); 
　　}); 
</script> 
<div id="progress1"> </div> 

JQuery Progress Bar是基于JQuery開發(fā)的進(jìn)度條插件，秉承了JQuery的簡約哲學(xué)。
不僅容易使用，而且可以輕松定制外觀。對于使用了JQuery框架的項目來說，
需要使用進(jìn)度條控件時這是一個不錯的選擇。
JQuery Progress Bar與常規(guī)插件一樣，只要用選擇器選擇一個HTML元素后，
直接調(diào)用插件的公開方法即可。它提供的公開方法名稱為progressBar()。
那么，當(dāng)HTML頁面上有一個id為progress1的元素時，可以這樣初始化該控件：
$("#progress1").progressBar();
它的構(gòu)造函數(shù)可以接收如下表所示的參數(shù)。

方法及參數(shù)	用途
progressBar()	按默認(rèn)設(shè)置初始化一個進(jìn)度條
progressBar(persent)	按默認(rèn)設(shè)置初始化或更新一個進(jìn)度條，設(shè)置進(jìn)度條的百分比至persent%.
progressBar(config)	按config中指定的設(shè)置初始化一個進(jìn)度條，百分比為0%。注意不要在初始化之后使用該方法來更改進(jìn)度條的設(shè)置，否則可能引起顯示不正常。
progressBar(persent,config)	按config中指定的設(shè)置初始化一個進(jìn)度條，百分比為persent%。注意不要在初始化之后使用該方法來更改進(jìn)度條的設(shè)置，否則可能引起顯示不正常。

其中，config參數(shù)是一個哈希結(jié)構(gòu)對象，它包含了如下屬性用于設(shè)置進(jìn)度條的外觀特性

屬性	用途
increment	設(shè)置進(jìn)度條每步的增長度。默認(rèn)值為2。
speed	設(shè)置進(jìn)度條初始化時動態(tài)滑動效果的速度。默認(rèn)值為15。這個值越大，則滑動速度越慢。
showText	設(shè)置是否顯示百分比標(biāo)識文字。默認(rèn)值為ture，即顯示百分比文字標(biāo)識。
boxImage	設(shè)置邊框圖片。默認(rèn)值為images/progressbar.gif。如需定制邊框，則修改該屬性，指向要使用的圖片即可。
barImage	設(shè)置進(jìn)度標(biāo)識圖片。默認(rèn)值為images/progressbg_green.gif。如需定制，則修改該屬性，指向要使用的圖片即可。這個圖片分類兩節(jié)，前半節(jié)用于標(biāo)識完成進(jìn)度，后半截用于標(biāo)識剩余未完成進(jìn)度。兩節(jié)長度相等，且等于進(jìn)度條的寬度。
width	設(shè)置進(jìn)度條的寬度，這個值必須與barImage和boxImage所指向的圖片相適應(yīng)。默認(rèn)值為120。
height	設(shè)置進(jìn)度條的高度，這個值必須與barImage和boxImage所指向的圖片相適應(yīng)。默認(rèn)值為12。

復(fù)制代碼代碼如下:

 
$(document).ready(function() { 
$("#spaceused1").progressBar(); 
$("#spaceused2").progressBar({ barImage: 'images/progressbg_yellow.gif'} ); 
$("#spaceused3").progressBar({ barImage: 'images/progressbg_orange.gif', showText: false} ); 
$("#spaceused4").progressBar(65, { showText: false, barImage: 'images/progressbg_red.gif'} ); 
$("#uploadprogressbar").progressBar(); 
}); 

http://t.wits.sg/misc/jQueryProgressBar/demo.php#

http://www.bram.us/projects/js_bramus/jsprogressbarhandler/#download

<script type="text/javascript"> $("#loading").fadeOut() </script>

您可能感興趣的文章: