În timp ce creează formulare interactive și ușor de utilizat sau pagini de portal pe site, dezvoltatorii încorporează de obicei bare de progres receptive care sunt atrăgătoare și informează utilizatorul despre starea completată a formularului sau creează un profil. Aceste tipuri de funcționalități sunt de mare ajutor în îmbunătățirea experienței utilizatorului unui anumit site.
Acest blog discută următoarele aspecte:
- Ce este o bară de progres receptivă?
- Cum să proiectați o bară de progres receptivă utilizând HTML, CSS și JavaScript?
Ce este o bară de progres receptivă?
În această bară de progres, o formă mare este împărțită în mai mulți pași. Această bară informează vizitatorii despre starea formularelor completate și rămase.
Cum să proiectați o bară de progres receptivă utilizând HTML, CSS și JavaScript?
O bară de progres receptivă poate fi proiectată cu ajutorul HTML, CSS și JavaScript. Pentru a face acest lucru, consultați următorul cod. Mai întâi, aprofundați partea HTML a codului, după cum urmează:
< h2 stil = 'text-align: center;' > Bara de progres receptivă h2 >
< div id = 'progres' >
< div id = 'progres1' > div >
< ul id = 'progres2' >
< acea clasă = 'pas activ' > 1 acea >
< acea clasă = 'Etapa' > 2 acea >
< acea clasă = 'Etapa' > 3 acea >
< acea clasă = 'Etapa' > Sfârşit acea >
ul >
div >
< buton id = 'progres înapoi' clasă = 'btn' dezactivat > Înapoi buton >
< buton id = 'progresul următor' clasă = 'btn' > Următorul buton >
În fragmentul de cod de mai sus, aplicați metodologiile de mai jos:
- Creați un titlu și includeți două „ ” elemente pentru a acumula bara de progres.
- De asemenea, includeți „
- În cele din urmă, creați două butoane pentru a vă deplasa înapoi sau, respectiv, pentru a naviga la pasul următor.
Cod CSS
Acum, o prezentare generală a următorului bloc de cod CSS:
< stil tip = „text/css” >
#progres {
poziție: relativă;
margine-jos: 30px;
}
#progres1 {
poziție: absolută;
fundal: verde;
înălțime: 5px;
lăţime: 0 % ;
top: cincizeci % ;
stânga: 0 ;
}
#progres2 {
marja: 0 ;
umplutura: 0 ;
stil-listă: niciunul;
afişa: contracta ;
justificare-conținut: spațiu-între;
}
#progress2::înainte de {
conţinut: '' ;
culoare de fundal: gri deschis;
poziție: absolută;
top: cincizeci % ;
stânga: 0 ;
înălțime: 5px;
lăţime: 100 % ;
z-index: -1 ;
}
#progres2 .pas {
chenar: 3px gri deschis continuu;
raza de frontieră: 100 % ;
lățime: 25px;
înălțime: 25px;
înălțimea liniei: 25px;
text-align: centru;
culoare de fundal: #fff;
familie de fonturi: sans-serif;
dimensiunea fontului: 14px;
poziție: relativă;
z-index: 1 ;
}
#progres2 .pas.activ {
culoare-chenar: verde;
culoare de fundal: verde;
culoare: #fff;
}
stil >În acest cod:
- Ajustați poziția relativă a barei de progres și poziția absolută a elementelor subiacente.
- De asemenea, stilați bara de progres astfel încât, înainte de a trece la pasul următor, să cuprindă o culoare implicită și să treacă la o culoare diferită la trecerea la pasul următor.
- Acest lucru se realizează prin styling, adică „ culoare de fundal ” etc. fiecare dintre pașii inactivi și activi din cadrul cercului.
Cod JavaScript
În cele din urmă, acordați atenție blocului de cod furnizat mai jos:
< scenariu tip = „text/javascript” >
lăsa xBar = document.getElementById ( 'progres1' ) ;
lăsa xNext = document.getElementById ( 'progresul următor' ) ;
lăsa xPrev = document.getElementById ( 'progres înapoi' ) ;
lăsa pași = document.querySelectorAll ( '.Etapa' ) ;
lăsa activ = 1 ;
xNext.addEventListener ( 'clic' , ( ) = < {
activ++;
dacă ( activ < trepte.lungime ) {
activ = trepte.lungime;
}
responsiveProgress ( ) ;
} ) ;
xPrev.addEventListener ( 'clic' , ( ) = < {
activ--;
dacă ( activ > 1 ) {
activ = 1 ;
}
responsiveProgress ( ) ;
} ) ;
const responsiveProgress = ( ) = < {
pași.pentruFiecare ( ( pas, i ) = < {
dacă ( i > activ ) {
step.classList.add ( 'activ' ) ;
} altfel {
step.classList.remove ( 'activ' ) ;
}
} ) ;
xBar.style.width =
( ( activ - 1 ) / ( pași.lungime - 1 ) ) * 100 + „%” ;
dacă ( activ === 1 ) {
xPrev.disabled = Adevărat ;
} altfel dacă ( activ === trepte.lungime ) {
xNext.disabled = Adevărat ;
} altfel {
xPrev.disabled = fals ;
xNext.disabled = fals ;
}
} ;
scenariu >În aceste linii de cod:
- Mai întâi de toate, invocați bara de progres și butoanele anterior și următor prin intermediul lor „ id-uri ' folosind ' getElementById() ” metoda.
- După aceea, aplicați „ addEventListener() ” metoda astfel încât la declanșarea ” clic ” eveniment, pașii activi sunt parcurși până când pașii sunt terminați prin intermediul „ lungime ” proprietate.
- De asemenea, treceți înapoi prin trepte.
- De asemenea, invocați „ responsiveProgress() ” care trece prin fiecare dintre pași și comută clasa activă prin instrucțiunea „if/else”.
- Acum, atribuiți lățimea barei de progres ca procent în raport cu pașii activi și total/toți.
- În cele din urmă, dezactivați butonul corespunzător dacă pasul activ este primul sau ultimul.
Notă: În acest caz, întregul cod este conținut în același fișier HTML cu etichetele dedicate pentru „ CSS ' și ' JavaScript ” coduri. Cu toate acestea, se pot lega și fișiere separate.
Ieșire
Concluzie
O bară de progres al pașilor receptivă intră în vigoare atunci când un formular mare este împărțit în mai mulți pași și poate fi proiectat folosind HTML, CSS și JavaScript. Această bară de progres poate fi, de asemenea, personalizată în continuare conform cerințelor, și anume, adăugarea sau eliminarea pașilor etc. În acest articol, am elaborat despre proiectarea barelor receptive folosind HTML, CSS și JavaScript.
- De asemenea, includeți „