jsプラグインYprogressBarで美しいプログレスバーを実現するeffect_javascriptスキル

はじめに

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 をインスタンス化する必要があります。インスタンス化する際には、オブジェクト全体が必要です。具体的なパラメーターについては 1 つずつ説明します。下に。

タイトル

プログレスバーのタイトル、このプログレスバーの目的を説明します。

デス

やりたいことをさらに詳しく説明するには、直接一文を書いてください。

アップロード速度や残り時間などを表示するなど、何か派手なことをしたい場合があります。YprogressBar はこれを完全にサポートします。形式は {{y:name} です。 }。

例: des: "アップロード速度: {{y:speed}}MB/秒、残り時間は約 {{y:秒}} 秒です。"、ここで、{{y:speed}} と {{y: Second} } は変数です。

ここで変数を指定した場合、更新操作を実行するときに 2 番目のパラメーターに変数の値を指定する必要があります。

開閉可能

破壊コールバック。 YprogressBar が破棄されると、destroy メソッドが手動で呼び出されたか、ユーザーが閉じるボタンをクリックしたかに関係なく、このコールバックがトリガーされます。

コールバックがトリガーされると、2 つのパラメーターが渡されます。つまり、現在の実行の進行状況と、現時点での説明内のパラメーター値 (オブジェクトには名前と値が含まれます)。

メソッドを表示

パラメーターは必要ありません。

show メソッドが呼び出されるまで、進行状況バーは表示されません。

更新メソッド

更新の進行状況、2 つのパラメーター。

最初のパラメータは現在の進行状況で、数値として直接表現されます。たとえば、26 は 26% を表します。

2 番目のパラメーターはオブジェクトであり、説明内のすべての変数の値を含む必要があります。説明に変数がない場合、このパラメータは無視できます。

例:

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

メソッドを破棄します

プログレスバーを破壊し、メモリを解放します。

Github で表示

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。