Schnellstart: Hinzufügen von Statussteuerelementen (HTML)

Artikel
03/04/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Mit Statussteuerelementen können Sie anzeigen, dass Ihre App Aufgaben ausführt, beispielsweise Bilder herunterlädt, Dateien lädt oder Daten verarbeitet. Es gibt verschiedene Stile für Statussteuerelemente und unterschiedliche Verfahren, um diese einer Windows-Runtime-App mit JavaScript hinzuzufügen.

Voraussetzungen

Es wird vorausgesetzt, dass Sie eine einfache Windows-Runtime-App mit JavaScript erstellen können. Hilfe beim Erstellen Ihrer ersten App erhalten Sie unter Erstellen Ihrer ersten Windows-Runtime-App mit JavaScript. Hilfe beim Erstellen Ihrer ersten Steuerelemente und beim Hinzufügen von Ereignishandlern erhalten Sie unter Schnellstart: Hinzufügen von Steuerelementen und Ereignishandlern.

Stile für Statussteuerelemente

Es gibt drei Stile für progress-Steuerelemente, die den Benutzern mitteilen, ob der abgeschlossene Teil der Arbeit bekannt ist oder nicht und ob die Aufgabe modal ist: der Stil für bestimmte Statusanzeigen, für unbestimmte Statusanzeigen und für den unbestimmten Statusring.

Bestimmte Statusanzeige: Gibt an, welchen Fortschritt die App erzielt hat. Beim Fortschreiten der Arbeit, dehnt sich eine Füllfarbe von links nach rechts aus, bis die Statusanzeige voll ist.
Unbestimmte Statusanzeige: Gibt an, dass der Benutzer die UI verwenden kann, während die Aufgabe ausgeführt wird. In der Animation laufen Punkte von links nach rechts und verschwinden dann am rechten Rand.
Unbestimmter Statusring (nur Windows): Gibt an, dass die Benutzerinteraktion blockiert wird, bis die App die Aufgabe abgeschlossen hat. Die Aktivität ist also modal. In der Animation drehen sich mehrere Punkte im Uhrzeigersinn im Kreis.

Hinzufügen von bestimmten Statusanzeigen

Durch eine bestimmte Statusleiste wird angegeben, welchen Fortschritt die App erzielt hat. Mit Fortschreiten der Arbeit wird die Leiste aufgefüllt. Wenn Sie die verbleibende Arbeitsmenge in Zeiteinheiten, Bytes, Dateien oder sonstigen quantifizierbaren Maßeinheiten abschätzen können, empfiehlt es sich, eine bestimmte Statusleiste zu verwenden. Weitere Informationen zu den Fällen, in denen die Verwendung einer bestimmten Statusleiste geeignet ist, finden Sie unter Richtlinien und Prüfliste für Statussteuerelemente.

Die Statusanzeige bietet 3 Eigenschaften für Einstellungen und das Bestimmen des Fortschritts:

Eigenschaft	Beschreibung
max	Eine Zahl, die den Grad der Fertigstellung angibt. Der Standardwert ist 1,0.
value	Eine Zahl, die den aktuellen Fortschritt angibt. Wenn Sie den Status eines Dateidownloads anzeigen möchten, könnte dieser Wert auf die Anzahl heruntergeladener Bytes festgelegt werden (legen Sie zusätzlich max auf die Summe herunterzuladender Bytes fest).
position	(Schreibgeschützt) Die aktuelle Statusanzeige, die sich aus value dividiert durch max ergibt.

So wird´s gemacht: Erstellen von bestimmten Statusanzeigen

Erstellen Sie zum Einrichten einer bestimmten Statusanzeige ein progress-Element, und legen Sie seine value-Eigenschaft fest. Wenn Sie nicht den Standardfertigstellungswert 1,0 verwenden möchten, können Sie ihn ändern. Legen Sie dazu die max-Eigenschaft fest. In diesem Beispiel wird eine bestimmte Statusleiste erstellt. Dabei wird value auf 30 und max auf 100 festgelegt. Auf der resultierenden Statusleiste wird angegeben, dass der Vorgang zu 30 % abgeschlossen ist.

