So arbeiten Sie mit Progressbar in CSS3

Nutzer sind ungeduldig und manchmal ein Prozess dauert eine Weile zu vervollständigen. Ein Fortschrittsbalken macht es möglich, dass der CSS3-Entwickler den Benutzer über den Fortschritt einer Aufgabe zu informieren.

Moderne Programmierstrategien versuchen, den Benutzer daran zu hindern, auf alle warten darauf, von mehr Aufgaben im Hintergrund durchführen, aber manchmal ein Benutzer kann nicht fortgesetzt werden, bis die Aufgabe erledigt ist. Dies ist die Zeit, die Sie auf einen Fortschrittsbalken verlassen müssen um den Benutzer zu verhindern versuchen, den Prozess zu stoppen, bevor es abgeschlossen ist.

Das folgende Beispiel zeigt, wie ein Fortschrittsbalken zu verwenden. In diesem Fall wird der Fortschrittsbalken durch eine Zeitschleife aktualisiert. Jedes Mal, wenn die Zeit abgelaufen ist, wird der Fortschrittsbalken aktualisiert, und der Timer wird wieder eingeführt.

Das Ergebnis ist, dass die Fortschritte Teil Indikator bewegt sich von links nach rechts und dass der Timer schließlich stoppt, wenn der Indikator den ganzen Weg nach rechts bewegt. (Können Sie finden komplette Code für dieses Beispiel in dem Kapitel 06 Widgets Ordner des herunterladbaren Code wie Progressbar.HTML.)

Konfigurieren // den Fortschrittsbalken $ (function () {$ ( "# Progress") progressbar ({Wert. 0}) -}). // Erstellen Sie eine Variable den Timer object.var Timer zu halten - // Create a Variable die Gesamt timeout.var Timeout-Funktion Starttimer zu halten () {// die timeout.Timeout initialisieren = 0 -.. // Stellen Sie den Fortschrittsbalken Maximalwert $ ( "# Progress") progressbar ( "Option", "max "parseInt ($ (" # Startvalue ") val ().)) - // erstellen Sie den Timer variable.Timer = window.setTimeout (UpdateTimer, 100) -} function UpdateTimer () {// Holen Sie das Maximum value.var MaxTime = $ ( "# Progress") progressbar ( "Option", "max".) - // für das Ende des Zeit cycle.if prüfen (Timeout> = MaxTime) return - // aktualisieren der Timeout value.Timeout + = 100 -.. // aktualisieren Sie den Prozentsatz abgeschlossen $ ( "# PercentDone") Text (Math.round ((Timeout / MaxTime) * 100).) - // Stellen Sie den Fortschrittsbalken Wert $ ( "# Progress"). progressbar ( "value", Timeout) - // erstellen Sie den Timer variable.Timer = window.setTimeout (UpdateTimer, 100) -}

Die erste Aufgabe ist es, den Fortschrittsbalken zu schaffen sich durch progressbar () aufrufen. Beachten Sie, dass Sie einen Anfangswert als Eingabe zur Verfügung stellen muss. Allerdings ist der Fortschrittsbalken-Konfiguration nicht vollständig - der Aufruf von Starttimer () später werden einige zusätzliche Konfigurationsaufgaben ausführen.

Der Starttimer () Funktion wird aufgerufen, wenn der Benutzer den Start Timer-Taste auf dem Formular klickt. Diese Funktion initialisiert zwei globale Variablen. Timer ist ein Timer-Objekt verwendet, um die Statusleiste zu animieren. Timeout ist die aktuelle verstrichene Zeit in Millisekunden.

Diese Funktion konfiguriert auch die max Option für die Fortschrittsanzeige. Der Indikator ist ein Prozentsatz des aktuellen Wertes und der Max-Wert Eigenschaften. Der Maximalwert wird durch den Benutzer durch ein zur Verfügung gestellt Kontrolle, Startwert.

Jedes Mal, wenn Timer abgelaufen ist, ruft sie UpdateTimer (). UpdateTimer () erhält die maximale Zeitwert aus dem Fortschrittsbalken und legt es in MaxTime. Er prüft dann, dass Timeout weniger als MaxTime ist. Wenn Timeout schließlich MaxTime erreicht, hat der Fortschrittsbalken 100 Prozent erreicht und es ist Zeit, um den Timer zu stoppen.

Der nächste Schritt ist Timeout auf den nächsten Wert zu aktualisieren. Jede Iteration Fortschritte Timeout von 100 Millisekunden.

Nach der Aktualisierung Timeout aktualisiert das Beispiel der Online-Prozentsatz, der in einem gespeichert mit der ID PercentDone. Es aktualisiert auch den Wert des Attributs Fortschrittsbalken, so dass die Bar in die nächste Position bewegt.

Ein Timer Brände nur einmal. Um die nächste Schleife der Iteration zu erstellen, muss das Beispiel-Reset-Timer. Wenn die nächsten 100 Millisekunden Warten hat ein Ende, UpdateTimer () erneut aufgerufen, und der Prozess beginnt von neuem.