js插件YprogressBar實(shí)現(xiàn)漂亮的進(jìn)度條效果_javascript技巧

YprogressBar是一款基于HTML5的進(jìn)度條插件。

YprogressBar是一款輕量級(jí)進(jìn)度條插件，使用方便，資源占用少，模仿好壓的解壓界面，帶有數(shù)字顯示，同時(shí)支持在描述中增加參數(shù)，以動(dòng)態(tài)顯示更詳細(xì)的執(zhí)行信息，比如上傳速度、剩余時(shí)間等等。

YprogressBar代碼書寫簡(jiǎn)潔，結(jié)構(gòu)設(shè)計(jì)合理，不會(huì)給您的系統(tǒng)帶來(lái)不良影響。

界面預(yù)覽

使用說(shuō)明

文件引用

只需引用yprogressbar.css和yprogressbar.js文件即可。

使用概覽

實(shí)例化參數(shù)說(shuō)明

為了盡顯面向?qū)ο蟊聘?，要想使用YprogressBar，總得實(shí)例化一下吧，而實(shí)例化的時(shí)候，是需要一些參數(shù)的，整體上就是一個(gè)object，具體參數(shù)接下來(lái)一一說(shuō)明。

title

進(jìn)度條標(biāo)題，說(shuō)明下這個(gè)進(jìn)度條是干嘛的。

des

對(duì)要做的事情進(jìn)行更詳細(xì)的描述，可以直接寫一句話。

有時(shí)候我們想搞點(diǎn)花樣，比如說(shuō)顯示上傳速度、剩余時(shí)間什么的，YprogressBar完全支持你這樣做，只需要在描述中加入變量即可，格式：{{y:name}}。

例如：des: "上傳速度：{{y:speed}}MB/秒 剩余時(shí)間約{{y:second}}秒"，這里的{{y:speed}}和{{y:second}}就是變量。

如果此處指定了變量，在做update操作時(shí)，必須在第二個(gè)參數(shù)中指定變量的值。

closeable

銷毀回調(diào)。YprogressBar一旦被銷毀，無(wú)論是手動(dòng)調(diào)用destroy方法，還是用戶點(diǎn)擊關(guān)閉按鈕，都會(huì)觸發(fā)此回調(diào)。

回調(diào)觸發(fā)時(shí)，會(huì)傳入兩個(gè)參數(shù)，分別是：當(dāng)前執(zhí)行進(jìn)度、此刻描述中的參數(shù)值(object中包含name、value)。

show方法

無(wú)需任何參數(shù)。

調(diào)用show方法后進(jìn)度條才會(huì)顯示。

update方法

更新進(jìn)度，兩個(gè)參數(shù)。

第一個(gè)參數(shù)是當(dāng)前進(jìn)度，直接用數(shù)字表示，例如：26，代表26%。

第二個(gè)參數(shù)是一個(gè)object，需要包含描述中所有變量的值。如果描述中無(wú)變量，此參數(shù)可以忽略。

例如：

destroy方法

銷毀進(jìn)度條，釋放內(nèi)存。

View On Github

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com