Bij het maken van interactieve en gebruiksvriendelijke formulieren of portaalpagina's op de site, nemen de ontwikkelaars meestal responsieve voortgangsbalken op die aantrekkelijk zijn en de gebruiker op de hoogte stellen van de voltooide status van het formulier of een profiel aanmaken. Dit soort functionaliteiten zijn een grote hulp bij het verbeteren van de gebruikerservaring van een specifieke site.
In deze blog worden de volgende aspecten besproken:
- Wat is een responsieve voortgangsbalk?
- Hoe ontwerp je een responsieve voortgangsbalk met behulp van HTML, CSS en JavaScript?
Wat is een responsieve voortgangsbalk?
In deze specifieke voortgangsbalk is een groot formulier opgesplitst in meerdere stappen. Deze balk informeert de bezoekers over de status van de ingevulde en resterende formulieren.
Hoe ontwerp je een responsieve voortgangsbalk met behulp van HTML, CSS en JavaScript?
Een responsieve voortgangsbalk kan worden ontworpen met behulp van HTML, CSS en JavaScript. Bekijk hiervoor de volgende code. Verdiep je eerst als volgt in het HTML-gedeelte van de code:
< h2 stijl = 'tekst uitlijnen: centreren;' > Responsieve voortgangsbalk h2 >
< div ID kaart = 'voortgang' >
< div ID kaart = 'vooruitgang1' > div >
< ul ID kaart = 'vooruitgang2' >
< Dat klas = 'stap actief' > 1 Dat >
< Dat klas = 'stap' > 2 Dat >
< Dat klas = 'stap' > 3 Dat >
< Dat klas = 'stap' > Einde Dat >
ul >
div >
< knop ID kaart = 'vooruitgang terug' klas = 'btn' gehandicapt > Rug knop >
< knop ID kaart = 'vooruitgangvolgende' klas = 'btn' > Volgende knop >
Pas in het bovenstaande codefragment de onderstaande methodologieën toe:
- Maak een kop en voeg twee “ '-elementen om de voortgangsbalk te verzamelen.
- Vermeld ook de “
- Maak ten slotte twee knoppen om respectievelijk terug te gaan of naar de volgende stap te navigeren.
CSS-code
Nu een overzicht van het volgende CSS-codeblok:
< stijl type = 'tekst/css' >
#voortgang {
positie: relatief;
marge-onder: 30px;
}
#vooruitgang1 {
positie: absoluut;
achtergrond: groen;
hoogte: 5px;
breedte: 0 % ;
bovenkant: vijftig % ;
links: 0 ;
}
#vooruitgang2 {
marge: 0 ;
opvulling: 0 ;
lijststijl: geen;
weergave: buigen ;
rechtvaardigen-inhoud: ruimte tussen;
}
#progress2::voor {
inhoud: '' ;
achtergrondkleur: lichtgrijs;
positie: absoluut;
bovenkant: vijftig % ;
links: 0 ;
hoogte: 5px;
breedte: 100 % ;
z-index: -1 ;
}
#vooruitgang2 .stap {
rand: 3px effen lichtgrijs;
grensradius: 100 % ;
breedte: 25px;
hoogte: 25px;
lijnhoogte: 25px;
tekst uitlijnen: centreren;
Achtergrond kleur: #fff;
lettertypefamilie: schreefloos;
lettergrootte: 14px;
positie: relatief;
z-index: 1 ;
}
#progress2 .step.actief {
randkleur: groen;
achtergrondkleur: groen;
kleur: #fff;
}
stijl >In deze code:
- Pas de relatieve positie van de voortgangsbalk en de absolute positie van de onderliggende onderliggende elementen aan.
- Geef de voortgangsbalk ook een zodanige stijl dat deze, voordat u naar de volgende stap overschakelt, een standaardkleur bevat en overgaat naar een andere kleur wanneer u doorgaat naar de volgende stap.
- Dit wordt bereikt via styling, d.w.z.: “ Achtergrond kleur ” enz. elk van de inactieve en actieve stappen binnen de cirkel.
JavaScript-code
Let ten slotte op het onderstaande codeblok:
< script type = 'tekst/javascript' >
laten xBar = document.getElementById ( 'vooruitgang1' ) ;
laten xNext = document.getElementById ( 'vooruitgangvolgende' ) ;
laten xPrev = document.getElementById ( 'vooruitgang terug' ) ;
laten stappen = document.querySelectorAll ( '.stap' ) ;
laten actief = 1 ;
xNext.addEventListener ( 'Klik' , ( ) = < {
actief++;
als ( actief < stappen.lengte ) {
actief = stappen.lengte;
}
responsiefVooruitgang ( ) ;
} ) ;
xPrev.addEventListener ( 'Klik' , ( ) = < {
actief--;
als ( actief > 1 ) {
actief = 1 ;
}
responsiefVooruitgang ( ) ;
} ) ;
const responsiveProgress = ( ) = < {
stappen.voorElk ( ( stap, ik ) = < {
als ( i > actief ) {
stap.classList.add ( 'actief' ) ;
} anders {
stap.classList.verwijderen ( 'actief' ) ;
}
} ) ;
xBar.stijl.breedte =
( ( actief - 1 ) / ( stappen.lengte - 1 ) ) * 100 + '%' ;
als ( actief === 1 ) {
xPrev.disabled = WAAR ;
} anders als ( actief === stappen.lengte ) {
xVolgende.disabled = WAAR ;
} anders {
xPrev.disabled = vals ;
xVolgende.disabled = vals ;
}
} ;
script >In deze coderegels:
- Roep allereerst de voortgangsbalk en de vorige en volgende knoppen op via hun “ ID's ' de ... gebruiken ' getElementById() methode.
- Pas daarna de “ addEventListener() ”-methode zodanig dat bij de geactiveerde “ Klik ”-gebeurtenis worden de actieve stappen doorlopen totdat de stappen zijn voltooid via de “ lengte ' eigendom.
- Ga op dezelfde manier terug door de trappen.
- Roep ook de “ responsiefVooruitgang() '-functie die elk van de stappen doorloopt en de actieve klasse schakelt via de 'if/else'-instructie.
- Wijs nu de breedte van de voortgangsbalk toe als een percentage ten opzichte van de actieve en totale/alle stappen.
- Schakel ten slotte de bijbehorende knop uit als de actieve stap de eerste of de laatste is.
Opmerking: In dit geval bevindt de volledige code zich in hetzelfde HTML-bestand met de speciale tags voor “ CSS ' En ' JavaScript ”codes. Er kunnen echter ook losse bestanden aan elkaar gekoppeld worden.
Uitvoer
Conclusie
Een responsieve stapvoortgangsbalk treedt in werking wanneer een groot formulier in meerdere stappen wordt opgesplitst en kan worden ontworpen met behulp van HTML, CSS en JavaScript. Deze voortgangsbalk kan ook verder worden aangepast aan de vereisten, bijvoorbeeld door stappen toe te voegen of te verwijderen, enz. In dit artikel hebben we dieper ingegaan op het ontwerpen van de responsieve balken met behulp van HTML, CSS en JavaScript.
- Vermeld ook de “