Advertisement
  1. Code
  2. PHP

Erstellen einer Fortschrittsbar mit Javascript

by
Read Time:14 minsLanguages:

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Die Fortschrittsanzeige ist eine der neuesten Komponenten, die der hervorragenden Bibliothek von UI-Widgets und Interaktionshilfen hinzugefügt werden, die auf jQuery aufbauen. Es wurde in der neuesten Version der Bibliothek eingeführt, die zum Zeitpunkt des Schreibens 1,7 beträgt.




Die Fortschrittsbar ist derzeit nur bestimmt. Wenn wir ihn aktualisieren, müssen wir ihm explizit mitteilen, welchen Wert er hat, und wir müssen im Voraus wissen, wann der Prozess, mit dem er gemessen wird, abgeschlossen ist. Dieses Widget ist derzeit nicht die beste Wahl für einen Prozess, dessen Abschluss unbestimmt lange dauert.
Es ist ein sehr einfaches Widget mit einer kleinen API, die eine begrenzte Anzahl von Eigenschaften und Methoden verfügbar macht. Es kann jedoch dennoch sehr effektiv sein und bietet Besuchern visuelles Feedback zum Prozentsatz eines verbleibenden Prozesses, bevor dieser abgeschlossen ist.

Erste Schritte

Wir benötigen eine Kopie der aktuellen Version von jQuery UI, die Sie im Download Builder unter http://jqueryui.com/download erhalten. Sobald wir es heruntergeladen haben, müssen wir es entpacken, damit die vorhandene Verzeichnisstruktur erhalten bleibt. Wir sollten auf unserem Computer ein neues Verzeichnis mit dem Namen jQuery UI erstellen und dann einen weiteren neuen Ordner mit dem Namen jqueryui1.7 erstellen. Das Archiv sollte dann in den Ordner jqueryui1.7 entpackt werden.

Das Archiv enthält alles, was wir brauchen, um loszulegen. minimierte und unkomprimierte Versionen aller Bibliotheksdateien, einige Themendateien (das Standardthema ist die treffend benannte Glätte) und sogar die neueste Version der zugrunde liegenden jQuery-Bibliothek.

Der Fortschrittsbar basiert auf einer Reihe von Dateien, um zu funktionieren. Diese sind unten in der Reihenfolge aufgeführt, in der sie unserer Seite hinzugefügt werden sollen:

  • ui.core.css
  • ui.theme.css
  • ui.progressbar.css
  • jquery[currentversion].js
  • ui.core.js
  • ui.progressbar.js

Die ersten drei Dateien sind Teil des umfangreichen CSS-Frameworks und werden verwendet, um der Fortschrittsbar ein eindeutiges Erscheinungsbild zu verleihen. Wir müssen uns bei einer realen Implementierung nicht an dieses Thema halten. Wir haben viele Optionen für die Anpassung, einschließlich einer großen Anzahl vorkonfigurierter Designs, die direkt von Themeroller verfügbar sind, eines benutzerdefinierten Designs, das wir selbst mit Themeroller entwerfen können, oder sogar eines benutzerdefinierten Designs, das wir manuell erstellen, indem wir die in den Standard-Stylesheets definierten Regeln überschreiben. Wir werden in diesem Tutorial jedoch keine dieser Aufgaben ausführen, können jedoch einige der vom Framework bereitgestellten Klassen verwenden.

Die zugrunde liegende Seite

Dieses Widget benötigt nur sehr wenig zugrunde liegenden Aufschlag. Zusätzlich zu den oben aufgeführten Bibliotheksressourcen benötigen wir lediglich ein einfaches Containerelement. Erstellen Sie in Ihrem Texteditor die folgende Seiten-Shell mit den erforderlichen Ressourcen und dem Containerelement:

Speichern Sie dies als progressBar.html im Stammverzeichnis der jQuery-Benutzeroberfläche. Wir setzen die Stylesheets direkt am Anfang der Datei und die Skripte direkt am Ende. Das ist aus Leistungsgründen der Fall, da Seiten den Inhalt schneller laden, wenn sie nicht gleichzeitig versuchen, JavaScript zu laden. Das ist eine gut dokumentierte Aufführungspraxis, die am besten eingehalten wird. Wir haben unten auf der Seite ein leeres Skript-Tag hinterlassen. Fügen wir dort als nächstes Code hinzu:

