Hinzufügen von Fortschrittsschritten zu Formularen mit diesem jQuery-Plugin

Die meisten von uns wissen über Fortschrittsbalken und wie diese im UI-Design funktionieren. Sie helfen dabei Festlegen von Seitenzeiten, Hochladen von Formularen und ähnlichen Verzögerungszeiten zwischen den Seiten.

Aber Fortschrittsschritte sind ein bisschen anders. Diese funktionieren wie Breadcrumbs am oberen Rand der Seite, um Benutzer durch einen schrittweisen Prozess zu führen (normalerweise Anmelde- und Checkout-Formulare)..

Mit jQuery Steps können Sie Fügen Sie benutzerdefinierte Schritte schnell auf jeder Seite hinzu Ihrer Website.

Das gesamte Plugin läuft auf jQuery und ist auf GitHub kostenlos verfügbar.

Sie können diese ausführen Fortschrittsschritte als mehrseitige Funktionen die den Besucher durch verschiedene Seiten Ihrer Website führen. Oder Sie können dies wie einen Ajax-Schritt ausführen, der den Benutzer bewegt durch dieselbe Seite mit dynamischen Formularfeldern.

In den Plugin-Optionen finden Sie Einstellungen zum Ändern von “Start” Position, Fußzeilentasten, Vorwärts- / Rückwärts-Tasten und vieles mehr.

Es gibt auch eine Reihe von Ereignissen, auf die Sie mit Ihren eigenen benutzerdefinierten Rückruffunktionen abzielen können, wann immer der Benutzer den Fortschrittsschritt durchführt oder wann der Benutzer das Ende erreicht.

Alles in allem ist dies ein ziemlich neues Plugin hat nicht viele Möglichkeiten zur Auswahl. Es ist jedoch definitiv eines der besten Plugins, die Sie für das Erstellen dieser benutzerdefinierten Fortschrittsschrittfunktionen finden.

Nur zu beachten: Die Browserunterstützung ist hauptsächlich auf moderne Browser beschränkt, und für Microsoft-Browser wurde dies nur im IE 11 getestet. Wenn Sie ältere Browser unterstützen möchten, müssen Sie eigene Tests durchführen oder versuchen, benutzerdefinierte zu erstellen Fallback-Methoden zum Umgang mit älteren Benutzern.

Sicher einer der einfachste Fortschritt-Schritt-Plugins, die ich je gesehen habe und es sollte auch mit anderen jQuery-Plugins gut funktionieren.

Werfen Sie einen Blick auf die Homepage für eine Live-Demo mit den benutzerdefinierten JS-Optionen und einem Download-Button, um eine Kopie des Codes für sich selbst zu ziehen.