Počet HTML stavových změn v reálném čase s CSS
Počítání je všudypřítomný úkol ve webových aplikacích. Kolik máte nepřečtených e-mailů? Kolik úloh zůstane na seznamu úkolů nezaškrtnuto? Kolik chutí je v nákupním košíku? Všechny klíčové otázky si uživatelé zaslouží odpovědi.
Takže tento příspěvek vám ukáže, jak počet bi-uvedených prvků, které tvoří většinu uživatelských ovládacích prvků, jako jsou zaškrtávací políčka a textové vstupy, pomocí čítačů CSS.
Musíš nejprve cílit na tyto státy pomocí CSS, které je možné pomocí pseudo-třídy a HTML atributy , které nám dovolují dělat právě to. Pokračujte a experimentujte s myšlenkou a prozkoumejte různé pseudo-třídy, které mohou indikovat změnu stavu prvku, dynamicky.
Začneme s nejjednoduššími zaškrtávacími políčky.
1. Zaškrtávací políčka
Zaškrtávací políčka přejdou do “kontrolovány” stavu, kdy jsou zaškrtnuty. :kontrolovány pseudo-třída označuje kontrolovaný stav.
zaškrtávací políčko # 1
zaškrtávací políčko # 2
zaškrtávací políčko # 3
Kontrolovány:
Nezaškrtnuto:
:: root counter-reset: tickedBoxCount, unTickedBoxCount; input [type = 'zaškrtávací políčko'] counter-increment: unTickedBoxCount; input [type = 'zaškrtávací políčko']: checked counter-increment: tickedBoxCount; #tickedBoxCount :: before content: counter (tickedBoxCount); #unTickedBoxCount :: before content: counter (unTickedBoxCount);
Jak jsem řekl dříve, tento případ je velmi jednoduchý. My nastavte dva čítače na kořenovém prvku a každý přírůstek pro každé zaškrtávací políčko pro dva stavy. Hodnoty čítače jsou pak na určeném místě pomocí obsah vlastnictví.
Pokud chcete lépe porozumět jak CSS počítá práci, podívejte se na náš předchozí příspěvek.
Níže vidíte konečný výsledek. Když zaškrtnete a zrušíte zaškrtnutí políček, hodnoty “Kontrolovány” a “Nezaškrtnuto” čítače upraveno v reálném čase.
2. Textové vstupy
Můžeme také spočítat, kolik textových vstupů byly vyplněny a kolik zůstaly prázdné uživatele. Toto řešení nebude tak jednoduché jako předchozí, protože na rozdíl od zaškrtávacích políček, textové vstupy nemají pseudo-třídy na vlajku, když jsou naplněni.
Musíme najít alternativní trasu. Tam je pseudo-třída označuje, kdy prvek má zástupný text; jmenuje se to : zástupný symbol.
Pokud v našem textovém vstupu používáme zástupné symboly, můžeme vědět, kdy je vstupní pole prázdné. To se stane, když uživatel zatím do něj nic nenapsal protože zástupný symbol zmizí, když se to stane.
Naplněné:
Prázdný:
:: root counter-reset: filledInputCount, emptyInputCount; input [typ = 'text'] counter-increment: filledInputCount; input [typ = 'text']: zástupný symbol counter-increment: emptyInputCount; #filledInputCount :: before content: counter (filledInputCount); #emptyInputCount :: before content: counter (emptyInputCount);
Výsledek je podobný předchozímu - dva čítače jsou automaticky zvyšovat a snižovat přidáváme nebo odebíráme text do nebo ze vstupních polí.
3. Podrobnosti
Alternativní stavy prvku nemusí být vždy označeny pouze pseudo-třídami. Mohlo by to být HTML atributy, které tuto úlohu vykonávají, jako v případě
Tak, otevřeno HTML atribut v elementu. Tento atribut lze cílit v CSS uvolič atributů.
Q1: otázka # 1
odpověď # 1
Q2: otázka # 2
odpověď # 2
Q3: otázka # 3
odpověď # 3
Otevřeno:
Zavřeno:
:: root counter-reset: openDetailCount, closedDetailCount; details counter-increment: closedDetailCount; details [open] counter-increment: openDetailCount; #closedDetailCount :: before content: counter (closedDetailCount); #openDetailCount :: before content: counter (openDetailCount);
Výsledek je dva čítače CSS v reálném čase znovu: Otevřít a zavřít.
4. Tlačítka rádia
Počítání rádiových tlačítek vyžaduje jinou techniku. Určitě bychom mohli použít :kontrolovány pseudo-třída jsme použili pro zaškrtávací políčka. Přepínače jsou však zaškrtávací políčka.
Tlačítka rádia jsou ve skupinách. Uživatel může ve skupině vybrat pouze jednu. Každá skupina funguje jako jedna jednotka. Dva stavy, které může mít skupina přepínačů, jsou buď je vybráno jedno z tlačítek nebo žádný z nich není vybrán.
Neměli bychom tedy počítat přepínače pomocí jednotlivých tlačítek, ale podle skupin tlačítek. Abychom toho dosáhli, my využít : n-tého typu volič. Vysvětlím to později; Nejdřív se podívejme na kód.
rádio-1.1 rádio-1.2 rádio-1.3
rádio-2.1 rádio-2.2 rádio-2.3
rádio-2.1 rádio-2.2 rádio-2.3
Vybraný:
Nezvoleno:
Potřebujeme přiřaďte stejný název přepněte na přepínače ve stejné skupině. Každá skupina v kódu výše obsahuje tři přepínače uvnitř.
:: root counter-reset: selectedRadioCount, unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n) counter-increment: unSelectedRadioCount; input [typ = 'radio']: nth-of-type (3n): checked counter-increment: selectedRadioCount; input [type = 'radio']: not (: nth-of-type (3n)): checked counter-increment: unSelectedRadioCount -1 vybranýRadioCount; #selectedRadioCount :: before content: counter (vybranýRadioCount); #unSelectedRadioCount :: before content: counter (unSelectedRadioCount);
První tři pravidla stylu ve výše uvedeném úryvku jsou stejná jako pravidla, která jsme použili pro zaškrtávací políčka, s výjimkou namísto cílení každý přepínač, zacílíme na poslední přepínač v každé skupině, který je třetí v našem případě (: n-tého typu (3n)). Takže nepočítáme všechny přepínače, ale pouze jedna skupina.
To nám však nedává správný výsledek v reálném čase, jako my dosud neposkytli žádné pravidlo pro počítání dalších dvou přepínačů ve skupině. Pokud je jeden z nich zkontrolován, měl by být spočítán a zároveň by měl být snížen nekontrolovaný výsledek.
Proto jsme my přidat -1 hodnota po unSelectedRadioCount v posledním pravidlu stylu, který cílí na další dvě přepínače ve skupině. Když je zaškrtnuto jedno z nich, -1 vůle snížit nekontrolovaný výsledek.
Umístění hraběte
Můžete vidět pouze správný výsledek po dokončení počítání, tj. po zpracování všech prvků, které mají být spočítány. Proto musíme umístit prvek, do kterého budeme zobrazovat čítače pouze po započítání prvků ve zdrojovém kódu HTML.
Možná nebudete chtít zobrazit čítače pod prvky, ale někde jinde na stránce. V tomto případě, vy je třeba přemístit počitadla pomocí CSS vlastností jako přeložit, okraj, nebo pozice.
Ale můj návrh by byl použít CSS Grid můžete vytvořit rozvržení stránky nezávislé na pořadí jeho prvků ve zdrojovém kódu HTML. Můžete například snadno vytvořit mřížku, která umístí čítače nad nebo vedle vstupních polí.
