js外掛程式YprogressBar實現漂亮的進度條效果，jsyprogressbar

js外掛程式YprogressBar實現漂亮的進度條效果，jsyprogressbar

簡介

     YprogressBar是一款基於HTML5的進度條外掛程式。

     YprogressBar是一款輕量級進度條外掛程式，使用方便，資源佔用少，模仿好壓的解壓介面，帶有數字顯示，同時支援在描述中增加參數，以動態顯示更詳細的執行資訊，比如上傳速度、剩餘時間等等。

     YprogressBar代碼書寫簡潔，結構設計合理，不會給您的系統帶來不良影響。

介面預覽

 

 使用說明

 檔案引用

      只需引用yprogressbar.css和yprogressbar.js檔案即可。

使用概覽

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

 執行個體化參數說明

     為了盡顯物件導向逼格，要想使用YprogressBar，總得執行個體化一下吧，而執行個體化的時候，是需要一些參數的，整體上就是一個object，具體參數接下來一一說明。

     title

          進度條標題，說明下這個進度條是幹嘛的。

     des

          對要做的事情進行更詳細的描述，可以直接寫一句話。

          有時候我們想搞點花樣，比如說顯示上傳速度、剩餘時間什麼的，YprogressBar完全支援你這樣做，只需要在描述中加入變數即可，格式：{{y:name}}。

          例如：des: "上傳速度：{{y:speed}}MB/秒 剩餘時間約{{y:second}}秒"，這裡的{{y:speed}}和{{y:second}}就是變數。

          如果此處指定了變數，在做update操作時，必須在第二個參數中指定變數的值。

     closeable

          銷毀回調。YprogressBar一旦被銷毀，無論是手動調用destroy方法，還是使用者點擊關閉按鈕，都會觸發此回調。

          回調觸發時，會傳入兩個參數，分別是：當前執行進度、此刻描述中的參數值(object中包含name、value)。

     show方法

          無需任何參數。

          調用show方法後進度條才會顯示。

     update方法

          更新進度，兩個參數。

          第一個參數是當前進度，直接用數字表示，例如：26，代表26%。

          第二個參數是一個object，需要包含描述中所有變數的值。如果描述中無變數，此參數可以忽略。

          例如：

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

      destroy方法

           銷毀進度條，釋放記憶體。

View On Github

以上所述就是本文的全部內容了，希望大家能夠喜歡。