Při vytváření interaktivních a uživatelsky přívětivých formulářů nebo portálových stránek na webu vývojáři obvykle začleňují responzivní ukazatele průběhu, které jsou přitažlivé a dávají uživateli vědět o stavu vyplnění formuláře nebo vytvářejí profil. Tyto typy funkcí jsou velkou pomocí při zlepšování uživatelské zkušenosti konkrétního webu.
Tento blog pojednává o následujících aspektech:
- Co je responzivní ukazatel průběhu?
- Jak navrhnout responzivní ukazatel průběhu s využitím HTML, CSS a JavaScriptu?
Co je responzivní ukazatel průběhu?
V tomto konkrétním ukazateli průběhu je velký formulář rozdělen do několika kroků. Tato lišta informuje návštěvníky o stavu vyplněných a zbývajících formulářů.
Jak navrhnout responzivní ukazatel průběhu s využitím HTML, CSS a JavaScriptu?
Responzivní ukazatel průběhu lze navrhnout pomocí HTML, CSS a JavaScriptu. Chcete-li tak učinit, podívejte se na následující kód. Nejprve se ponořte do části HTML kódu takto:
< h2 styl = 'text-align: center;' > Responzivní ukazatel průběhu h2 >
< div id = 'pokrok' >
< div id = 'pokrok1' > div >
< ul id = 'progress2' >
< že třída = 'krok aktivní' > 1 že >
< že třída = 'krok' > 2 že >
< že třída = 'krok' > 3 že >
< že třída = 'krok' > Konec že >
ul >
div >
< knoflík id = 'progressback' třída = 'btn' zakázáno > Zadní knoflík >
< knoflík id = 'progressdalší' třída = 'btn' > další knoflík >
Ve výše uvedeném fragmentu kódu použijte níže uvedené metodiky:
- Vytvořte nadpis a přidejte dva „ ” prvky pro akumulaci ukazatele průběhu.
- Zahrňte také „
- Nakonec vytvořte dvě tlačítka pro přesun zpět nebo přechod na další krok.
CSS kód
Nyní přehled následujícího bloku kódu CSS:
< styl typ = 'text/css' >
#progress {
poloha: relativní;
margin-bottom: 30px;
}
#progress1 {
pozice: absolutní;
pozadí: zelené;
výška: 5px;
šířka: 0 % ;
horní: padesáti % ;
vlevo, odjet: 0 ;
}
#progress2 {
okraj: 0 ;
vycpávka: 0 ;
styl seznamu: žádný;
Zobrazit: flex ;
justify-content: mezera-mezi;
}
#progress2::před {
obsah: '' ;
barva pozadí: světle šedá;
pozice: absolutní;
horní: padesáti % ;
vlevo, odjet: 0 ;
výška: 5px;
šířka: 100 % ;
z-index: -1 ;
}
#progress2 .krok {
ohraničení: 3px plná světle šedá;
okraj-poloměr: 100 % ;
šířka: 25px;
výška: 25px;
line-height: 25px;
text-align: center;
barva pozadí: #fff;
font-family: sans-serif;
velikost písma: 14px;
poloha: relativní;
z-index: 1 ;
}
#progress2 .step.active {
barva okraje: zelená;
barva pozadí: zelená;
barva: #fff;
}
styl >V tomto kódu:
- Upravte relativní polohu ukazatele průběhu a absolutní polohu podřízených prvků.
- Upravte také styl ukazatele průběhu tak, aby před přepnutím na další krok obsahoval výchozí barvu a při přechodu k dalšímu kroku přešel na jinou barvu.
- Toho je dosaženo pomocí stylingu, tj. barva pozadí ” atd. každý z neaktivních a aktivních kroků v rámci kruhu.
JavaScript kód
Nakonec věnujte pozornost níže uvedenému bloku kódu:
< skript typ = 'text/javascript' >
nechat xBar = document.getElementById ( 'pokrok1' ) ;
nechat xNext = document.getElementById ( 'progressdalší' ) ;
nechat xPrev = document.getElementById ( 'progressback' ) ;
nechat kroky = document.querySelectorAll ( '.krok' ) ;
nechat aktivní = 1 ;
xNext.addEventListener ( 'kliknout' , ( ) = < {
aktivní++;
-li ( aktivní < kroky.délka ) {
aktivní = kroky.délka;
}
responsiveProgress ( ) ;
} ) ;
xPrev.addEventListener ( 'kliknout' , ( ) = < {
aktivní--;
-li ( aktivní > 1 ) {
aktivní = 1 ;
}
responsiveProgress ( ) ;
} ) ;
const responsiveProgress = ( ) = < {
kroky.pro každého ( ( krok, i ) = < {
-li ( i > aktivní ) {
step.classList.add ( 'aktivní' ) ;
} jiný {
step.classList.remove ( 'aktivní' ) ;
}
} ) ;
xBar.style.width =
( ( aktivní - 1 ) / ( kroky.délka - 1 ) ) * 100 + '%' ;
-li ( aktivní === 1 ) {
xPrev.disabled = skutečný ;
} jiný -li ( aktivní === kroky.délka ) {
xNext.disabled = skutečný ;
} jiný {
xPrev.disabled = Nepravdivé ;
xNext.disabled = Nepravdivé ;
}
} ;
skript >V těchto řádcích kódu:
- Nejprve vyvolejte ukazatel průběhu a předchozí a další tlačítka prostřednictvím jejich „ ids ' za použití ' getElementById() “ metoda.
- Poté použijte „ addEventListener() “ metoda tak, že po spuštění “ klikněte “, aktivní kroky se procházejí, dokud nejsou kroky dokončeny přes „ délka ' vlastnictví.
- Stejně tak projděte kroky zpět.
- Vyvolejte také „ responsiveProgress() “, která prochází každý z kroků a přepíná aktivní třídu pomocí příkazu „if/else“.
- Nyní přiřaďte šířku ukazatele průběhu jako procento s ohledem na aktivní a celkový počet/všechny kroky.
- Nakonec deaktivujte příslušné tlačítko, pokud je aktivní krok první nebo poslední.
Poznámka: V tomto případě je celý kód obsažen ve stejném souboru HTML s vyhrazenými značkami pro „ CSS ' a ' JavaScript “kódy. Lze však propojit i samostatné soubory.
Výstup
Závěr
Responzivní ukazatel průběhu kroku vstoupí v platnost, když je velký formulář rozdělen do více kroků a lze jej navrhnout pomocí HTML, CSS a JavaScriptu. Tento ukazatel průběhu lze také dále upravit podle požadavků, tj. přidat nebo odebrat kroky atd. V tomto zápisu jsme se podrobně zabývali návrhem responzivních pruhů pomocí HTML, CSS a JavaScriptu.
- Zahrňte také „