Durante la creazione di moduli o pagine del portale interattivi e intuitivi sul sito, gli sviluppatori di solito incorporano barre di avanzamento reattive che sono attraenti e informano l'utente dello stato completato del modulo o creano un profilo. Questi tipi di funzionalità sono di grande aiuto per migliorare l'esperienza dell'utente di un sito specifico.
In questo blog vengono trattati i seguenti aspetti:
- Cos'è una barra di avanzamento reattiva?
- Come progettare una barra di avanzamento reattiva utilizzando HTML, CSS e JavaScript?
Cos'è una barra di avanzamento reattiva?
In questa particolare barra di avanzamento, un modulo di grandi dimensioni è suddiviso in più passaggi. Questa barra notifica ai visitatori lo stato dei moduli completati e rimanenti.
Come progettare una barra di avanzamento reattiva utilizzando HTML, CSS e JavaScript?
Una barra di avanzamento reattiva può essere progettata con l'aiuto di HTML, CSS e JavaScript. Per fare ciò, controlla il seguente codice. Innanzitutto, approfondisci la parte HTML del codice, come segue:
< h2 stile = 'allineamento testo: centro;' > Barra di avanzamento reattiva h2 >
< div id = 'progresso' >
< div id = 'progresso1' > div >
< ul id = 'progresso2' >
< Quello classe = 'passaggio attivo' > 1 Quello >
< Quello classe = 'fare un passo' > 2 Quello >
< Quello classe = 'fare un passo' > 3 Quello >
< Quello classe = 'fare un passo' > FINE Quello >
ul >
div >
< pulsante id = 'progresso' classe = 'btn' Disabilitato > Indietro pulsante >
< pulsante id = 'progressosuccessivo' classe = 'btn' > Prossimo pulsante >
Nello snippet di codice sopra, applica le metodologie indicate di seguito:
- Crea un'intestazione e includi due “ 'elementi per accumulare la barra di avanzamento.
- Inoltre, includere il '
- Infine, crea due pulsanti rispettivamente per tornare indietro o passare al passaggio successivo.
Codice CSS
Ora, una panoramica del seguente blocco di codice CSS:
< stile tipo = 'testo/css' >
#progresso {
posizione: relativa;
margine inferiore: 30px;
}
#progresso1 {
posizione: assoluta;
sfondo: verde;
altezza: 5px;
larghezza: 0 % ;
superiore: cinquanta % ;
Sinistra: 0 ;
}
#progresso2 {
margine: 0 ;
imbottitura: 0 ;
stile elenco: nessuno;
Schermo: flettere ;
giustifica-contenuto: spazio-tra;
}
#progress2::prima {
contenuto: '' ;
colore di sfondo: grigio chiaro;
posizione: assoluta;
superiore: cinquanta % ;
Sinistra: 0 ;
altezza: 5px;
larghezza: 100 % ;
indice z: -1 ;
}
#progress2 .passo {
bordo: 3px grigio chiaro pieno;
raggio del bordo: 100 % ;
larghezza: 25px;
altezza: 25px;
altezza della linea: 25px;
allineamento del testo: centro;
colore di sfondo: #F F F;
famiglia di caratteri: sans-serif;
dimensione carattere: 14px;
posizione: relativa;
indice z: 1 ;
}
#progress2 .step.attivo {
colore del bordo: verde;
colore di sfondo: verde;
colore: #F F F;
}
stile >In questo codice:
- Regola la posizione relativa della barra di avanzamento e la posizione assoluta degli elementi figli sottostanti.
- Inoltre, modella la barra di avanzamento in modo tale che prima di passare al passaggio successivo, comprenda un colore predefinito e passi a un colore diverso procedendo al passaggio successivo.
- Ciò si ottiene tramite lo stile, ad esempio ' colore di sfondo ” ecc. ciascuno dei passaggi inattivi e attivi all'interno del cerchio.
Codice JavaScript
Infine, presta attenzione al blocco di codice fornito di seguito:
< sceneggiatura tipo = 'testo/javascript' >
permettere xBar = document.getElementById ( 'progresso1' ) ;
permettere xNext = document.getElementById ( 'progressosuccessivo' ) ;
permettere xPrev = document.getElementById ( 'progresso' ) ;
permettere passi = document.querySelectorAll ( '.fare un passo' ) ;
permettere attivo = 1 ;
xNext.addEventListener ( 'clic' , ( ) = < {
attivo++;
Se ( attivo < passi.lunghezza ) {
attivo = passi.lunghezza;
}
reattivoProgresso ( ) ;
} ) ;
xPrev.addEventListener ( 'clic' , ( ) = < {
attivo--;
Se ( attivo > 1 ) {
attivo = 1 ;
}
reattivoProgresso ( ) ;
} ) ;
const responsiveProgress = ( ) = < {
passi.forEach ( ( passo, io ) = < {
Se ( io > attivo ) {
step.classList.add ( 'attivo' ) ;
} altro {
step.classList.remove ( 'attivo' ) ;
}
} ) ;
xBar.stile.larghezza =
( ( attivo - 1 ) / ( passi.lunghezza - 1 ) ) * 100 + '%' ;
Se ( attivo === 1 ) {
xPrev.disabled = VERO ;
} altro Se ( attivo === passi.lunghezza ) {
xNext.disabled = VERO ;
} altro {
xPrev.disabled = falso ;
xNext.disabled = falso ;
}
} ;
sceneggiatura >In queste righe di codice:
- Prima di tutto, richiama la barra di avanzamento e i pulsanti precedente e successivo tramite il loro “ ID ' usando il ' getElementById() ' metodo.
- Successivamente, applicare il ' aggiungiEventListener() 'metodo tale che al momento dell'attivazione' clic ', i passi attivi vengono eseguiti finché i passi non vengono completati tramite l'evento ' lunghezza ' proprietà.
- Allo stesso modo, torna indietro attraverso i passaggi.
- Inoltre, invocare il ' reattivoProgresso() ' che esegue il loop attraverso ciascuno dei passaggi e attiva/disattiva la classe attiva tramite l'istruzione 'if/else'.
- Ora assegna la larghezza della barra di avanzamento come percentuale rispetto ai passaggi attivi e totali/tutti.
- Infine disabilitare il pulsante corrispondente se il passo attivo è il primo o l'ultimo.
Nota: In questo caso l’intero codice è contenuto nello stesso file HTML con i tag dedicati per “ CSS ' E ' JavaScript ' codici. Tuttavia è possibile collegare anche file separati.
Produzione
Conclusione
Una barra di avanzamento dei passaggi reattiva diventa effettiva quando un modulo di grandi dimensioni viene suddiviso in più passaggi e può essere progettato utilizzando HTML, CSS e JavaScript. Questa barra di avanzamento può anche essere ulteriormente personalizzata in base ai requisiti, ad esempio aggiungendo o rimuovendo passaggi, ecc. In questo articolo, abbiamo approfondito la progettazione delle barre reattive utilizzando HTML, CSS e JavaScript.
- Inoltre, includere il '