Um die Standard-Fortschrittsbar zu initialisieren, rufen wir lediglich die Konstruktormethode progressbar für das Containerelement auf, in das das Widget gerendert werden soll. Wenn Sie diese Seite in Ihrem Browser ausführen, sollten Sie sehen, dass die Fortschrittsbar erstellt wurde und automatisch die Breite des Containers ausfüllt, in diesem Fall den Hauptteil der Seite:

Festlegen des Werts der Fortschrittsbar

Der Wert der Fortschrittsbar wird standardmäßig auf Null gesetzt, weshalb er im vorherigen Screenshot leer erscheint. Um die Fortschrittsbar zu füllen, müssen wir die value-Eigenschaft festlegen. Ändern Sie die Konstruktorfunktion so, dass sie wie folgt aussieht:

Die value-Eigenschaft bestimmt den Prozentsatz der ausgefüllten Fortschrittsbar und gibt dem Besucher ein hervorragendes visuelles Feedback darüber, wie viel von der Aufgabe noch zu erledigen ist. Die Fortschrittsbar sollte nun wie im folgenden Screenshot zur Hälfte gefüllt sein:

Abrufen des Werts des Fortschrittsbars

Das Abrufen des aktuellen Werts des Widgets ist genauso einfach wie das Festlegen. Wir können eine seiner Methoden verwenden, um die aktuelle Werteigenschaft zurückzugeben. Fügen Sie nach dem ersten Konstruktor den folgenden Code hinzu:
//Mouseover für Fortschrittsbar setzen

Wir haben zwei einfache anonyme Funktionen hinzugefügt, die bei Mouseover- und Mouseout-Ereignissen ausgelöst werden, die von der Fortschrittsbar ausgelöst werden (beachten Sie, dass das Standard-DOM-Ereignisse und keine benutzerdefinierten Fortschrittsbarereignisse sind). In der ersten Funktion erstellen wir lediglich einen neuen Absatz mit dem aktuellen Wert der Fortschrittsbar als innerem Text und hängen ihn an die Seite an.

Der Wert wird mit der Optionsmethode abgerufen. Das an die Methode übergebene Argument ist der Name der Eigenschaft, die wir abrufen möchten. Die zweite Funktion entfernt die Nachricht einfach wieder. Die Nachricht wird im folgenden Screenshot angezeigt:

Eigenschaften, Ereignisse und Methoden

Die value-Eigenschaft oder Option ist derzeit die einzige konfigurierbare Eigenschaft der Fortschrittsbar. In diesem Beispiel legen wir es fest, wenn das Widget initialisiert wird, indem wir es als Eigenschaft eines Konfigurationsobjekts übergeben. Um diese Eigenschaft nach der Initialisierung des Widgets festzulegen, verwenden wir die Optionsmethode. Um diese Methode im Setter-Modus zu verwenden, müssen wir einen zweiten Parameter übergeben, der den neuen Wert wie folgt angibt:

Sie fragen sich vielleicht, warum ich "einen zweiten Parameter" gesagt habe, wenn die obige Codezeile eindeutig drei Argumente enthält. Obwohl wir die Optionsmethode verwenden, rufen wir sie nicht direkt auf. Stattdessen rufen wir die Konstruktormethode erneut auf, teilen ihr jedoch mit, dass wir die Optionsmethode aufrufen möchten. Das Widget ruft die Methode intern auf und übergibt die beiden Parameter („Wert“ und 75), die wir nach dem Methodennamen an den Konstruktor übergeben.

Die Fortschrittsbar zeigt ein einzelnes Ereignis an, das Änderungsereignis, das einen Mechanismus bietet, an den wir uns anschließen können, damit wir auf Änderungen seines Werts reagieren können. Dies ist ein benutzerdefiniertes Ereignis, damit wir es auf zwei verschiedene Arten erkennen und darauf reagieren können. Wir können eine anonyme Funktion als Wert der Änderungseigenschaft in einem Konfigurationsobjekt definieren, wie wir es mit der Eigenschaft value getan haben, oder wir können die Bindungsmethode von jQuery verwenden, um die auszuführende anonyme Funktion anzugeben. Ein subtiler Unterschied zwischen den beiden besteht darin, dass der mit der Bindemethode angegebene Code zuerst ausgeführt wird.
Die Fortschrittsbar-API stellt fünf Methoden bereit, die unten aufgeführt sind:

  • destroy
  • disable
  • enable
  • option
  • value

Alle diese Methoden werden genauso verwendet wie die von uns betrachtete Optionsmethode. durch Aufrufen der Konstruktormethode unter Angabe des Namens der Methode und aller Parameter, die wir übergeben möchten. Die meisten davon sollten ziemlich selbsterklärend sein.

