Jquery進度條插件 Progress Bar插件應用方法

Jquery進度條插件 Progress Bar插件應用方法

搞的我小糾結了一會，最後感謝同事分享文章，得以結局，呵呵，小經驗仍是要保存的
我的使用總結：

<script type="text/ 網頁特效" 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開發的進度條插件，秉承了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。

$(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://download.csdn.net/detail/tianyacao8025/3925519  jquery.progressbar.js下載地址