簡(jiǎn)介

     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)帶來不良影響。

界面預(yù)覽

 使用說明

 文件引用

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

使用概覽

 var ypb = new YprogressBar({
  title: "正在上傳文件...",
  des: "上傳速度：{{y:speed}}MB/秒 剩余時(shí)間約{{y:second}}秒",
  closeable: true,
  cancelCallback: function(rate, vars){
 console.log(rate);
 console.log(vars);
  }
 });
 ypb.show();

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

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

     title

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

     des

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

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

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

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

     closeable

          銷毀回調(diào)。YprogressBar一旦被銷毀，無論是手動(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方法

          無需任何參數(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，需要包含描述中所有變量的值。如果描述中無變量，此參數(shù)可以忽略。

          例如：

 ypb.update(26,{
 speed: 312,
 second: 5
 });

      destroy方法

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

View On Github

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

最新評(píng)論