Saidil interaktiivsete ja kasutajasõbralike vormide või portaalilehtede loomisel lisavad arendajad tavaliselt tundlikke edenemisribasid, mis on ahvatlevad ja annavad kasutajale teada vormi täidetud olekust või loovad profiili. Seda tüüpi funktsioonid on suureks abiks konkreetse saidi kasutuskogemuse parandamisel.
Selles ajaveebis käsitletakse järgmisi aspekte:
- Mis on reageeriv edenemisriba?
- Kuidas kujundada reageeriv edenemisriba, kasutades HTML-i, CSS-i ja JavaScripti?
Mis on reageeriv edenemisriba?
Sellel konkreetsel edenemisribal on suur vorm jagatud mitmeks etapiks. See riba teavitab külastajaid täidetud ja allesjäänud vormide olekust.
Kuidas kujundada reageeriv edenemisriba, kasutades HTML-i, CSS-i ja JavaScripti?
Tundliku edenemisriba saab kujundada HTML-i, CSS-i ja JavaScripti abil. Selleks vaadake järgmist koodi. Esmalt süvenege koodi HTML-i osasse järgmiselt:
< h2 stiilis = 'text-align: center;' > Tundlik edenemisriba h2 >
< div id = 'edenemine' >
< div id = 'edenemine1' > div >
< ul id = 'progress2' >
< et klass = 'aste aktiivne' > 1 et >
< et klass = 'samm' > 2 et >
< et klass = 'samm' > 3 et >
< et klass = 'samm' > Lõpp et >
ul >
div >
< nuppu id = 'edenemine' klass = 'btn' puudega > tagasi nuppu >
< nuppu id = 'edasi edasi' klass = 'btn' > Edasi nuppu >
Ülaltoodud koodilõigu puhul kasutage alltoodud meetodeid.
- Looge pealkiri ja lisage kaks ' ” elemente edenemisriba kogumiseks.
- Lisage ka '
- Lõpuks looge kaks nuppu, et liikuda vastavalt tagasi või liikuda järgmise sammu juurde.
CSS-kood
Nüüd ülevaade järgmisest CSS-koodiplokist:
< stiilis tüüp = 'text/css' >
#progress {
asend: suhteline;
veeris-alumine: 30px;
}
#progress1 {
positsioon: absoluutne;
taust: roheline;
kõrgus: 5 pikslit;
laius: 0 % ;
ülemine: viiskümmend % ;
vasakule: 0 ;
}
#progress2 {
marginaal: 0 ;
polsterdus: 0 ;
loendi stiil: puudub;
kuva: painduv ;
õigusta-sisu: tühik-vahel;
}
#progress2::before {
sisu: '' ;
taustavärv: helehall;
positsioon: absoluutne;
ülemine: viiskümmend % ;
vasakule: 0 ;
kõrgus: 5 pikslit;
laius: 100 % ;
z-indeks: -1 ;
}
#progress2 .step {
ääris: 3px ühtlane helehall;
piiri raadius: 100 % ;
laius: 25 pikslit;
kõrgus: 25px;
rea kõrgus: 25 pikslit;
teksti joondamine: keskel;
taustavärv: #fff;
fondiperekond: sans-serif;
fondi suurus: 14 pikslit;
asend: suhteline;
z-indeks: 1 ;
}
#progress2 .step.active {
äärise värv: roheline;
taustavärv: roheline;
värv: #fff;
}
stiilis >Selles koodis:
- Reguleerige edenemisriba suhtelist asukohta ja aluseks olevate alamelementide absoluutset asukohta.
- Samuti kujundage edenemisriba nii, et enne järgmisele sammule lülitumist sisaldaks see vaikevärvi ja lülitub järgmise sammuga jätkamisel teisele värvile.
- See saavutatakse stiili abil, st ' taustavärv ” jne. ringis kõik passiivsed ja aktiivsed sammud.
JavaScripti kood
Lõpuks pöörake tähelepanu allolevale koodiplokile:
< stsenaarium tüüp = 'text/javascript' >
lase xBar = document.getElementById ( 'edenemine1' ) ;
lase xNext = document.getElementById ( 'edasi edasi' ) ;
lase xPrev = document.getElementById ( 'edenemine' ) ;
lase sammud = document.querySelectorAll ( '.step' ) ;
lase aktiivne = 1 ;
xNext.addEventListener ( 'klõpsake' , ( ) = < {
aktiivne++;
kui ( aktiivne < sammud.pikkus ) {
aktiivne = sammud.pikkus;
}
reageerivProgress ( ) ;
} ) ;
xPrev.addEventListener ( 'klõpsake' , ( ) = < {
aktiivne--;
kui ( aktiivne > 1 ) {
aktiivne = 1 ;
}
reageerivProgress ( ) ;
} ) ;
const responsiveProgress = ( ) = < {
sammud.Igale ( ( samm, st ) = < {
kui ( i > aktiivne ) {
step.classList.add ( 'aktiivne' ) ;
} muidu {
step.classList.remove ( 'aktiivne' ) ;
}
} ) ;
xBar.style.width =
( ( aktiivne - 1 ) / ( sammud.pikkus - 1 ) ) * 100 + '%' ;
kui ( aktiivne === 1 ) {
xPrev.disabled = tõsi ;
} muidu kui ( aktiivne === sammud.pikkus ) {
xNext.disabled = tõsi ;
} muidu {
xPrev.disabled = vale ;
xNext.disabled = vale ;
}
} ;
stsenaarium >Nendel koodiridadel:
- Kõigepealt avage edenemisriba ning eelmised ja järgmised nupud nende ' ID-d ' kasutades ' getElementById() ” meetod.
- Pärast seda rakendage ' addEventListener() 'meetodil, mille käivitamisel klõpsa ' sündmusel läbitakse aktiivsed sammud, kuni sammud on lõpetatud, kasutades ' pikkus ” vara.
- Samamoodi liikuge läbi sammude tagasi.
- Samuti kutsuge esile ' responsiveProgress() funktsioon, mis liigub läbi iga sammu ja lülitab aktiivse klassi lause „if/else” kaudu.
- Nüüd määrake edenemisriba laius protsendina aktiivsete ja kogu/kõikide sammude suhtes.
- Lõpuks keelake vastav nupp, kui aktiivne samm on esimene või viimane.
Märge: Sel juhul sisaldub kogu kood samas HTML-failis koos spetsiaalsete siltidega ' CSS ” ja „ JavaScript ” koodid. Samas saab linkida ka eraldi faile.
Väljund
Järeldus
Tundlik sammude edenemisriba rakendub siis, kui suur vorm on jagatud mitmeks etapiks ja seda saab kujundada HTML-i, CSS-i ja JavaScripti abil. Seda edenemisriba saab ka vastavalt nõuetele täiendavalt kohandada, st samme lisada või eemaldada jne. Selles kirjutises oleme käsitlenud tundlike ribade kujundamist HTML-i, CSS-i ja JavaScripti abil.
- Lisage ka '