Verwenden der Fortschrittsbar

Dieses Beispiel war bisher sehr einfach für diejenigen unter Ihnen, die die jQuery-Benutzeroberfläche möglicherweise noch nicht verwendet haben. Lassen Sie uns die Dinge ein wenig verstärken und etwas zusammenstellen, das sich dem nähert, was wir in einer ordnungsgemäßen Implementierung gerne tun würden. Dieses Beispiel ist ebenfalls grundlegend, sollte jedoch eine viel bessere Vorstellung davon geben, wie das Widget für uns verwendet werden kann. Unsere fertige Seite sieht ungefähr so aus:

Beginnen Sie mit der folgenden zugrunde liegenden Seite in einer neuen Datei in Ihrem Texteditor:

Speichern Sie dies als regForm.html im Ordner jQuery UI. Oben auf der Seite verlinken wir auf das CSS-Framework. Dies dient in erster Linie dazu, das erforderliche Styling für den Fortschrittsbalken hinzuzufügen. Wir können jedoch auch einige der Klassen verwenden, die für unsere eigenen Elemente bereitgestellt werden. Wir fügen außerdem ein benutzerdefiniertes Stylesheet hinzu, das wir in Kürze erstellen werden.

Der Hauptteil der Seite enthält einige Layoutelemente und einige Textknoten, aber die Hauptelemente sind der Container für die Fortschrittsbar und das Formular. Das Formular wird mithilfe von div- und fieldset-Elementen in verschiedene Abschnitte unterteilt. Der Grund dafür ist, dass wir einen Teil des Formulars ausblenden können, damit es so aussieht, als würde es mehrere Seiten umfassen.

Wir haben einen Absatz und eine Beschriftung neben der Fortschrittsbar hinzugefügt. Wir positionieren diese so, dass sie in der Fortschrittsbar angezeigt werden. Der Absatz enthält eine einfache Textzeichenfolge. Das Etikett wird verwendet, um den aktuellen Fortschrittswert anzuzeigen.

Der äußere Container erhält mehrere Klassennamen. Das erste ist, damit wir dem Element ein benutzerdefiniertes Styling zuweisen können, aber die zweiten beiden zielen auf verschiedene Funktionen des CSS-Frameworks ab. Die Klasse ui-helper-clearfix wird zum automatischen Löschen von schwebenden Elementen verwendet und ist eine hervorragende Möglichkeit, die Unordnung zusätzlicher und unnötiger div-Elemente zu verringern.

Die Klasse ui-Corner-All wird verwendet, um dem Containerelement (sowie der Fortschrittsbar selbst, der sie automatisch enthält, und unseren Feldsatzelementen) abgerundete Ecken unter Verwendung mehrerer proprietärer Stilregeln zuzuweisen. Diese werden nur von Gecko- und Webkit-basierten Browsern unterstützt, aber aufgrund der fortschreitenden Verbesserung ist es durchaus akzeptabel, sie zu verwenden. Die fortschreitende Verbesserung schreibt vor, dass wir auf unseren Webseiten ein verbessertes Styling für Browser bereitstellen können, die es anzeigen können. Andere Browser haben nur einen Container mit eckigen Ecken.

Wir verwenden eine andere Klasse aus dem CSS-Framework innerhalb des Formulars. Beim ersten Laden der Seite müssen mehrere Bedienfelder ausgeblendet werden. Daher können wir die Klasse ui-helper-hidden verwenden, um sicherzustellen, dass sie angezeigt werden: keine, wenn wir sie anzeigen möchten, müssen wir sie nur entfernen dieser Klassenname.

Am Ende des Körpers (aus Leistungsgründen; das funktioniert übrigens wirklich!) Verknüpfen wir die erforderlichen JavaScript-Ressourcen aus der Bibliothek. Das allerletzte Skriptelement ist leer und wartet auf den Code, der das Formular und die Fortschrittsbar zum Leben erweckt. Fügen wir das als nächstes hinzu:

Innerhalb des äußeren Dokuments. Bereits Verknüpfung haben wir die Konstruktorfunktion für den Fortschrittsbalken; Wir übergeben dem Konstruktor ein Literal-Konfigurationsobjekt, das eine einzelne Eigenschaft enthält. Dies ist die Änderungseigenschaft und ermöglicht es uns, eine anonyme Funktion bereitzustellen, die jedes Mal ausgeführt wird, wenn das benutzerdefinierte Änderungsereignis erkannt wird. Mit diesem Ereignis können wir das Label aktualisieren, das wir in der Fortschrittsanzeige positionieren möchten.

