YprogressBar進度條外掛使用簡單介紹

antzone發表於2017-04-06

使用此外掛可以製作美觀的進度條效果，下面就簡單介紹一下它的使用方法。

先來看一下它的絢麗效果:

a:3:{s:3:\"pic\";s:43:\"portal/201704/06/131732vrvrz7znnoaombqk.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

一.外掛簡單介紹:

（1）.YprogressBar是一款基於HTML5的進度條外掛。

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

（3）.YprogressBar程式碼書寫簡潔，結構設計合理，不會給您的系統帶來不良影響。

二.外掛使用:

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

簡單演示:

[JavaScript] 純文字檢視 複製程式碼
var ypb = new YprogressBar({
  title: "正在上傳檔案...",
  des: "上傳速度：{{y:speed}}MB/秒 剩餘時間約{{y:second}}秒",
  closeable: true,
  cancelCallback: function(rate, vars){
    console.log(rate);
    console.log(vars);
  }
});

引數說明:

採用物件導向的風格，總提示上一個物件。

引數說明:

（1）.title：進度條標題，用來進行說明。

（2）.des：對要做的事情進行更詳細的描述。當然可以顯示更多內容，比如說顯示上傳速度、剩餘時間等，YprogressBar完全支援你這樣做，只需要在描述中加入變數即可，格式：{{y:name}}。例如：des: "上傳速度：{{y:speed}}MB/秒 剩餘時間約{{y:second}}秒"，這裡的{{y:speed}}和{{y:second}}就是變數。如果此處指定了變數，在做update操作時，必須在第二個引數中指定變數的值。

（3）.closeable：銷燬回撥。YprogressBar一旦被銷燬，無論是手動呼叫destroy方法，還是使用者點選關閉按鈕，都會觸發此回撥。回撥觸發時，會傳入兩個引數，分別是：當前執行進度、此刻描述中的引數值(object中包含name、value)。

（4）.show方法：無需任何引數。呼叫show方法後進度條才會顯示。

（5）.update方法：更新進度，兩個引數。第一個引數是當前進度，直接用數字表示，例如：26，代表26%。第二個引數是一個object，需要包含描述中所有變數的值。如果描述中無變數，此引數可以忽略。簡單程式碼演示:

[JavaScript] 純文字檢視 複製程式碼
ypb.update(26,{
  speed: 312,
  second: 5
});

（6）.destroy方法：銷燬進度條，釋放記憶體。

Github地址是:https://github.com/iyangyuan/yprogressbar。

相關文章