Mens udviklerne opretter interaktive og brugervenlige formularer eller portalsider på webstedet, inkorporerer udviklerne normalt responsive fremskridtsbjælker, der er tiltalende og lader brugeren vide om formularens udfyldte status eller opretter en profil. Disse typer af funktionaliteter er til stor hjælp til at forbedre brugeroplevelsen på et specifikt websted.
Denne blog diskuterer følgende aspekter:
- Hvad er en responsiv statuslinje?
- Hvordan designes en responsiv statuslinje ved hjælp af HTML, CSS og JavaScript?
Hvad er en responsiv statuslinje?
I denne særlige statuslinje er en stor formular opdelt i flere trin. Denne bjælke giver de besøgende besked om status for de udfyldte og resterende formularer.
Hvordan designes en responsiv statuslinje ved hjælp af HTML, CSS og JavaScript?
En responsiv statuslinje kan designes ved hjælp af HTML, CSS og JavaScript. For at gøre det, tjek følgende kode. Først skal du dykke ned i HTML-delen af koden, som følger:
< h2 stil = 'text-align: center;' > Responsiv statuslinje h2 >
< div id = 'fremskridt' >
< div id = 'fremskridt 1' > div >
< ul id = 'fremskridt 2' >
< at klasse = 'trin aktiv' > 1 at >
< at klasse = 'trin' > 2 at >
< at klasse = 'trin' > 3 at >
< at klasse = 'trin' > Ende at >
ul >
div >
< knap id = 'fremskridt tilbage' klasse = 'btn' handicappet > Tilbage knap >
< knap id = 'fremskridt næste' klasse = 'btn' > Næste knap >
I ovenstående kodestykke skal du anvende nedenstående metoder:
- Opret en overskrift og medtag to ' ”-elementer for at akkumulere statuslinjen.
- Inkluder også '
- Til sidst skal du oprette to knapper for at flytte henholdsvis tilbage eller navigere til næste trin.
CSS kode
Nu en oversigt over følgende CSS-kodeblok:
< stil type = 'tekst/css' >
#fremskridt {
stilling: relativ;
margin-bund: 30px;
}
#progress1 {
position: absolut;
baggrund: grøn;
højde: 5px;
bredde: 0 % ;
top: halvtreds % ;
venstre: 0 ;
}
#progress2 {
margin: 0 ;
polstring: 0 ;
liste-stil: ingen;
Skærm: bøje ;
retfærdiggøre-indhold: mellemrum-mellem;
}
#progress2::before {
indhold: '' ;
baggrundsfarve: lysegrå;
position: absolut;
top: halvtreds % ;
venstre: 0 ;
højde: 5px;
bredde: 100 % ;
z-indeks: -1 ;
}
#progress2 .trin {
kant: 3px ensfarvet lysegrå;
grænse-radius: 100 % ;
bredde: 25px;
højde: 25px;
linjehøjde: 25px;
tekst-align: center;
baggrundsfarve: #fff;
font-familie: sans-serif;
skriftstørrelse: 14px;
stilling: relativ;
z-indeks: 1 ;
}
#progress2 .step.active {
kant-farve: grøn;
baggrundsfarve: grøn;
farve: #fff;
}
stil >I denne kode:
- Juster den relative position af statuslinjen og den absolutte position af de underliggende underliggende elementer.
- Stil også statuslinjen sådan, at før du skifter til næste trin, omfatter den en standardfarve og overgange til en anden farve, når du fortsætter til næste trin.
- Dette opnås via styling, dvs. baggrundsfarve ” osv. hvert af de inaktive og aktive trin i cirklen.
JavaScript kode
Til sidst skal du være opmærksom på nedenstående kodeblok:
< manuskript type = 'tekst/javascript' >
lade xBar = document.getElementById ( 'fremskridt 1' ) ;
lade xNext = document.getElementById ( 'fremskridt næste' ) ;
lade xPrev = document.getElementById ( 'fremskridt tilbage' ) ;
lade steps = document.querySelectorAll ( '.trin' ) ;
lade aktiv = 1 ;
xNext.addEventListener ( 'klik' , ( ) = < {
aktiv++;
hvis ( aktiv < skridt.længde ) {
aktiv = trin.længde;
}
lydhør Fremskridt ( ) ;
} ) ;
xPrev.addEventListener ( 'klik' , ( ) = < {
aktiv--;
hvis ( aktiv > 1 ) {
aktiv = 1 ;
}
lydhør Fremskridt ( ) ;
} ) ;
konstant responsiveProgress = ( ) = < {
trin.forHver ( ( trin, dvs ) = < {
hvis ( jeg > aktiv ) {
step.classList.add ( 'aktiv' ) ;
} andet {
step.classList.remove ( 'aktiv' ) ;
}
} ) ;
xBar.style.width =
( ( aktiv - 1 ) / ( steps.length - 1 ) ) * 100 + '%' ;
hvis ( aktiv === 1 ) {
xPrev.disabled = rigtigt ;
} andet hvis ( aktiv === trin.længde ) {
xNext.disabled = rigtigt ;
} andet {
xPrev.disabled = falsk ;
xNext.disabled = falsk ;
}
} ;
manuskript >I disse kodelinjer:
- Først og fremmest skal du aktivere statuslinjen og de forrige og næste knapper via deres ' ids ' bruger ' getElementById() ” metode.
- Anvend derefter ' addEventListener() ' metode sådan, at ved den udløste ' klik ” hændelse, gennemløbes de aktive trin, indtil trinene er afsluttet via ” længde ” ejendom.
- Kør ligeledes tilbage gennem trinene.
- Påkald også ' responsiveProgress() ”-funktion, der går gennem hvert af trinene og skifter til den aktive klasse via 'if/else'-sætningen.
- Tildel nu statuslinjens bredde som en procentdel i forhold til de aktive og samlede/alle trin.
- Til sidst skal du deaktivere den tilsvarende knap, hvis det aktive trin er det første eller sidste.
Bemærk: I dette tilfælde er hele koden indeholdt i den samme HTML-fil med de dedikerede tags for ' CSS ' og ' JavaScript ' koder. Der kan dog også linkes til separate filer.
Produktion
Konklusion
En responsiv trinfremskridtslinje træder i kraft, når en stor formular er opdelt i flere trin og kan designes ved hjælp af HTML, CSS og JavaScript. Denne statuslinje kan også tilpasses yderligere i henhold til kravene, dvs. tilføjelse eller fjernelse af trinene osv. I denne opskrivning har vi uddybet design af de responsive søjler ved hjælp af HTML, CSS og JavaScript.
- Inkluder også '