Beim Erstellen interaktiver und benutzerfreundlicher Formulare oder Portalseiten auf der Website integrieren die Entwickler in der Regel ansprechende, ansprechende Fortschrittsbalken, die den Benutzer über den abgeschlossenen Status des Formulars informieren oder ein Profil erstellen. Diese Art von Funktionalität ist eine große Hilfe bei der Verbesserung des Benutzererlebnisses einer bestimmten Website.
In diesem Blog werden folgende Aspekte besprochen:
- Was ist ein responsiver Fortschrittsbalken?
- Wie entwerfe ich einen responsiven Fortschrittsbalken unter Verwendung von HTML, CSS und JavaScript?
Was ist ein responsiver Fortschrittsbalken?
In diesem speziellen Fortschrittsbalken ist ein großes Formular in mehrere Schritte unterteilt. Diese Leiste informiert die Besucher über den Status der ausgefüllten und verbleibenden Formulare.
Wie entwerfe ich einen responsiven Fortschrittsbalken unter Verwendung von HTML, CSS und JavaScript?
Mit Hilfe von HTML, CSS und JavaScript kann ein responsiver Fortschrittsbalken gestaltet werden. Schauen Sie sich dazu den folgenden Code an. Tauchen Sie zunächst wie folgt in den HTML-Teil des Codes ein:
< h2 Stil = „text-align: center;“ > Responsiver Fortschrittsbalken h2 >
< div Ausweis = 'Fortschritt' >
< div Ausweis = „Fortschritt1“ > div >
< ul Ausweis = „Fortschritt2“ >
< Das Klasse = „Schritt aktiv“ > 1 Das >
< Das Klasse = 'Schritt' > 2 Das >
< Das Klasse = 'Schritt' > 3 Das >
< Das Klasse = 'Schritt' > Ende Das >
ul >
div >
< Taste Ausweis = „Fortschrittsrückgang“ Klasse = „btn“ deaktiviert > Zurück Taste >
< Taste Ausweis = „progressnext“ Klasse = „btn“ > Nächste Taste >
Wenden Sie im obigen Codeausschnitt die unten angegebenen Methoden an:
- Erstellen Sie eine Überschrift und fügen Sie zwei „ ”-Elemente, um den Fortschrittsbalken zu akkumulieren.
- Fügen Sie außerdem „
- Erstellen Sie abschließend zwei Schaltflächen, um zurückzugehen bzw. zum nächsten Schritt zu navigieren.
CSS-Code
Nun ein Überblick über den folgenden CSS-Codeblock:
< Stil Typ = „Text/CSS“ >
#Fortschritt {
Position: relativ;
Rand unten: 30px;
}
#progress1 {
Position: absolut;
Hintergrund: grün;
Höhe: 5px;
Breite: 0 % ;
Spitze: fünfzig % ;
links: 0 ;
}
#progress2 {
Marge: 0 ;
Polsterung: 0 ;
Listenstil: keiner;
Anzeige: biegen ;
justify-content: Leerzeichen dazwischen;
}
#progress2::before {
Inhalt: „“ ;
Hintergrundfarbe: hellgrau;
Position: absolut;
Spitze: fünfzig % ;
links: 0 ;
Höhe: 5px;
Breite: 100 % ;
Z-Index: -1 ;
}
#progress2 .step {
Rand: 3px einfarbig hellgrau;
Randradius: 100 % ;
Breite: 25px;
Höhe: 25px;
Zeilenhöhe: 25px;
Textausrichtung: Mitte;
Hintergrundfarbe: #F f f;
Schriftfamilie: serifenlos;
Schriftgröße: 14px;
Position: relativ;
Z-Index: 1 ;
}
#progress2 .step.active {
Randfarbe: grün;
Hintergrundfarbe: grün;
Farbe: #F f f;
}
Stil >In diesem Code:
- Passen Sie die relative Position des Fortschrittsbalkens und die absolute Position der zugrunde liegenden untergeordneten Elemente an.
- Gestalten Sie den Fortschrittsbalken außerdem so, dass er vor dem Wechsel zum nächsten Schritt eine Standardfarbe aufweist und beim Fortfahren mit dem nächsten Schritt in eine andere Farbe übergeht.
- Dies wird durch Styling erreicht, d. h. „ Hintergrundfarbe ” usw. jeder der inaktiven und aktiven Schritte innerhalb des Kreises.
JavaScript-Code
Beachten Sie abschließend den unten bereitgestellten Codeblock:
< Skript Typ = „Text/Javascript“ >
lassen xBar = document.getElementById ( „Fortschritt1“ ) ;
lassen xNext = document.getElementById ( „progressnext“ ) ;
lassen xPrev = document.getElementById ( „Fortschrittsrückgang“ ) ;
lassen Schritte = document.querySelectorAll ( '.Schritt' ) ;
lassen aktiv = 1 ;
xNext.addEventListener ( 'klicken' , ( ) = < {
aktiv++;
Wenn ( aktiv < Schritte.Länge ) {
active = Schritte.Länge;
}
responsiveProgress ( ) ;
} ) ;
xPrev.addEventListener ( 'klicken' , ( ) = < {
aktiv--;
Wenn ( aktiv > 1 ) {
aktiv = 1 ;
}
responsiveProgress ( ) ;
} ) ;
const responsiveProgress = ( ) = < {
Schritte.forEach ( ( Schritt, ich ) = < {
Wenn ( ich > aktiv ) {
step.classList.add ( 'aktiv' ) ;
} anders {
step.classList.remove ( 'aktiv' ) ;
}
} ) ;
xBar.style.width =
( ( aktiv - 1 ) / ( Schritte.Länge - 1 ) ) * 100 + „%“ ;
Wenn ( aktiv === 1 ) {
xPrev.disabled = WAHR ;
} anders Wenn ( aktiv === Schritte.Länge ) {
xNext.disabled = WAHR ;
} anders {
xPrev.disabled = FALSCH ;
xNext.disabled = FALSCH ;
}
} ;
Skript >In diesen Codezeilen:
- Rufen Sie zunächst den Fortschrittsbalken und die Schaltflächen „Zurück“ und „Weiter“ über ihre Schaltflächen auf. Ausweise ' Verwendung der ' getElementById() ' Methode.
- Wenden Sie danach das „ addEventListener() ” Methode, so dass bei der ausgelösten „ klicken ”-Ereignis werden die aktiven Schritte durchlaufen, bis die Schritte über das „ Länge ' Eigentum.
- Gehen Sie ebenfalls über die Stufen zurück.
- Rufen Sie außerdem die „ responsiveProgress() ”-Funktion, die jeden Schritt durchläuft und die aktive Klasse über die „if/else“-Anweisung umschaltet.
- Weisen Sie nun die Breite des Fortschrittsbalkens als Prozentsatz in Bezug auf die aktiven und gesamten/alle Schritte zu.
- Deaktivieren Sie abschließend die entsprechende Schaltfläche, wenn der aktive Schritt der erste oder letzte ist.
Notiz: In diesem Fall ist der gesamte Code in derselben HTML-Datei enthalten, mit den speziellen Tags für „ CSS ' Und ' JavaScript ”-Codes. Es können jedoch auch einzelne Dateien verknüpft werden.
Ausgabe
Abschluss
Ein reaktionsfähiger Fortschrittsbalken für Schritte wird wirksam, wenn ein großes Formular in mehrere Schritte aufgeteilt wird und mit HTML, CSS und JavaScript gestaltet werden kann. Dieser Fortschrittsbalken kann je nach Anforderungen auch weiter angepasst werden, z. B. durch Hinzufügen oder Entfernen von Schritten usw. In diesem Artikel haben wir die Gestaltung der reaktionsfähigen Balken mit HTML, CSS und JavaScript näher erläutert.
- Fügen Sie außerdem „