Kaip sukurti reaguojančias eigos juostas naudojant HTML, CSS ir JavaScript

Aukščiau pateiktame kodo fragmente taikykite toliau pateiktas metodikas:

• Sukurkite antraštę ir įtraukite dvi
  “ elementus, kad kauptų eigos juostą.
• Taip pat įtraukite „
  “ elementas, kurį sudaro parinktys pereiti per eigos juostą, kai pirmoji yra aktyvi.
  • Galiausiai sukurkite du mygtukus, kad atitinkamai pereitumėte atgal arba pereitumėte į kitą veiksmą.

  CSS kodas

  
  
  

  Dabar šio CSS kodo bloko apžvalga:

  < stilius tipo = 'text/css' >
  #progresas {
  padėtis: santykinė;
  paraštė-apačia: 30 pikselių;
  }
  #progress1 {
  padėtis: absoliuti;
  fonas: žalias;
  aukštis: 5px;
  plotis: 0 % ;
  viršuje: penkiasdešimt % ;
  liko: 0 ;
  }
  #progress2 {
  marža: 0 ;
  pamušalas: 0 ;
  sąrašo stilius: nėra;
  ekranas: lankstus ;
  pateisinti-turinys: tarpas-tarp;
  }
  #progress2::before {
  turinys: '' ;
  fono spalva: šviesiai pilka;
  padėtis: absoliuti;
  viršuje: penkiasdešimt % ;
  liko: 0 ;
  aukštis: 5px;
  plotis: 100 % ;
  z indeksas: -1 ;
  }
  #progress2 .step {
  kraštinė: 3 pikselių vientisa šviesiai pilka;
  sienos spindulys: 100 % ;
  plotis: 25px;
  aukštis: 25px;
  eilutės aukštis: 25 pikseliai;
  teksto lygiavimas: centre;
  fono spalva: #fff;
  šriftų šeima: sans-serif;
  šrifto dydis: 14 pikselių;
  padėtis: santykinė;
  z indeksas: 1 ;
  }
  #progress2 .step.active {
  kraštinės spalva: žalia;
  fono spalva: žalia;
  spalva: #fff;
  }
  stilius >

  Šiame kode:

  • Sureguliuokite santykinę eigos juostos padėtį ir absoliučią pagrindinių antrinių elementų padėtį.
  • Be to, sukurkite eigos juostos stilių taip, kad prieš pereinant prie kito veiksmo ji sudarytų numatytąją spalvą ir pereitų prie kito veiksmo.
  • Tai pasiekiama naudojant stilių, t. y. fono spalva “ ir tt kiekvienas neaktyvus ir aktyvus veiksmas apskritime.

  JavaScript kodas

  Galiausiai atkreipkite dėmesį į toliau pateiktą kodų bloką:

  < scenarijus tipo = 'tekstas/javascript' >
  leisti xBar = document.getElementById ( 'progresas1' ) ;
  leisti xNext = document.getElementById ( 'toliau' ) ;
  leisti xPrev = document.getElementById ( 'pažanga' ) ;
  leisti žingsniai = document.querySelectorAll ( '.step' ) ;
  leisti aktyvus = 1 ;
  xNext.addEventListener ( 'spausti' , ( ) = < {
  aktyvus++;
  jeigu ( aktyvus < žingsniai.ilgis ) {
  aktyvus = žingsniai.ilgis;
  }
  responsiveProgress ( ) ;
  } ) ;
  xPrev.addEventListener ( 'spausti' , ( ) = < {
  aktyvus -;
  jeigu ( aktyvus > 1 ) {
  aktyvus = 1 ;
  }
  responsiveProgress ( ) ;
  } ) ;
  const responsiveProgress = ( ) = < {
  žingsniai.Kiekvienam ( ( žingsnis, t ) = < {
  jeigu ( i > aktyvus ) {
  step.classList.add ( 'aktyvus' ) ;
  } Kitas {
  step.classList.remove ( 'aktyvus' ) ;
  }
  } ) ;
  xBar.style.width =
  ( ( aktyvus - 1 ) / ( žingsniai.ilgis - 1 ) ) * 100 + '%' ;
  jeigu ( aktyvus === 1 ) {
  xAnkstesnis.išjungta = tiesa ;
  } Kitas jeigu ( aktyvus === žingsniai.ilgis ) {
  xNext.disabled = tiesa ;
  } Kitas {
  xAnkstesnis.išjungta = klaidinga ;
  xNext.disabled = klaidinga ;
  }
  } ;
  scenarijus >

  Šiose kodo eilutėse:

  • Visų pirma, iškvieskite eigos juostą ir ankstesnius bei kitus mygtukus naudodami „ id ' naudojant ' getElementById() “ metodas.
  • Po to pritaikykite „ addEventListener() 'metodas, kad suaktyvinus spustelėkite “ įvykį, aktyvūs žingsniai pereinami, kol veiksmai baigiami per „ ilgio ' nuosavybė.
  • Taip pat eikite atgal per žingsnius.
  • Taip pat iškvieskite „ responsiveProgress() “ funkcija, kuri atlieka kiekvieną žingsnį ir perjungia aktyvią klasę per teiginį „if/else“.
  • Dabar priskirkite eigos juostos plotį procentais, atsižvelgiant į aktyvius ir visus / visus veiksmus.
  • Galiausiai išjunkite atitinkamą mygtuką, jei aktyvus veiksmas yra pirmasis arba paskutinis.

  Pastaba: Šiuo atveju visas kodas yra tame pačiame HTML faile su tam skirtomis žymomis „ CSS “ ir „ JavaScript “ kodus. Tačiau galima susieti ir atskirus failus.

  Išvestis

  

  Išvada

  Interaktyvi veiksmų eigos juosta pradeda veikti, kai didelė forma yra padalinta į kelis veiksmus ir gali būti sukurta naudojant HTML, CSS ir JavaScript. Šią eigos juostą taip pat galima toliau tinkinti pagal reikalavimus, t. y. pridėti arba pašalinti veiksmus ir t. t. Šiame rašte mes išsamiai aptarėme reaguojančių juostų kūrimą naudodami HTML, CSS ir JavaScript.