Jquery進度條插件 Progress Bar小問題解決
<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ā)的進度條插件,秉承了JQuery的簡約哲學(xué)。
不僅容易使用,而且可以輕松定制外觀。對于使用了JQuery框架的項目來說,
需要使用進度條控件時這是一個不錯的選擇。
JQuery Progress Bar與常規(guī)插件一樣,只要用選擇器選擇一個HTML元素后,
直接調(diào)用插件的公開方法即可。它提供的公開方法名稱為progressBar()。
那么,當HTML頁面上有一個id為progress1的元素時,可以這樣初始化該控件:
$("#progress1").progressBar();
它的構(gòu)造函數(shù)可以接收如下表所示的參數(shù)。
方法及參數(shù) |
用途 |
progressBar() |
按默認設(shè)置初始化一個進度條 |
progressBar(persent) |
按默認設(shè)置初始化或更新一個進度條,設(shè)置進度條的百分比至persent%. |
progressBar(config) |
按config中指定的設(shè)置初始化一個進度條,百分比為0%。注意不要在初始化之后使用該方法來更改進度條的設(shè)置,否則可能引起顯示不正常。 |
progressBar(persent,config) |
按config中指定的設(shè)置初始化一個進度條,百分比為persent%。注意不要在初始化之后使用該方法來更改進度條的設(shè)置,否則可能引起顯示不正常。 |
其中,config參數(shù)是一個哈希結(jié)構(gòu)對象,它包含了如下屬性用于設(shè)置進度條的外觀特性
屬性 |
用途 |
increment |
設(shè)置進度條每步的增長度。默認值為2。 |
speed |
設(shè)置進度條初始化時動態(tài)滑動效果的速度。默認值為15。這個值越大,則滑動速度越慢。 |
showText |
設(shè)置是否顯示百分比標識文字。默認值為ture,即顯示百分比文字標識。 |
boxImage |
設(shè)置邊框圖片。默認值為images/progressbar.gif。如需定制邊框,則修改該屬性,指向要使用的圖片即可。 |
barImage |
設(shè)置進度標識圖片。默認值為images/progressbg_green.gif。如需定制,則修改該屬性,指向要使用的圖片即可。這個圖片分類兩節(jié),前半節(jié)用于標識完成進度,后半截用于標識剩余未完成進度。兩節(jié)長度相等,且等于進度條的寬度。 |
width |
設(shè)置進度條的寬度,這個值必須與barImage和boxImage所指向的圖片相適應(yīng)。默認值為120。 |
height |
設(shè)置進度條的高度,這個值必須與barImage和boxImage所指向的圖片相適應(yīng)。默認值為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>
- jQuery EasyUI API 中文文檔 - ProgressBar 進度條
- Jquery Easyui進度條組件Progress使用詳解(8)
- jQuery EasyUI ProgressBar進度條組件
- jquery 簡單的進度條實現(xiàn)代碼
- 6款新穎的jQuery和CSS3進度條插件推薦
- 分享8款優(yōu)秀的 jQuery 加載動畫和進度條插件
- 基于HTML5 Ajax文件上傳進度條如何實現(xiàn)(jquery版本)
- Javascript jquery css 寫的簡單進度條控件
- jQuery實現(xiàn)文件上傳進度條特效
- jQuery監(jiān)聽文件上傳實現(xiàn)進度條效果的方法
- jQuery簡單實現(xiàn)提交數(shù)據(jù)出現(xiàn)loading進度條的方法
- jquery-ui 進度條功能示例【測試可用】
相關(guān)文章
jQuery實現(xiàn)表單動態(tài)添加數(shù)據(jù)并提交的方法
這篇文章主要介紹了jQuery實現(xiàn)表單動態(tài)添加數(shù)據(jù)并提交的方法,結(jié)合實例形式總結(jié)分析了jQuery針對存在form表單的添加、提交,不存在form表單的添加、提交,ajax、非ajax形式提交等數(shù)據(jù)添加與表單提交操作技巧,需要的朋友可以參考下2018-07-07jQuery使用addClass()方法給元素添加多個class樣式
這篇文章主要介紹了jQuery使用addClass()方法給元素添加多個class樣式的方法,實例分析了addClass方法的使用技巧及添加多個樣式的實現(xiàn)方法,需要的朋友可以參考下2015-03-03