個人使用總結:
代碼如下:
<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開發的進度條插件,秉承了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://t.wits.sg/misc/jQueryProgressBar/demo.php#
http://www.bram.us/projects/js_bramus/jsprogressbarhandler/#download
<script type="text/javascript"> $("#loading").fadeOut() </script>