När utvecklarna skapar interaktiva och användarvänliga formulär eller portalsidor på webbplatsen, använder utvecklarna vanligtvis responsiva förloppsindikatorer som är tilltalande och låter användaren veta om formulärets ifyllda status eller skapar en profil. Dessa typer av funktioner är till stor hjälp för att förbättra användarupplevelsen på en specifik webbplats.
Den här bloggen diskuterar följande aspekter:
- Vad är en responsiv förloppsindikator?
- Hur designar man en responsiv förloppsindikator med HTML, CSS och JavaScript?
Vad är en responsiv förloppsindikator?
I denna speciella förloppsindikator är ett stort formulär uppdelat i flera steg. Den här stapeln meddelar besökarna om statusen för de ifyllda och återstående formulären.
Hur designar man en responsiv förloppsindikator med HTML, CSS och JavaScript?
En responsiv förloppsindikator kan utformas med hjälp av HTML, CSS och JavaScript. För att göra det, kolla in följande kod. Först, fördjupa dig i HTML-delen av koden, enligt följande:
< h2 stil = 'text-align: center;' > Responsiv förloppsindikator h2 >
< div id = 'framsteg' >
< div id = 'framsteg1' > div >
< ul id = 'framsteg 2' >
< den där klass = 'steg aktiv' > 1 den där >
< den där klass = 'steg' > 2 den där >
< den där klass = 'steg' > 3 den där >
< den där klass = 'steg' > Slutet den där >
ul >
div >
< knapp id = 'framsteg tillbaka' klass = 'btn' Inaktiverad > Tillbaka knapp >
< knapp id = 'progressnext' klass = 'btn' > Nästa knapp >
I ovanstående kodavsnitt tillämpar du nedanstående metoder:
- Skapa en rubrik och inkludera två ' '-element för att samla förloppsindikatorn.
- Inkludera även '
- Till sist, skapa två knappar för att gå tillbaka eller navigera till nästa steg.
CSS-kod
Nu, en översikt över följande CSS-kodblock:
< stil typ = 'text/css' >
#progress {
position: relativ;
margin-bottom: 30px;
}
#progress1 {
position: absolut;
bakgrund: grön;
höjd: 5px;
bredd: 0 % ;
topp: femtio % ;
vänster: 0 ;
}
#progress2 {
marginal: 0 ;
stoppning: 0 ;
list-stil: ingen;
visa: böja ;
motivera-innehåll: mellanslag-mellan;
}
#progress2::before {
innehåll: '' ;
bakgrundsfärg: ljusgrå;
position: absolut;
topp: femtio % ;
vänster: 0 ;
höjd: 5px;
bredd: 100 % ;
z-index: -1 ;
}
#progress2 .step {
kant: 3px fast ljusgrå;
gränsradie: 100 % ;
bredd: 25px;
höjd: 25px;
linjehöjd: 25px;
text-align: center;
bakgrundsfärg: #fff;
teckensnittsfamilj: sans-serif;
teckensnittsstorlek: 14px;
position: relativ;
z-index: 1 ;
}
#progress2 .step.active {
kantfärg: grön;
bakgrundsfärg: grön;
Färg: #fff;
}
stil >I denna kod:
- Justera den relativa positionen för förloppsindikatorn och den absoluta positionen för de underliggande underliggande elementen.
- Utforma också förloppsindikatorn så att innan du byter till nästa steg, innehåller den en standardfärg och övergår till en annan färg när du går vidare till nästa steg.
- Detta uppnås genom styling, dvs. bakgrundsfärg ” etc. vart och ett av de inaktiva och aktiva stegen inom cirkeln.
JavaScript-kod
Slutligen, var uppmärksam på nedanstående kodblock:
< manus typ = 'text/javascript' >
låta xBar = document.getElementById ( 'framsteg1' ) ;
låta xNext = document.getElementById ( 'progressnext' ) ;
låta xPrev = document.getElementById ( 'framsteg tillbaka' ) ;
låta steg = document.querySelectorAll ( '.steg' ) ;
låta aktiv = 1 ;
xNext.addEventListener ( 'klick' , ( ) = < {
aktiv++;
om ( aktiva < steg.längd ) {
aktiv = steg.längd;
}
lyhörd Framsteg ( ) ;
} ) ;
xPrev.addEventListener ( 'klick' , ( ) = < {
aktiva--;
om ( aktiva > 1 ) {
aktiv = 1 ;
}
lyhörd Framsteg ( ) ;
} ) ;
const responsiveProgress = ( ) = < {
steg.för varje ( ( steg, jag ) = < {
om ( i > aktiva ) {
step.classList.add ( 'aktiva' ) ;
} annan {
step.classList.remove ( 'aktiva' ) ;
}
} ) ;
xBar.style.width =
( ( aktiva - 1 ) / ( steg.längd - 1 ) ) * 100 + '%' ;
om ( aktiv === 1 ) {
xPrev.disabled = Sann ;
} annan om ( aktiv === steg.längd ) {
xNext.disabled = Sann ;
} annan {
xPrev.disabled = falsk ;
xNext.disabled = falsk ;
}
} ;
manus >I dessa kodrader:
- Först av allt, anropa förloppsfältet och föregående och nästa knappar via deras ' ids ' använda ' getElementById() 'metoden.
- Efter det, använd ' addEventListener() ' metod så att vid den utlösta ' klick ' händelsen, de aktiva stegen korsas tills stegen är klara via ' längd ' fast egendom.
- På samma sätt, gå tillbaka genom stegen.
- Åberopa även ' responsiveProgress() '-funktion som går igenom vart och ett av stegen och växlar den aktiva klassen via 'if/else'-satsen.
- Tilldela nu förloppsindikatorns bredd som en procentandel med avseende på de aktiva och totala/alla steg.
- Slutligen, inaktivera motsvarande knapp om det aktiva steget är det första eller sista.
Notera: I det här fallet finns hela koden i samma HTML-fil med de dedikerade taggarna för ' CSS ' och ' JavaScript ' koder. Men separata filer kan också länkas.
Produktion
Slutsats
En responsiv stegförloppsindikator träder i kraft när ett stort formulär delas upp i flera steg och kan utformas med HTML, CSS och JavaScript. Den här förloppsindikatorn kan också anpassas ytterligare enligt kraven, t.ex. lägga till eller ta bort stegen, etc. I den här skrivningen har vi utvecklat de responsiva staplarna med HTML, CSS och JavaScript.
- Inkludera även '