Kako oblikovati odzivne vrstice napredka z uporabo HTML, CSS in JavaScript

V zgornjem delčku kode uporabite spodaj podane metodologije:

• Ustvarite naslov in vključite dva '
  ” za zbiranje vrstice napredka.
• Vključite tudi »
  ”, ki vsebuje možnosti za premikanje skozi vrstico napredka, pri čemer je prva aktivna.
  • Na koncu ustvarite dva gumba za pomik nazaj ali navigacijo na naslednji korak.

  Koda CSS

  
  
  

  Zdaj pa pregled naslednjega bloka kode CSS:

  < stil vrsto = 'besedilo/css' >
  #napredek {
  položaj: relativni;
  rob-spodaj: 30px;
  }
  #progress1 {
  položaj: absolutno;
  ozadje: zeleno;
  višina: 5px;
  premer: 0 % ;
  vrh: petdeset % ;
  levo: 0 ;
  }
  #progress2 {
  rob: 0 ;
  oblazinjenje: 0 ;
  slog seznama: brez;
  zaslon: flex ;
  justify-content: presledek med;
  }
  #progress2::before {
  vsebina: '' ;
  barva ozadja: svetlo siva;
  položaj: absolutno;
  vrh: petdeset % ;
  levo: 0 ;
  višina: 5px;
  premer: 100 % ;
  z-indeks: -1 ;
  }
  #progress2 .step {
  obroba: 3px polna svetlosiva;
  mejni polmer: 100 % ;
  širina: 25px;
  višina: 25px;
  višina črte: 25px;
  poravnava besedila: sredina;
  Barva ozadja: #fff;
  družina pisav: sans-serif;
  velikost pisave: 14px;
  položaj: relativni;
  z-indeks: 1 ;
  }
  #progress2 .step.active {
  barva obrobe: zelena;
  barva ozadja: zelena;
  barva: #fff;
  }
  stil >

  V tej kodi:

  • Prilagodite relativni položaj vrstice napredka in absolutni položaj podrejenih elementov.
  • Oblikujte tudi vrstico napredka tako, da bo pred preklopom na naslednji korak vsebovala privzeto barvo in prešla v drugo barvo, ko nadaljujete na naslednji korak.
  • To se doseže s stylingom, tj. Barva ozadja ” itd. vsak od neaktivnih in aktivnih korakov v krogu.

  Koda JavaScript

  Na koncu bodite pozorni na spodnji kodni blok:

  < scenarij vrsto = 'besedilo/javascript' >
  pustiti xBar = document.getElementById ( 'napredek1' ) ;
  pustiti xNaprej = document.getElementById ( 'napredek naprej' ) ;
  pustiti xPrev = document.getElementById ( 'napredek nazaj' ) ;
  pustiti koraki = document.querySelectorAll ( '.step' ) ;
  pustiti aktivno = 1 ;
  xNext.addEventListener ( 'klik' , ( ) = < {
  aktiven++;
  če ( aktivna < koraki.dolžina ) {
  aktivno = koraki.dolžina;
  }
  responsiveProgress ( ) ;
  } ) ;
  xPrev.addEventListener ( 'klik' , ( ) = < {
  aktivno--;
  če ( aktivna > 1 ) {
  aktivno = 1 ;
  }
  responsiveProgress ( ) ;
  } ) ;
  const responsiveProgress = ( ) = < {
  steps.forEach ( ( korak, i ) = < {
  če ( jaz > aktivna ) {
  step.classList.add ( 'aktiven' ) ;
  } drugače {
  step.classList.remove ( 'aktiven' ) ;
  }
  } ) ;
  xBar.style.width =
  ( ( aktivno - 1 ) / ( koraki.dolžina - 1 ) ) * 100 + '%' ;
  če ( aktiven === 1 ) {
  xPrev.disabled = prav ;
  } drugače če ( aktivno === korakov.dolžina ) {
  xNext.disabled = prav ;
  } drugače {
  xPrev.disabled = lažno ;
  xNext.disabled = lažno ;
  }
  } ;
  scenarij >

  V teh vrsticah kode:

  • Najprej prikličite vrstico napredka ter gumba prejšnji in naslednji prek njihovega » ids ' uporabljati ' getElementById() ” metoda.
  • Po tem uporabite » addEventListener() ' tako, da ob sproženem ' kliknite ', se aktivni koraki prečkajo, dokler koraki niso končani prek ' dolžina ” lastnina.
  • Podobno se pomaknite nazaj skozi stopnice.
  • Prikličite tudi » responsiveProgress() ” funkcija, ki kroži skozi vsakega od korakov in preklopi aktivni razred prek stavka “if/else”.
  • Zdaj dodelite širino vrstice napredka kot odstotek glede na aktivne in skupne/vse korake.
  • Na koncu onemogočite ustrezni gumb, če je aktivni korak prvi ali zadnji.

  Opomba: V tem primeru je celotna koda v isti datoteki HTML z namenskimi oznakami za » CSS « in » JavaScript ” kode. Lahko pa se povežejo tudi ločene datoteke.

  Izhod

  

  Zaključek

  Odzivna vrstica napredka korakov začne veljati, ko je velik obrazec razdeljen na več korakov in ga je mogoče oblikovati z uporabo HTML, CSS in JavaScript. To vrstico napredka je mogoče dodatno prilagoditi glede na zahteve, tj. dodajanje ali odstranjevanje korakov itd. V tem zapisu smo podrobneje opisali oblikovanje odzivnih vrstic z uporabo HTML, CSS in JavaScript.