Mens de oppretter interaktive og brukervennlige skjemaer eller portalsider på nettstedet, innlemmer utviklerne vanligvis responsive fremdriftslinjer som er tiltalende og lar brukeren få vite om skjemaets fullførte status eller opprette en profil. Disse typer funksjoner er til stor hjelp for å forbedre brukeropplevelsen til et bestemt nettsted.
Denne bloggen diskuterer følgende aspekter:
- Hva er en responsiv fremdriftslinje?
- Hvordan designe en responsiv fremdriftslinje ved å bruke HTML, CSS og JavaScript?
Hva er en responsiv fremdriftslinje?
I denne fremdriftslinjen er et stort skjema delt opp i flere trinn. Denne linjen varsler de besøkende om statusen til de utfylte og gjenværende skjemaene.
Hvordan designe en responsiv fremdriftslinje ved å bruke HTML, CSS og JavaScript?
En responsiv fremdriftslinje kan utformes ved hjelp av HTML, CSS og JavaScript. For å gjøre det, sjekk ut følgende kode. Gå først inn i HTML-delen av koden, som følger:
< h2 stil = 'text-align: center;' > Responsiv fremdriftslinje h2 >
< div id = 'framgang' >
< div id = 'fremgang1' > div >
< ul id = 'fremgang 2' >
< at klasse = 'trinn aktiv' > 1 at >
< at klasse = 'steg' > 2 at >
< at klasse = 'steg' > 3 at >
< at klasse = 'steg' > Slutt at >
ul >
div >
< knapp id = 'fremskritt' klasse = 'btn' funksjonshemmet > Tilbake knapp >
< knapp id = 'progressnext' klasse = 'btn' > Neste knapp >
I kodebiten ovenfor bruker du metodene nedenfor:
- Lag en overskrift og ta med to ' '-elementer for å samle fremdriftslinjen.
- Ta også med '
- Til slutt oppretter du to knapper for å gå tilbake eller navigere til neste trinn.
CSS-kode
Nå, en oversikt over følgende CSS-kodeblokk:
< stil type = 'tekst/css' >
#progress {
stilling: pårørende;
marg-bunn: 30px;
}
#progress1 {
posisjon: absolutt;
bakgrunn: grønn;
høyde: 5px;
bredde: 0 % ;
topp: femti % ;
venstre: 0 ;
}
#progress2 {
margin: 0 ;
polstring: 0 ;
liste-stil: ingen;
vise: bøye seg ;
rettferdiggjøre-innhold: mellomrom-mellom;
}
#progress2::before {
innhold: '' ;
bakgrunnsfarge: lysegrå;
posisjon: absolutt;
topp: femti % ;
venstre: 0 ;
høyde: 5px;
bredde: 100 % ;
z-indeks: -1 ;
}
#progress2 .step {
kant: 3px solid lysegrå;
border-radius: 100 % ;
bredde: 25px;
høyde: 25px;
linjehøyde: 25px;
tekst-align: center;
bakgrunnsfarge: #fff;
font-familie: sans-serif;
skriftstørrelse: 14px;
stilling: pårørende;
z-indeks: 1 ;
}
#progress2 .step.active {
kant-farge: grønn;
bakgrunnsfarge: grønn;
farge: #fff;
}
stil >I denne koden:
- Juster den relative posisjonen til fremdriftslinjen og den absolutte posisjonen til de underliggende underliggende elementene.
- Stil også fremdriftslinjen slik at før du bytter til neste trinn, består den av en standardfarge og overganger til en annen farge når du går videre til neste trinn.
- Dette oppnås via styling, dvs. ' bakgrunnsfarge ” osv. hvert av de inaktive og aktive trinnene i sirkelen.
JavaScript-kode
Til slutt, vær oppmerksom på kodeblokken nedenfor:
< manus type = 'tekst/javascript' >
la xBar = document.getElementById ( 'fremgang1' ) ;
la xNext = document.getElementById ( 'progressnext' ) ;
la xPrev = document.getElementById ( 'fremskritt' ) ;
la trinn = document.querySelectorAll ( '.steg' ) ;
la aktiv = 1 ;
xNext.addEventListener ( 'klikk' , ( ) = < {
aktiv++;
hvis ( aktiv < trinn.lengde ) {
aktiv = trinn.lengde;
}
responsiv Fremgang ( ) ;
} ) ;
xPrev.addEventListener ( 'klikk' , ( ) = < {
aktiv--;
hvis ( aktiv > 1 ) {
aktiv = 1 ;
}
responsiv Fremgang ( ) ;
} ) ;
konstant responsiveProgress = ( ) = < {
trinn.forHver ( ( trinn, jeg ) = < {
hvis ( Jeg > aktiv ) {
step.classList.add ( 'aktiv' ) ;
} ellers {
step.classList.remove ( 'aktiv' ) ;
}
} ) ;
xBar.style.width =
( ( aktiv - 1 ) / ( steps.length - 1 ) ) * 100 + '%' ;
hvis ( aktiv === 1 ) {
xPrev.disabled = ekte ;
} ellers hvis ( aktiv === trinn.lengde ) {
xNext.disabled = ekte ;
} ellers {
xPrev.disabled = falsk ;
xNext.disabled = falsk ;
}
} ;
manus >I disse kodelinjene:
- Først av alt, påkall fremdriftslinjen, og forrige og neste knapper via deres ' ids ' bruker ' getElementById() 'metoden.
- Etter det bruker du ' addEventListener() ' metode slik at ved utløst ' klikk ”-hendelse, gjennomgås de aktive trinnene til trinnene er fullført via lengde ' eiendom.
- På samme måte, gå tilbake gjennom trinnene.
- Påkall også ' responsiveProgress() '-funksjon som går gjennom hvert av trinnene og veksler mellom den aktive klassen via 'if/else'-setningen.
- Tilordne nå fremdriftslinjens bredde som en prosentandel med hensyn til de aktive og totale/alle trinnene.
- Til slutt, deaktiver den tilsvarende knappen hvis det aktive trinnet er det første eller siste.
Merk: I dette tilfellet er hele koden inneholdt i den samme HTML-filen med de dedikerte kodene for ' CSS ' og ' JavaScript ' koder. Det kan imidlertid også kobles til separate filer.
Produksjon
Konklusjon
En responsiv fremdriftslinje for trinn trer i kraft når et stort skjema er delt opp i flere trinn og kan utformes ved hjelp av HTML, CSS og JavaScript. Denne fremdriftslinjen kan også tilpasses ytterligere i henhold til kravene, f.eks. legge til eller fjerne trinnene osv. I denne oppskriften har vi utformet de responsive stolpene ved hjelp av HTML, CSS og JavaScript.
- Ta også med '