<progress id="determinateProgressBar" value="30" max="100"></progress>

So aktualisieren Sie den Wert einer bestimmten Statusleiste

Im vorigen Beispiel wurde veranschaulicht, wie der Wert einer Statusleiste im Markup angegeben wird. In einer tatsächlichen App aktualisieren Sie den Wert der Statusanzeige mit JavaScript anhand bestimmter Statusanzeigen. Wenn von Ihrer Statusanzeige beispielsweise angegeben wird, wie viele Dateien heruntergeladen wurden, wird der Wert jedes Mal aktualisiert, wenn eine weitere Datei heruntergeladen wurde.

Dieses Beispiel aktualisiert den Wert einer Statusanzeige

var progressBar = document.getElementById("determinateProgressBar");
progressBar.value = value;

Hinzufügen von unbestimmten Statusanzeigen

Wenn Sie nicht abschätzen können, wie lange das Fertigstellen einer Aufgabe dauert und die Aufgabe die Benutzerinteraktion nicht blockiert, verwenden Sie eine unbestimmte Statusleiste. Bei einer unbestimmten Statusleiste wird keine Leiste eingeblendet, die sich mit fortschreitendem Abschluss der Aufgabe füllt. Stattdessen wird eine Animation von Punkten angezeigt, die sich von links nach rechts bewegen. Weitere Informationen zu den Fällen, in denen die Verwendung einer unbestimmten Statusleiste geeignet ist, finden Sie unter Richtlinien und Prüfliste für Statussteuerelemente.

So erstellen Sie eine unbestimmte Statusleiste

Erstellen Sie zum Einrichten einer unbestimmten Statusanzeige ein progress-Element, aber legen Sie keinen Wert und kein Maximum fest.

<!-- Create an indeterminate progress bar -->
<progress></progress>

Hinzufügen von unbestimmten Statusringen (nur Windows)

Wenn Sie nicht abschätzen können, wie lange das Fertigstellen einer Aufgabe dauert und die Aufgabe die Benutzerinteraktion blockiert, verwenden Sie einen unbestimmten Statusring. Ein unbestimmter Statusring besteht aus einer animierten Sequenz von Punkten, die sich im Kreis bewegen. Weitere Informationen zu den Fällen, in denen die Verwendung eines unbestimmten Statusrings geeignet ist, finden Sie unter Richtlinien und Prüfliste für Statussteuerelemente.

So erstellen Sie einen unbestimmten Statusring

Erstellen Sie zum Einrichten eines unbestimmten Statusrings ein progress-Element, aber legen Sie keinen Wert und kein Maximum fest. Legen Sie als seine Klasse win-ring fest

<progress class="win-ring"></progress>

(Die win-ring-Klasse ist einer der Stile, die von der Windows-Bibliothek für JavaScript bereitgestellt werden.)

Das folgende Beispiel veranschaulicht das Erstellen eines unbestimmten Statusrings, der auch Text anzeigt.

<label class="progressRingText">
    <progress class="win-ring withText"></progress>Processing</label>

Dies sind einige der CSS-Stile aus dem vorherigen Beispiel.

progress.withText
{
    color: inherit; /* Uses the same text color as the page */
    vertical-align: text-bottom; /* Makes the bottom of the control align with the bottom of its label */
}

/* Text style for a label for the progress ring */
.progressRingText
{
    font-family: "Segoe UI";
}

/* Text style for a label for a default size progress ring */
.progressRingText
{
    font-size: 11pt;
    line-height: 15pt;
}

/* The margin to separate the ring and its label */
.progressRingText progress
{
    margin-right: 5px;
}

Zusammenfassung und nächste Schritte

Sie haben erfahren, wie Sie verschiedene Typen von Statussteuerelementen erstellen.

Im nächsten Thema So wird' gemacht: Formatieren von Statussteuerelementen erfahren Sie, wie Sie mit CSS und WinJS-Klassen Ihre progress-Steuerelemente formatieren.

Lesen Sie anschließend das Thema Richtlinien und Prüfliste für Statussteuerelemente. In diesem Thema wird detaillierter darauf eingegangen, in welchen Fällen und wie das progress-Steuerelement verwendet wird.

Freigeben über