新聞中心
在線演示 本地下載

為甌海等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù),及甌海網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、甌海網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
今天我們分享一個(gè)超酷的使用HTML5畫布技術(shù)開發(fā)的進(jìn)度條插件 - percentageloader。這個(gè)插件比普通的水平進(jìn)度條使用更加炫酷的效果,圖形效果類似以前我們介紹的jQuery knob插件 ,這個(gè)插件使用快捷簡單,可以非常好的應(yīng)用到現(xiàn)代瀏覽器中。插件使用了HTML5的畫布來生成圖形界面,壓縮版本只有10kb大小,并且使用矢量Vector而非圖片來生成,可以很方便的生成不同大小的圖形。開源軟件,大家可以方便自由的使用。
主要特性
jQuery1.4+
支持瀏覽器:Firefox 3.0+, Safari 4.0+, Chrome 7+, IE9+, Opera 9+
提供各種控制選項(xiàng)
使用簡單方便,壓縮文件非常小, 10kb
無損失的支持各種大小尺寸的圖形
如何使用
倒入相關(guān)類庫及其CSS:
- 插件js代碼:
- $loader = $("#loader").percentageLoader({
- width : 400,
- height : 400,
- progress : 0
- });
主要選項(xiàng)
progress:初始加載位置(0-1)
value:初始的label值
width:寬度
height:高度
controllable:允許用戶點(diǎn)擊設(shè)置值
onProgressUpdate(value):提供了一個(gè)callback方法,允許使用更新的值來控制進(jìn)度條
回調(diào)函數(shù)使用:
- var loader;
- loader = $("myDiv").percentageLoader({
- controllable : true,
- onProgressUpdate : function (value) {
- loader.setProgress(value * 100.0);
- }
- });
是不是很簡單,希望大家能夠喜歡這個(gè)插件!
原文鏈接:http://www.cnblogs.com/gbin1/archive/2012/06/20/2555974.html
網(wǎng)站欄目:超炫HTML5開發(fā)的jQuery進(jìn)度條插件
文章源于:http://www.dlmjj.cn/article/djehoci.html


咨詢
建站咨詢
