Kun kehittäjät luovat sivustolle interaktiivisia ja käyttäjäystävällisiä lomakkeita tai portaalisivuja, ne yleensä sisällyttävät niihin reagoivia etenemispalkkeja, jotka ovat houkuttelevia ja kertovat käyttäjälle lomakkeen valmistumisesta tai luovat profiilin. Tämäntyyppiset toiminnot ovat suureksi avuksi tietyn sivuston käyttökokemuksen parantamisessa.
Tässä blogissa käsitellään seuraavia asioita:
- Mikä on reagoiva edistymispalkki?
- Kuinka suunnitella reagoiva edistymispalkki käyttämällä HTML:ää, CSS:ää ja JavaScriptiä?
Mikä on reagoiva edistymispalkki?
Tässä edistymispalkissa iso lomake on jaettu useisiin vaiheisiin. Tämä palkki ilmoittaa vierailijoille täytettyjen ja jäljellä olevien lomakkeiden tilasta.
Kuinka suunnitella reagoiva edistymispalkki käyttämällä HTML:ää, CSS:ää ja JavaScriptiä?
Responsiivinen edistymispalkki voidaan suunnitella HTML:n, CSS:n ja JavaScriptin avulla. Voit tehdä tämän tarkistamalla seuraavan koodin. Tutustu ensin koodin HTML-osaan seuraavasti:
< h2 tyyli = 'text-align: center;' > Responsiivinen edistymispalkki h2 >
< div id = 'edistystä' >
< div id = 'edistyminen1' > div >
< ul id = 'edistyminen2' >
< että luokkaa = 'askel aktiivinen' > 1 että >
< että luokkaa = 'askel' > 2 että >
< että luokkaa = 'askel' > 3 että >
< että luokkaa = 'askel' > Loppu että >
ul >
div >
< -painiketta id = 'edistyminen' luokkaa = 'btn' liikuntarajoitteinen > Takaisin -painiketta >
< -painiketta id = 'seuraava' luokkaa = 'btn' > Seuraava -painiketta >
Käytä yllä olevassa koodinpätkässä alla annettuja menetelmiä:
- Luo otsikko ja lisää kaksi ' ”-elementtejä keräämään edistymispalkkia.
- Lisää myös '
- Luo lopuksi kaksi painiketta siirtyäksesi takaisin tai siirtyäksesi seuraavaan vaiheeseen.
CSS-koodi
Nyt yleiskatsaus seuraavaan CSS-koodilohkoon:
< tyyli tyyppi = 'teksti/css' >
#progress {
asema: suhteellinen;
marginaali-ala: 30px;
}
#edistyminen1 {
sijainti: absoluuttinen;
tausta: vihreä;
korkeus: 5px;
leveys: 0 % ;
alkuun: viisikymmentä % ;
vasemmalle: 0 ;
}
#progress2 {
marginaali: 0 ;
pehmuste: 0 ;
listatyyli: ei mitään;
näyttö: flex ;
perustella-sisältö: välilyönti;
}
#progress2::before {
sisältö: '' ;
taustaväri: vaaleanharmaa;
sijainti: absoluuttinen;
alkuun: viisikymmentä % ;
vasemmalle: 0 ;
korkeus: 5px;
leveys: 100 % ;
z-indeksi: -1 ;
}
#progress2 .step {
reunus: 3px kiinteä vaaleanharmaa;
rajan säde: 100 % ;
leveys: 25px;
korkeus: 25px;
rivin korkeus: 25 kuvapistettä;
tekstin tasaus: keskellä;
taustaväri: #F F F;
font-family: sans-serif;
fonttikoko: 14px;
asema: suhteellinen;
z-indeksi: 1 ;
}
#progress2 .step.active {
reunan väri: vihreä;
taustaväri: vihreä;
väri: #F F F;
}
tyyli >Tässä koodissa:
- Säädä edistymispalkin suhteellista sijaintia ja alla olevien alielementtien absoluuttista sijaintia.
- Muotoile myös edistymispalkki siten, että ennen seuraavaan vaiheeseen siirtymistä se sisältää oletusvärin ja siirtyy toiseen väriin, kun siirryt seuraavaan vaiheeseen.
- Tämä saavutetaan tyylillä, eli ' taustaväri ” jne. jokainen ei-aktiivinen ja aktiivinen vaihe ympyrän sisällä.
JavaScript-koodi
Lopuksi kiinnitä huomiota alla olevaan koodilohkoon:
< käsikirjoitus tyyppi = 'teksti/javascript' >
antaa xBar = document.getElementById ( 'edistyminen1' ) ;
antaa xNext = document.getElementById ( 'seuraava' ) ;
antaa xPrev = document.getElementById ( 'edistyminen' ) ;
antaa Steps = document.querySelectorAll ( '.step' ) ;
antaa aktiivinen = 1 ;
xNext.addEventListener ( 'klikkaus' , ( ) = < {
aktiivinen++;
jos ( aktiivinen < askeleet.pituus ) {
aktiivinen = askeleet.pituus;
}
responsiveProgress ( ) ;
} ) ;
xPrev.addEventListener ( 'klikkaus' , ( ) = < {
aktiivinen--;
jos ( aktiivinen > 1 ) {
aktiivinen = 1 ;
}
responsiveProgress ( ) ;
} ) ;
const responsiveProgress = ( ) = < {
askeleet.jokaiselle ( ( askel, i ) = < {
jos ( i > aktiivinen ) {
step.classList.add ( 'aktiivinen' ) ;
} muu {
step.classList.remove ( 'aktiivinen' ) ;
}
} ) ;
xBar.style.width =
( ( aktiivinen - 1 ) / ( askeleet.pituus - 1 ) ) * 100 + '%' ;
jos ( aktiivinen === 1 ) {
xPrev.disabled = totta ;
} muu jos ( aktiivinen === askeleet.pituus ) {
xNext.disabled = totta ;
} muu {
xPrev.disabled = väärä ;
xNext.disabled = väärä ;
}
} ;
käsikirjoitus >Näillä koodiriveillä:
- Ensinnäkin, käynnistä edistymispalkki sekä edellinen ja seuraava painikkeet niiden ' tunnukset ' käyttämällä ' getElementById() ”menetelmä.
- Käytä sen jälkeen ' addEventListener() 'menetelmä siten, että kun laukeaa' klikkaus ' -tapahtumassa aktiiviset vaiheet kulkevat, kunnes vaiheet on suoritettu '' pituus ” omaisuutta.
- Siirry samalla tavalla takaisin portaiden läpi.
- Käytä myös ' responsiveProgress() ”-funktio, joka käy läpi jokaisen vaiheen ja vaihtaa aktiivisen luokan ”if/else”-käskyn kautta.
- Määritä nyt edistymispalkin leveys prosentteina aktiivisiin ja kokonais/kaikkiin vaiheisiin nähden.
- Lopuksi poista vastaava painike käytöstä, jos aktiivinen vaihe on ensimmäinen tai viimeinen.
Huomautus: Tässä tapauksessa koko koodi on samassa HTML-tiedostossa, jossa on ' CSS ' ja ' JavaScript ”koodeja. Erillisiä tiedostoja voidaan kuitenkin myös linkittää.
Lähtö
Johtopäätös
Responsiivinen vaiheen etenemispalkki tulee voimaan, kun suuri lomake jaetaan useisiin vaiheisiin, ja se voidaan suunnitella HTML:n, CSS:n ja JavaScriptin avulla. Tätä edistymispalkkia voidaan myös mukauttaa edelleen vaatimusten mukaisesti, eli lisätä tai poistaa vaiheita jne. Tässä kirjoituksessa olemme käsitelleet reagoivien palkkien suunnittelua HTML:n, CSS:n ja JavaScriptin avulla.
- Lisää myös '