Dok stvaraju interaktivne i korisniku prilagođene obrasce ili stranice portala na web-mjestu, programeri obično ugrađuju responzivne trake napretka koje su privlačne i obavještavaju korisnika o dovršenom statusu obrasca ili stvaraju profil. Ove vrste funkcionalnosti su od velike pomoći u poboljšanju korisničkog iskustva određene stranice.
Ovaj blog raspravlja o sljedećim aspektima:
- Što je responzivna traka napretka?
- Kako dizajnirati responzivnu traku napretka koristeći HTML, CSS i JavaScript?
Što je responzivna traka napretka?
U ovoj određenoj traci napretka, veliki obrazac je podijeljen u više koraka. Ova traka obavještava posjetitelje o statusu ispunjenih i preostalih obrazaca.
Kako dizajnirati responzivnu traku napretka koristeći HTML, CSS i JavaScript?
Responzivna traka napretka može se dizajnirati uz pomoć HTML-a, CSS-a i JavaScripta. Da biste to učinili, provjerite sljedeći kod. Prvo istražite HTML dio koda, kako slijedi:
< h2 stil = 'poravnavanje teksta: centar;' > Responzivna traka napretka h2 >
< div iskaznica = 'napredak' >
< div iskaznica = 'napredak1' > div >
< ul iskaznica = 'napredak2' >
< da razreda = 'aktivan korak' > 1 da >
< da razreda = 'korak' > 2 da >
< da razreda = 'korak' > 3 da >
< da razreda = 'korak' > Kraj da >
ul >
div >
< dugme iskaznica = 'progressback' razreda = 'btn' onemogućeno > leđa dugme >
< dugme iskaznica = 'napredak sljedeći' razreda = 'btn' > Sljedeći dugme >
U gornjem isječku koda primijenite dolje navedene metodologije:
- Napravite naslov i uključite dva ' ” za prikupljanje trake napretka.
- Također uključite '
- Na kraju, stvorite dva gumba za povratak ili navigaciju do sljedećeg koraka.
CSS kod
Sada, pregled sljedećeg bloka CSS koda:
< stil tip = 'tekst/css' >
#napredak {
položaj: relativan;
margina-dno: 30px;
}
#progress1 {
pozicija: apsolutna;
pozadina: zelena;
visina: 5px;
širina: 0 % ;
vrh: pedeset % ;
lijevo: 0 ;
}
#progress2 {
margina: 0 ;
padding: 0 ;
list-style: nijedan;
prikaz: savijati ;
justify-content: razmak između;
}
#progress2::before {
sadržaj: '' ;
boja pozadine: svijetlosiva;
pozicija: apsolutna;
vrh: pedeset % ;
lijevo: 0 ;
visina: 5px;
širina: 100 % ;
z-indeks: -1 ;
}
#progress2 .step {
obrub: 3px puna svijetlosiva;
radijus granice: 100 % ;
širina: 25px;
visina: 25px;
line-height: 25px;
poravnanje teksta: središte;
boja pozadine: #F F F;
obitelj-fontova: sans-serif;
veličina fonta: 14px;
položaj: relativan;
z-indeks: 1 ;
}
#progress2 .step.active {
boja obruba: zelena;
boja pozadine: zelena;
boja: #F F F;
}
stil >U ovom kodu:
- Podesite relativni položaj trake napretka i apsolutni položaj donjih podređenih elemenata.
- Također, stilizirajte traku napretka tako da prije prelaska na sljedeći korak sadrži zadanu boju i prelazi u drugu boju nakon prelaska na sljedeći korak.
- To se postiže stiliziranjem, tj. boja pozadine ” itd. svaki od neaktivnih i aktivnih koraka unutar kruga.
JavaScript kod
Na kraju, obratite pozornost na dolje navedeni blok koda:
< skripta tip = 'tekst/javascript' >
neka xBar = document.getElementById ( 'napredak1' ) ;
neka xDalje = document.getElementById ( 'napredak sljedeći' ) ;
neka xPrev = document.getElementById ( 'progressback' ) ;
neka koraci = document.querySelectorAll ( '.korak' ) ;
neka aktivan = 1 ;
xNext.addEventListener ( 'klik' , ( ) = < {
aktivan++;
ako ( aktivan < koraka.duljina ) {
aktivno = koraci.duljina;
}
responsiveProgress ( ) ;
} ) ;
xPrev.addEventListener ( 'klik' , ( ) = < {
aktivan--;
ako ( aktivan > 1 ) {
aktivan = 1 ;
}
responsiveProgress ( ) ;
} ) ;
const responsiveProgress = ( ) = < {
koraci.zaSvakog ( ( korak, i ) = < {
ako ( ja > aktivan ) {
korak.classList.add ( 'aktivan' ) ;
} drugo {
korak.classList.ukloni ( 'aktivan' ) ;
}
} ) ;
xBar.style.width =
( ( aktivno - 1 ) / ( koraci.duljina - 1 ) ) * 100 + '%' ;
ako ( aktivan === 1 ) {
xPrev.disabled = pravi ;
} drugo ako ( aktivan === koraka.duljina ) {
xNext.disabled = pravi ;
} drugo {
xPrev.disabled = lažno ;
xNext.disabled = lažno ;
}
} ;
skripta >U ovim linijama koda:
- Prije svega, pozovite traku napretka i gumbe prethodni i sljedeći putem njihovih ' ID-ovi ' koristiti ' getElementById() ” metoda.
- Nakon toga primijenite ' addEventListener() ' metoda takva da nakon pokrenutog ' klik ', aktivni koraci se prelaze dok se koraci ne završe putem ' duljina ” vlasništvo.
- Isto tako, prijeđite natrag kroz stepenice.
- Također, pozovite ' responsiveProgress() ” funkcija koja prolazi kroz svaki od koraka i prebacuje aktivnu klasu putem naredbe “if/else”.
- Sada dodijelite širinu trake napretka kao postotak u odnosu na aktivne i ukupne/sve korake.
- Na kraju, onemogućite odgovarajući gumb ako je aktivni korak prvi ili zadnji.
Bilješka: U ovom slučaju, cijeli se kôd nalazi u istoj HTML datoteci s namjenskim oznakama za ' CSS ' i ' JavaScript ” kodova. Međutim, zasebne datoteke također se mogu povezati.
Izlaz
Zaključak
Responzivna traka napretka koraka stupa na snagu kada se veliki obrazac podijeli u više koraka i može se dizajnirati pomoću HTML-a, CSS-a i JavaScripta. Ova traka napretka također se može dodatno prilagoditi prema zahtjevima, tj. dodavanjem ili uklanjanjem koraka, itd. U ovom smo tekstu razradili dizajn responzivnih traka pomoću HTML-a, CSS-a i JavaScripta.
- Također uključite '