Fortschrittsbalken
In den Fortschrittsbalken wird der Fortschritt einer Aufgabe angezeigt, z. B. das Übertragen oder Hochladen einer Datei, das Laden von Informationen usw.
Die progressbar () Methode
Die progressbar () -Methode gibt an, dass ein Element des HTML- Codes verwaltet und in Form eines Fortschrittsbalkens behandelt werden muss. Die Optionen desselben sind ein Objekt, das das Verhalten und das Erscheinungsbild dieses Objekts festlegt.
Die progressbar () -Methode kann auf zwei Arten verwendet werden:
• $ (Selektor, Kontext). Fortschrittsbalken (Optionen)
• $ (Selektor, Kontext) .progressbar (“Aktion”, Parameter)
Sehen wir uns ein Beispiel für die Verwendung an:
- Zuerst fügen wir die notwendigen Dateien, die jQuery- Bibliotheken sowie das CSS hinzu :
<link rel = “stylesheet” href = ” http: //code.jquery.c…/jquery-ui.css” />
<script src = ” http: //code.jquery.c … 1.js”> </ script>
<script src = ” http: //code.jquery.c … i.js”> </ script>
<link rel = “stylesheet” href = “/ resources / demos / style.css” />
- Wir fügen einige Stile für die Beschriftungen und die Leiste als solche hinzu:
<style>
.ui-progressbar {
Position: relativ;
}
.progress-label {
Position: absolut;
links: 50%;
oben: 4px;
Schriftgröße: fett;
Textschatten: 1px 1px 0 #fff;
}
</ style>
- Wenn wir unsere Methode progressbar () verwenden, ordnen wir sie einem Container zu und fügen einige Ereignisse hinzu, um zu erkennen, wann der Upload oder die Übertragung ausgeführt wird und wann sie abgeschlossen ist:
<script>
$ ( function () {
var progressbar = $ (“#progressbar”),
progressLabel = $ (“.progress-label”);
progressbar.progressbar ({
Wert: falsch,
change: function () {
progressLabel.text (progressbar.progressbar (“value”) + “%”);
},
complete: function () {
progressLabel.text (“Complete!”);
}
});
Funktionsfortschritt () {
var = progressbar.progressbar (“value”) || 0;
progressbar.progressbar (“value”, val + 1);
if (val <99) {
setTimeout (Fortschritt, 100);
}
}
setTimeout (Fortschritt, 3000);
});
</ script>
- Schließlich fügen wir unseren HTML- Code und die <div> -Tags hinzu, in denen unsere Fortschrittsanzeige angezeigt wird:
<body>
<div id = “progressbar”> <div class = “progress-label”> Wird geladen … </ div> </ div>
</ body>
Die Implementierung unseres Codes würde im Browser so aussehen:
Schließlich hinterlassen wir hier den vollständigen Code, damit Sie ihn selbst ausprobieren können, ohne zu vergessen, dass wir verschiedene Optionen, Ereignisse und sogar Stile für unsere Fortschrittsleiste ausprobieren können.
<! doctype html>
<html lang = “en”>
<head>
<meta charset = “utf-8” />
<title> Fortschrittsleiste der jQuery-Benutzeroberfläche – Benutzerdefinierte Bezeichnung </ title>
<link rel = “stylesheet”
href = ” http: //code.jquery.c…/jquery-ui.css” />
<script src = ” http: //code.jquery.c … 1.js”> </ script>
<script src = ” http: //code.jquery.c … i.js”> </ script>
<link rel = “stylesheet” href = “/ resources / demos / style.css” />
<style>
.ui-progressbar {
Position: relativ;
}
.progress-label {
Position: absolut;
links: 50%;
oben: 4px;
Schriftgröße: fett;
Textschatten: 1px 1px 0 #fff;
}
</ style>
<script>
$ ( function () {
var progressbar = $ (“#progressbar”),
progressLabel = $ (“.progress-label”);
progressbar.progressbar ({
Wert: falsch,
change: function () {
progressLabel.text (progressbar.progressbar (“value”) + “%”);
},
complete: function () {
progressLabel.text (“Complete!”);
}
});
Funktionsfortschritt () {
var = progressbar.progressbar (“value”) || 0;
progressbar.progressbar (“value”, val + 1);
if (val <99) {
setTimeout (Fortschritt, 100);
}
}
setTimeout (Fortschritt, 3000);
});
</ script>
</ head>
<body>
<div id = “progressbar”> <div class = “progress-label”> Wird geladen … </ div> </ div>
</ body>
</ html>
