Zmeniť stav štátu HTML v reálnom čase pomocou služby CSS
Počítanie je všadeprítomná úloha vo webových aplikáciách. Koľko neprečítaných e-mailov máte? Koľko úloh zostane neuvedené vo vašom zozname úloh? Koľko pochúťok z kobyliek je v nákupnom košíku? Všetky sú kľúčové otázky, na ktoré si užívatelia zaslúžia odpovede.
Takže, tento príspevok vám ukáže, ako to počet prvkov, ktoré tvoria väčšinu používateľských ovládacích prvkov, ako sú začiarkavacie políčka a textové vstupy, pomocou čítačov CSS.
Musíte zacieľte tie štáty pomocou CSS ako prvé, čo je možné prostredníctvom pseudotriedy a atribúty HTML ktoré nám umožňujú urobiť práve to. Pokračujte a experimentujte s touto myšlienkou a preskúmajte rôzne pseudotriedy, ktoré môžu indikovať zmenu stavu elementu dynamicky.
Začneme s najjednoduchšími zaškrtávacími políčkami.
1. Začiarkavacie políčka
Začiarkavacie políčka sa zobrazia “kontrolované” keď sú zaškrtnuté. : zaškrtnuté pseudo-class označuje kontrolovaný stav.
začiarknutie # 1
začiarkavacie políčko # 2
začiarkavacie políčko # 3
skontrolovaná:
nekontrolovaná:
:: korene counter-reset: tickedBoxCount, unTickedBoxCount; vstup [typ = 'zaškrtávacie políčko] proti-prírastok: unTickedBoxCount; vstup [typ = 'zaškrtávacie políčko]: zaškrtnuté counter-increment: tickedBoxCount; #tickedBoxCount :: pred content: counter (tickedBoxCount); #unTickedBoxCount :: pred content: counter (unTickedBoxCount);
Ako som povedal predtým, tento prípad je veľmi jednoduchý. my nastavte dva čítače na prvok koreňa a každý prírastok každého zaškrtávacieho políčka pre jeho dva stavy. Hodnoty počítadla sú potom zobrazené na určenom mieste pomocou obsah vlastnosť.
Ak chcete lepšie porozumieť ako fungujú počítadlá CSS, pozrite sa na náš predchádzajúci príspevok.
Nižšie vidíte konečný výsledok. Ak začiarknete a zrušíte začiarknutie políčok, hodnoty “kontrolované” a “nekontrolovaný” počítadlá sú modifikovaný v reálnom čase.
2. Textové vstupy
Môžeme tiež počítať, koľko textových vstupov boli vyplnené a koľko zostali prázdne používateľom. Toto riešenie nebude tak jednoduché ako predchádzajúce, pretože na rozdiel od začiarkavacích políčok, textové vstupy nemajú pseudotriedy na označenie, keď sú naplnené.
Takže musíme nájsť alternatívnu trasu. Je to pseudotrieda označuje, kedy má prvok symbol zástupného symbolu; nazýva sa to Zástupný-zobrazené.
Ak v našom texte použijeme zástupné symboly, môžeme vedieť, kedy je prázdne vstupné pole. Stane sa to pri používateľovi ešte nešpecifikoval nič pretože tento symbol zmizne, keď k tomu dôjde.
plnené:
prázdna:
:: root counter-reset: filledInputCount, emptyInputCount; vstup [typ = 'text'] protizvyšok: filledInputCount; vstup [typ = 'text']: zástupný symbol counter-increment: emptyInputCount; #filledInputCount :: pred content: counter (filledInputCount); #emptyInputCount :: pred content: counter (emptyInputCount);
Výsledok je podobný predchádzajúcemu - sú dva počítadlá automaticky sa zvyšuje a znižuje ako pridávame alebo odstraňujeme text do alebo z vstupných polí.
3. Podrobnosti
Alternatívne stavy prvku nie vždy musia byť označené iba pseudotriedami. Možno je Atribúty HTML vykonávajú túto úlohu, ako v prípade
tak, otvorené Atribút HTML v prvku. Tento atribút môže byť zacielený na CSS uspievať jeho selektor atribútov.
Q1: otázka # 1
odpoveď # 1
Otázka č. 2: otázka č. 2
odpoveď # 2
Otázka č.3: otázka č. 3
odpoveď # 3
Otvorené:
Zatvorené:
:: root counter-reset: openDetailCount, closedDetailCount; podrobnosti counter-increment: closedDetailCount; podrobnosti [otvoriť] protizvyšok: openDetailCount; #closedDetailCount :: pred content: counter (closedDetailCount); #openDetailCount :: pred content: counter (openDetailCount);
Výsledkom je dva čítače CSS v reálnom čase znova: Otvorené a Zatvorené.
4. Rádiové tlačidlá
Počítanie prepínačov vyžaduje inú techniku. Určite by sme mohli použiť : zaškrtnuté pseudotrieda, ktorú sme použili pre zaškrtávacie políčka. Avšak rádiové tlačidlá sú použili odlišne od začiarkavacích políčok.
Rádiové tlačidlá sú mali byť v skupinách. Používateľ si môže vybrať iba jednu vo vnútri skupiny. Každá skupina pôsobí ako jedna jednotka. Obe stavy, ktoré môže mať skupina prepínačov, sú buď jedno z tlačidiel je vybraté alebo žiadna z nich nie je vybratá.
Preto by sme nemali počítať rádiové tlačidlá podľa jednotlivých tlačidiel, ale podľa skupín tlačidiel. Aby sme to dosiahli, my využitie : N-teho o type volič. Vysvetlím to neskôr; uvidíme kód najprv.
radio-1,1 radio-1,2 radio-1,3
radio-2,1 radio-2.2 radio-2,3
radio-2,1 radio-2.2 radio-2,3
Vybraný:
vypnutú:
Musíme priraďte rovnaký názov na prepínacie tlačidlá v rovnakej skupine. Každá skupina v uvedenom kóde má tri vnútorné prepínače.
:: korene counter-reset: selectedRadioCount, unSelectedRadioCount; vstup [typ = 'rádio']: nth-of-type (3n) protizvyšok: unSelectedRadioCount; vstup [typ = 'rádio']: nth-of-type (3n): zaškrtnuté counter-increment: selectedRadioCount; vstup [typ = 'rádio']: nie (: nth-of-type (3n)): začiarknuté counter-increment: unSelectedRadioCount -1 selectedRadioCount; #selectedRadioCount :: pred content: counter (selectedRadioCount); #unSelectedRadioCount :: pred content: counter (unSelectedRadioCount);
Prvé tri pravidlá štýlu vo vyššie uvedenom úryvku sú rovnaké ako tie, ktoré sme použili pri začiarkavacích políčkach, okrem toho, že sme namiesto zacielenia každý tlačítko na Rádiu, zacieľujeme na posledné prepínacie tlačidlo v každej skupine, čo je v našom prípade tretí (: N-teho o-type (3n)). Takže nepočítame všetky prepínače, ale iba jednu skupinu.
To však neprinesie správny výsledok v reálnom čase, ako my ešte neposkytli žiadne pravidlo pre počítanie ostatných dvoch prepínačov v skupine. Ak je jedna z nich skontrolovaná, mala by sa počítať a nekontrolovaný výsledok by mal klesnúť súčasne.
Preto sme my pridaj -1 hodnota po unSelectedRadioCount v pravidle posledného štýlu, ktoré je zacielené na ďalšie dve prepínacie tlačidlá v skupine. Keď je skontrolovaný jeden z nich, -1 vôľa znížiť nekontrolovaný výsledok.
Umiestnenie počtu
Môžete vidieť len správny výsledok po dokončení čítania, tj po spracovaní všetkých prvkov, ktoré sa majú počítať. Z tohto dôvodu musíme uviesť prvok, do ktorého budeme zobrazovať počítadlá len po započítaní prvkov v zdrojovom kóde HTML.
Možno nebudete chcieť zobrazovať čítače pod prvkami, ale niekde inde na stránke. V tomto prípade vy je potrebné premiestniť čítače pomocou vlastností CSS, ako napríklad preložiť, okraj, alebo pozície.
Ale môj návrh by bol použite CSS Grid aby ste mohli vytvoriť rozloženie stránky nezávisle od poradia jeho prvkov v zdrojovom kóde HTML. Môžete napríklad jednoducho vytvoriť mriežku, ktorá umiestni čítače nad alebo vedľa vstupných polí.
