Count HTML State Changes Real-Time med CSS
Teller er en allestedsnærværende oppgave i webapplikasjoner. Hvor mange uleste e-poster har du? Hvor mange oppgaver er igjen ukontrollert på oppgavelisten din? Hvor mange smultringer i smultringer er i posen i handlekurven? Alle er avgjørende spørsmål brukerne fortjener svar på.
Så, dette innlegget vil vise deg hvordan du skal telle bi-angitte elementer, som utgjør flertallet av brukerkontroller som for eksempel boksene og tekstinngangene, bruker CSS tellere.
Du trenger å mål disse statene med CSS først, som er mulig ved hjelp av pseudoklasser og HTML-attributter som tillater oss å gjøre nettopp det. Gå videre og eksperimentere med ideen og utforske de forskjellige pseudoklassene som kan indikere endringen i en tilstand av et element, dynamisk.
Vi starter med de enkleste, avmerkingsboksene.
1. Avmerkingsbokser
Sjekkerboksene går inn “sjekket” angi når de er krysset. De :sjekket pseudo-klasse Indikerer den valgte tilstanden.
avkrysningsboks # 1
boks nr. 2
boksen # 3
Sjekket:
ukontrollert:
:: root counter-reset: tickedBoxCount, unTickedBoxCount; input [type = 'avkrysningsboks'] counter-increment: unTickedBoxCount; input [type = 'avkrysningsboks']: merket counter-increment: tickedBoxCount; #tickedBoxCount :: før innhold: teller (tickedBoxCount); #unTickedBoxCount :: før innhold: teller (unTickedBoxCount);
Som jeg sa før, er dette tilfellet veldig enkelt. Vi sett to tellere på rotelementet og øk hver for hver avkrysningsboks for sine to stater, henholdsvis. Tellerverdiene er da vises på et bestemt sted ved hjelp av innhold eiendom.
Hvis du vil forstå bedre hvordan CSS tellere jobber, ta en titt på vårt forrige innlegg.
Nedenfor kan du se det endelige resultatet. Når du merker av og fjerner avmerkingsboksene, vil verdiene for “Sjekket” og “ukontrollert” tellere er endret sanntid.
2. Tekstinnganger
Vi kan også telle hvor mange tekstinnganger har blitt fylt og hvor mange har blitt tomt av brukeren. Denne løsningen vil ikke være like grei som den forrige, fordi, i motsetning til boksene, tekstinnganger har ikke pseudoklasser å flagge når de er fylt.
Så, vi må finne en alternativ rute. Det er en pseudoklasse det Indikerer når et element har plassholdertekst; det heter : Plassholder-vist.
Hvis vi bruker plassholdere i tekstinngangen, kan vi vite når inntastingsfeltet er tomt. Dette skjer når brukeren har ennå ikke skrevet noe inn i det fordi plassholderen vil forsvinne når det skjer.
fylt:
Tømme:
:: root counter-reset: filledInputCount, emptyInputCount; input [type = 'text'] counter-increment: filledInputCount; input [type = 'text']: plassholder-vist counter-increment: emptyInputCount; #filledInputCount :: før innhold: counter (filledInputCount); #emptyInputCount :: før innhold: teller (emptyInputCount);
Resultatet ligner på den forrige-de to tellerne er automatisk økt og dekrementert som vi legger til eller fjerner tekst til eller fra inntastingsfeltene.
3. Detaljer
Alternativtilstandene til et element må ikke alltid kun angis av pseudoklasser. Det kan være HTML-attributter gjør jobben, som i tilfelle av
De
Så, åpen HTML-attributt i elementet. Denne attributtet kan målrettes i CSS usyng sin attributtvelger.
Spørsmål 1: Spørsmål # 1
svar # 1
Q2: Spørsmål # 2
svar # 2
Spørsmål 3: Spørsmål # 3
svar # 3
Åpen:
Lukket:
:: root counter-reset: openDetailCount, closedDetailCount; detaljer counter-increment: closedDetailCount; detaljer [åpen] counter-increment: openDetailCount; #closedDetailCount :: før innhold: counter (closedDetailCount); #openDetailCount :: før innhold: counter (openDetailCount);
Resultatet er to sanntids-CSS-tellere igjen: Åpne og Lukkede.
4. Radioknapper
Å telle radioknapper krever en annen teknikk. Vi kunne sikkert bruke :sjekket pseudoklasse vi brukte til boksene. Men radioknappene er brukes forskjellig fra boksene.
Radio knapper er ment å være i grupper. Brukeren kan bare velge en i en gruppe. Hver gruppe fungerer som en enhet. De to statene en radioknappgruppe kan ha, er heller en av knappene er valgt eller ingen av dem er valgt.
Dermed bør vi ikke telle radioknapper med enkelte knapper, men av knappgrupper. For å oppnå det, vi gjøre bruk av : N-te-of-type velger. Jeg skal forklare det senere; la oss se koden først.
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
valgt:
Ikke valgt:
Vi må tilordne samme navn til radioknappene i samme gruppe. Hver gruppe i koden ovenfor har tre radioknapper inni.
:: root counter-reset: selectedRadioCount, unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n) counter-increment: unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n): merket counter-increment: selectedRadioCount; input [type = 'radio']: ikke (: nth-of-type (3n)): merket counter-increment: unSelectedRadioCount -1 valgtRadioCount; #selectedRadioCount :: før innhold: teller (valgtRadioCount); #unSelectedRadioCount :: før innhold: teller (unSelectedRadioCount);
De tre første stilreglene i den ovennevnte koden er de samme som de vi brukte i avmerkingsboksene, bortsett fra, i stedet for å målrette mot hver radioknapp, Vi målretter mot den siste alternativknappen i hver gruppe, som er den tredje i vårt tilfelle (: N-te-i-typen (3n)). Så, vi teller ikke alle radioknappene, men bare en per gruppe.
Det vil imidlertid ikke gi oss et riktig sanntidsresultat, som vi har ennå ikke gitt noen regel for å telle de to andre radioknappene i gruppen. Hvis en av dem er merket, skal det regnes og det ukontrollerte resultatet skal reduseres samtidig.
Det er derfor vi Legg til en -1 verdi etter unSelectedRadioCount i den siste stilregelen som retter seg mot de to andre radioknappene i en gruppe. Når en av dem er merket, -1 vil reduser det ukontrollerte resultatet.
Plasseringen av teller
Du kan bare se det riktige resultatet etter at tellingen er ferdig, dvs. etter at alle elementene som skal telles, er blitt behandlet. Dette er grunnen til at vi må plassere elementet der vi skal vise tellerne først etter at elementene som skal telles i HTML kildekoden.
Du kan ikke vise tellerne under elementene, men et annet sted på siden. I dette tilfellet, du må plassere tellerene på nytt bruker CSS egenskaper som oversette, margin, eller stilling.
Men mitt forslag ville være å bruk CSS-nettverket slik at du kan opprette layoutet på siden din uavhengig av rekkefølgen av elementene i HTML kildekoden. For eksempel kan du enkelt lage et rutenett som plasserer tellerne over eller ved siden av inntastingsfeltene.