Jedes Mal, wenn das Ereignis ausgelöst wird, ermitteln wir mithilfe der Optionsmethode den aktuellen Wert des Fortschrittsbalkens und legen den Wert als Text des Etiketts fest. Das Ereignis wird nach der Änderung ausgelöst, sodass der Wert, den wir erhalten, immer der neue Wert ist.

Als nächstes haben wir einen Klick-Handler für die Schaltfläche Weiter>; Wenn Sie auf diese Schaltfläche klicken, ändert sich die aktuelle "Seite" des Formulars über eine Reihe von Animationen und der Wert der Aktualisierung des Fortschrittsbalkens. Wir müssen noch ein paar andere Dinge tun. Das Standardverhalten einer Schaltfläche in einem Formular besteht darin, das Formular zu senden. Das möchten wir derzeit nicht tun. Daher verhindert unser Klick-Handler zunächst, dass das Formular mithilfe der JavaScript-Funktion präventDefault() gesendet wird. Das wird für das Ereignisobjekt aufgerufen, das automatisch an die anonyme Funktion übergeben wird.

Wir sehen uns dann jedes der einzelnen Felder im Formular an, um das aktuelle Feld zu bestimmen. Als erstes überprüfen wir, ob das aktuelle Bedienfeld nicht das erste Bedienfeld ist. Wenn dies nicht der Fall ist, aktivieren wir die Zurück-Schaltfläche, die standardmäßig deaktiviert ist. Es wird immer nur ein Bereich angezeigt. Wir finden also den Bereich, in dem die Klasse "UI-Helfer versteckt" nicht vorhanden ist, und blenden ihn aus. Wir geben eine anonyme Rückruffunktion an, die ausgeführt werden soll, sobald der Fade abgeschlossen ist.

Innerhalb dieser zweiten Funktion wählen wir das nächste Element aus und zeigen es an; Wenn das nächste Element das letzte Fenster ist, das eine ID des Dankes hat, deaktivieren wir die Schaltfläche Weiter>. Obwohl wir uns in diesem Beispiel keine Gedanken über die tatsächliche Übermittlung des Formulars machen, können wir hier die vom Formular gesammelten Daten an den Server senden. Wir entfernen die Klasse ui-helper-hidden, da das Panel jetzt sichtbar ist.

Schließlich verwenden wir erneut die Optionsmethode, diesmal im Setter-Modus, um den neuen Wert des Fortschrittsbalkens festzulegen. Der neue Wert, den wir als zweiten Parameter an die Methode übergeben, ist einfach der aktuelle Wert plus 50, da das Formular nur zwei Teile enthält. Dieser letzte Teil löst dann die Funktion aus, die das Etikett aktualisiert.

Als nächstes müssen wir einen sehr ähnlichen Klick-Handler für das hinzufügen

Das ist nun der gesamte Code, den wir benötigen. Jetzt müssen wir nur noch ein grundlegendes CSS hinzufügen, um das Beispiel zu erstellen. Fügen Sie in einer neuen Datei in Ihrem Texteditor den folgenden Code hinzu:

Speichern Sie dies als regForm.css im selben Ordner wie die HTML-Datei. Wir sollten jetzt eine Arbeitsseite mit einer verkabelten Fortschrittsbar haben. Wenn wir die Seite ausführen, sollten wir feststellen, dass wir durch jedes Fenster des Formulars navigieren können, und die Fortschrittsbar aktualisiert sich entsprechend:

Zusammenfassung

In diesem Artikel haben wir uns die äußerst nützliche Fortschrittsanzeige angesehen, die wir als visuelle Hilfe verwenden können, um den Besuchern mitzuteilen, wie lange ein bestimmter Prozess prozentual dauern wird. Es bietet eine attraktive und nützliche Präsentation der Informationen auf eine Weise, die für unsere Besucher leicht verständlich sein sollte.

Wir haben uns die Eigenschaft und das Ereignis angesehen, die von der API verfügbar gemacht werden, und wir haben uns eine der Methoden angesehen, die wir aufrufen können, um die Fortschrittsbar dazu zu bringen, etwas zu tun. Das Beispiel, mit dem wir endeten, sollte in allen gängigen Browsern perfekt funktionieren, obwohl es im guten alten IE ein wenig chaotisch aussieht (was sehr einfach zu beheben wäre, wenn wir dazu geneigt wären).

  • Abonnieren Sie den NETTUTS RSS Feed für weitere tägliche Webentwicklungs-Tuts und Artikel.


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.