Vietnē veidojot interaktīvas un lietotājam draudzīgas veidlapas vai portāla lapas, izstrādātāji parasti iekļauj atsaucīgas progresa joslas, kas ir pievilcīgas un informē lietotāju par veidlapas aizpildīšanas statusu vai izveido profilu. Šāda veida funkcijas lieliski palīdz uzlabot konkrētas vietnes lietotāja pieredzi.
Šajā emuārā tiek apspriesti šādi aspekti:
- Kas ir adaptīvā progresa josla?
- Kā izveidot atsaucīgu progresa joslu, izmantojot HTML, CSS un JavaScript?
Kas ir adaptīvā progresa josla?
Šajā konkrētajā norises joslā liela veidlapa ir sadalīta vairākos posmos. Šī josla informē apmeklētājus par aizpildīto un atlikušo veidlapu statusu.
Kā izveidot atsaucīgu progresa joslu, izmantojot HTML, CSS un JavaScript?
Adaptīvu progresa joslu var izveidot, izmantojot HTML, CSS un JavaScript. Lai to izdarītu, pārbaudiet tālāk norādīto kodu. Vispirms iedziļinieties koda HTML daļā šādi:
< h2 stils = 'text-align: center;' > Atsaucīga progresa josla h2 >
< div id = 'progress' >
< div id = 'progress1' > div >
< ul id = 'progress2' >
< ka klasē = 'Soli aktīvs' > 1 ka >
< ka klasē = 'solis' > 2 ka >
< ka klasē = 'solis' > 3 ka >
< ka klasē = 'solis' > Beigas ka >
ul >
div >
< pogu id = 'progress' klasē = 'btn' invalīds > Atpakaļ pogu >
< pogu id = 'nākamais progress' klasē = 'btn' > Nākamais pogu >
Iepriekš minētajā koda fragmentā izmantojiet tālāk norādītās metodes.
- Izveidojiet virsrakstu un iekļaujiet divus ' ” elementi, lai uzkrātu progresa joslu.
- Iekļaujiet arī '
- Visbeidzot, izveidojiet divas pogas, lai attiecīgi pārvietotos atpakaļ vai pārietu uz nākamo darbību.
CSS kods
Tagad pārskats par šādu CSS koda bloku:
< stils veids = 'text/css' >
#progress {
pozīcija: relatīvs;
piemale-apakšā: 30 pikseļi;
}
#progress1 {
pozīcija: absolūta;
fons: zaļš;
augstums: 5 pikseļi;
platums: 0 % ;
tops: piecdesmit % ;
pa kreisi: 0 ;
}
#progress2 {
piemale: 0 ;
polsterējums: 0 ;
saraksta stils: nav;
displejs: flex ;
attaisnot-saturs: atstarpe-starp;
}
#progress2::before {
saturs: '' ;
fona krāsa: gaiši pelēka;
pozīcija: absolūta;
tops: piecdesmit % ;
pa kreisi: 0 ;
augstums: 5 pikseļi;
platums: 100 % ;
z-indekss: -1 ;
}
#progress2 .step {
apmale: 3 pikseļi vienkrāsains gaiši pelēks;
robežas rādiuss: 100 % ;
platums: 25 pikseļi;
augstums: 25 pikseļi;
līnijas augstums: 25 pikseļi;
teksta līdzināšana: centrs;
fona krāsa: #fff;
fontu saime: sans-serif;
fonta izmērs: 14 pikseļi;
pozīcija: relatīvs;
z-indekss: 1 ;
}
#progress2 .step.active {
apmales krāsa: zaļa;
fona krāsa: zaļa;
krāsa: #fff;
}
stils >Šajā kodā:
- Pielāgojiet progresa joslas relatīvo pozīciju un pamatā esošo pakārtoto elementu absolūto pozīciju.
- Tāpat noformējiet norises joslu tā, lai pirms pārslēgšanas uz nākamo darbību tajā būtu noklusējuma krāsa un pārejot uz citu krāsu, pārejot uz nākamo darbību.
- Tas tiek panākts, izmantojot stilu, t.i., ' fona krāsa ” utt. katrs no neaktīvajiem un aktīvajiem soļiem aplī.
JavaScript kods
Visbeidzot, pievērsiet uzmanību tālāk norādītajam koda blokam:
< skripts veids = 'teksts/javascript' >
ļaut xBar = document.getElementById ( 'progress1' ) ;
ļaut xNext = document.getElementById ( 'nākamais progress' ) ;
ļaut xPrev = document.getElementById ( 'progress' ) ;
ļaut soļi = document.querySelectorAll ( '.step' ) ;
ļaut aktīvs = 1 ;
xNext.addEventListener ( 'klikšķis' , ( ) = < {
aktīvs++;
ja ( aktīvs < soļi.garums ) {
aktīvs = soļi.garums;
}
atsaucīgsProgress ( ) ;
} ) ;
xPrev.addEventListener ( 'klikšķis' , ( ) = < {
aktīvs--;
ja ( aktīvs > 1 ) {
aktīvs = 1 ;
}
atsaucīgsProgress ( ) ;
} ) ;
const responsiveProgress = ( ) = < {
soļi.Katram ( ( solis, i ) = < {
ja ( i > aktīvs ) {
step.classList.add ( 'aktīvs' ) ;
} cits {
step.classList.remove ( 'aktīvs' ) ;
}
} ) ;
xBar.style.width =
( ( aktīvs - 1 ) / ( soļi.garums - 1 ) ) * 100 + '%' ;
ja ( aktīvs === 1 ) {
xPrev.disabled = taisnība ;
} cits ja ( aktīvs === soļi.garums ) {
xNext.disabled = taisnība ;
} cits {
xPrev.disabled = viltus ;
xNext.disabled = viltus ;
}
} ;
skripts >Šajās koda rindās:
- Pirmkārt, izsauciet progresa joslu un iepriekšējās un nākamās pogas, izmantojot to ' id ' izmantojot ' getElementById() ” metode.
- Pēc tam izmantojiet ' addEventListener() 'metode tā, ka pēc iedarbināšanas klikšķis ” notikumu, aktīvās darbības tiek šķērsotas, līdz soļi ir pabeigti, izmantojot garums ” īpašums.
- Tāpat pārvietojieties atpakaļ pa pakāpieniem.
- Tāpat izsauciet ' responsiveProgress() ” funkcija, kas veic katru darbību un pārslēdz aktīvo klasi, izmantojot priekšrakstu “if/else”.
- Tagad piešķiriet progresa joslas platumu procentos attiecībā pret aktīvo un kopējo/visu darbību.
- Visbeidzot, atspējojiet atbilstošo pogu, ja aktīvais solis ir pirmais vai pēdējais.
Piezīme: Šajā gadījumā viss kods ir ietverts tajā pašā HTML failā ar atvēlētajiem tagiem “ CSS ' un ' JavaScript ” kodi. Tomēr var saistīt arī atsevišķus failus.
Izvade
Secinājums
Adaptīva soļu norises josla stājas spēkā, kad liela veidlapa ir sadalīta vairākos posmos, un to var izveidot, izmantojot HTML, CSS un JavaScript. Šo norises joslu var arī tālāk pielāgot atbilstoši prasībām, t.i., pievienojot vai noņemot darbības utt. Šajā rakstā mēs esam izstrādājuši adaptīvo joslu, izmantojot HTML, CSS un JavaScript.
- Iekļaujiet arī '