Das js-Plug-in YprogressBar bietet wunderschöne Javascript-Fähigkeiten für den Fortschrittsbalkeneffekt

Einführung

YprogressBar ist ein auf HTML5 basierendes Fortschrittsbalken-Plug-in.

YprogressBar ist ein leichtgewichtiges Fortschrittsbalken-Plug-in, das einfach zu verwenden ist, wenig Ressourcen beansprucht und eine gute Komprimierungs-Dekomprimierungsschnittstelle mit einer digitalen Anzeige imitiert. Es unterstützt auch das Hinzufügen von Parametern in der Beschreibung, um detailliertere Ausführungsinformationen dynamisch anzuzeigen . Wie Upload-Geschwindigkeit, verbleibende Zeit usw.

Der YprogressBar-Code ist prägnant geschrieben und verfügt über ein angemessenes strukturelles Design, das keine negativen Auswirkungen auf Ihr System hat.

Schnittstellenvorschau

Gebrauchsanweisung

Dateireferenz

Zitieren Sie einfach die Dateien yprogressbar.css und yprogressbar.js.

Nutzungsübersicht

 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();

Beschreibung des Instanziierungsparameters

Um den objektorientierten Stil vollständig zu demonstrieren, müssen Sie ihn bei der Instanziierung instanziieren. Das Ganze ist ein Objekt. Die spezifischen Parameter werden einzeln erläutert unten.

Titel

Titel des Fortschrittsbalkens, erklären Sie, wozu dieser Fortschrittsbalken dient.

des

Für eine detailliertere Beschreibung dessen, was Sie tun möchten, können Sie direkt einen Satz schreiben.

Manchmal möchten wir etwas Besonderes tun, z. B. die Anzeige der Upload-Geschwindigkeit, der verbleibenden Zeit usw. YprogressBar unterstützt Sie dabei vollständig. Sie müssen der Beschreibung nur Variablen hinzufügen. Das Format ist: {{y:name}. }.

Zum Beispiel: des: „Upload-Geschwindigkeit: {{y:speed}} MB/Sekunde, verbleibende Zeit beträgt etwa {{y:second}} Sekunden“, wobei {{y:speed}} und {{y: second} } ist die Variable.

Wenn hier eine Variable angegeben wird, muss beim Durchführen eines Aktualisierungsvorgangs der Wert der Variablen im zweiten Parameter angegeben werden.

verschließbar

Zerstörungsrückruf. Sobald die YprogressBar zerstört ist, wird dieser Rückruf ausgelöst, unabhängig davon, ob die Zerstörungsmethode manuell aufgerufen wird oder der Benutzer auf die Schaltfläche „Schließen“ klickt.

Wenn der Rückruf ausgelöst wird, werden zwei Parameter übergeben, nämlich: der aktuelle Ausführungsfortschritt und der Parameterwert in der Beschreibung zu diesem Zeitpunkt (Objekt enthält Namen und Wert).

Methode anzeigen

Es sind keine Parameter erforderlich.

Der Fortschrittsbalken wird erst angezeigt, wenn die Show-Methode aufgerufen wird.

Aktualisierungsmethode

Aktualisierungsfortschritt, zwei Parameter.

Der erste Parameter ist der aktuelle Fortschritt, direkt ausgedrückt als Zahl, zum Beispiel: 26, was 26 % entspricht.

Der zweite Parameter ist ein Objekt, das die Werte aller Variablen in der Beschreibung enthalten muss. Wenn in der Beschreibung keine Variablen vorhanden sind, kann dieser Parameter ignoriert werden.

Zum Beispiel:

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

Zerstörungsmethode

Zerstören Sie den Fortschrittsbalken und geben Sie Speicher frei.

Auf Github ansehen

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.