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