Heim > Artikel > Web-Frontend > 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.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.