首頁  >  文章  >  web前端  >  js外掛YprogressBar實作漂亮的進度條效果_javascript技巧

js外掛YprogressBar實作漂亮的進度條效果_javascript技巧

WBOY
WBOY原創
2016-05-16 16:03:101461瀏覽

簡介

     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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn