Count HTML State ændrer realtid med CSS
Tælle er en allestedsnærværende opgave i webapplikationer. Hvor mange ulæste e-mails har du? Hvor mange opgaver er efterladt ukontrolleret på din opgaveliste? Hvor mange donut smager er i sækken i indkøbskurven? Alle er afgørende spørgsmål, som brugerne fortjener svar på.
Så dette indlæg vil vise dig, hvordan du skal tæller bi-angivne elementer, som udgør størstedelen af brugerkontroller som afkrydsningsfelter og tekstindgange, ved hjælp af CSS-tællere.
Du skal mål disse stater med CSS først, hvilket er muligt ved hjælp af pseudoklasser og HTML-attributter det tillader os at gøre netop det. Gå videre og eksperimenter med ideen og udforsk de forskellige pseudoklasser, der kan indikere forandringen i en tilstand af et element dynamisk.
Vi starter med de enkleste afkrydsningsfelter.
1. Afkrydsningsfelter
Afkrydsningsfelter går ind “kontrolleret” tilstand, når de er krydset. Det : kontrolleret pseudo-klasse angiver den valgte tilstand.
afkrydsningsfelt # 1
afkrydsningsfelt # 2
afkrydsningsfelt # 3
Kontrolleret:
Ukontrolleret:
:: root counter-reset: tickedBoxCount, unTickedBoxCount; input [type = 'checkbox'] counter-increment: unTickedBoxCount; input [type = 'checkbox']: markeret counter-increment: tickedBoxCount; #tickedBoxCount :: før indhold: tæller (tickedBoxCount); #unTickedBoxCount :: før indhold: tæller (unTickedBoxCount);
Som jeg sagde før, er denne sag meget enkel. Vi Indstil to tællere ved rodelementet og stig hver for hver afkrydsningsfelt for henholdsvis sine to stater. Tællerværdierne er da vises på et bestemt sted ved hjælp af indhold ejendom.
Hvis du vil forstå bedre hvordan CSS tællere arbejder, se på vores tidligere indlæg.
Nedenfor kan du se det endelige resultat. Når du tjekker og fjerner afkrydsningsfelterne, skal værdierne for “Kontrolleret” og “Ukontrolleret” tællere er ændret i realtid.
2. Tekstindgange
Vi kan også tælle hvor mange tekstindtastninger er blevet fyldt og hvor mange er blevet efterladt tom af brugeren. Denne løsning vil ikke være så ligetil som den forrige, fordi i modsætning til afkrydsningsfelter, tekstindgange har ikke pseudoklasser at flagge, når de er fyldt.
Så vi skal finde en alternativ rute. Der er en pseudoklasse der angiver, hvornår et element har pladsholdertekst; det hedder : Pladsholder-vist.
Hvis vi bruger pladsholdere i vores tekstindtastning, kan vi vide, hvornår indtastningsfeltet er tomt. Dette sker, når brugeren har endnu ikke skrevet noget i det fordi pladsholderen vil forsvinde, når det sker.
Fyldt op:
Tom:
:: root counter-reset: filledInputCount, emptyInputCount; input [type = 'text'] counter-increment: filledInputCount; input [type = 'text']: stedholder-vist counter-increment: emptyInputCount; #filledInputCount :: før indhold: tæller (filledInputCount); #emptyInputCount :: før indhold: tæller (emptyInputCount);
Resultatet ligner den forrige-de to tællere er automatisk øget og dekrementeret som vi tilføjer eller fjerner tekst til eller fra inputfelterne.
3. Detaljer
Alternativ tilstand af et element skal ikke altid kun angives af pseudoklasser. Der kan være HTML attributter gør det job, som i tilfældet med
Det
Så, åben HTML-attribut i elementet. Denne attribut kan målrettes i CSS usynge dens attributvælger.
Spørgsmål 1: Spørgsmål nr. 1
svar # 1
Spørgsmål 2: Spørgsmål nr. 2
svar # 2
Spørgsmål 3: Spørgsmål nr. 3
svar # 3
Åben:
Lukket:
:: root counter-reset: openDetailCount, closedDetailCount; detaljer counter-increment: closedDetailCount; detaljer [åben] counter-increment: openDetailCount; #closedDetailCount :: før indhold: tæller (closedDetailCount); #openDetailCount :: før indhold: tæller (openDetailCount);
Resultatet er to realtids-CSS-tællere igen: Åben og lukket.
4. Radio knapper
Tælling af radioknapper kræver en anden teknik. Vi kunne helt sikkert bruge : kontrolleret pseudoklasse vi brugte til afkrydsningsfelter. Men radioknapperne er bruges forskelligt end afkrydsningsfelterne.
Radio knapper er ment at være i grupper. Brugeren kan kun vælge en indenfor en gruppe. Hver gruppe fungerer som en enkelt enhed. De to stater en radioknap gruppe kan have er enten en af knapperne er valgt eller ingen af dem er valgt.
Således må vi ikke tælle radioknapper ved hjælp af enkelte knapper, men af knapgrupper. For at opnå det, vi gøre brug af : N'te-of-typen vælgeren. Jeg forklarer det senere; lad os 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
Valgte:
Ikke valgt:
Vi er nødt til tildele samme navn til radioknapperne i samme gruppe. Hver gruppe i koden ovenfor har tre radioknapper inde.
:: root counter-reset: selectedRadioCount, unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n) counter-increment: unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n): checket counter-increment: selectedRadioCount; input [type = 'radio']: ikke (: nth-of-type (3n)): markeret counter-increment: unSelectedRadioCount -1 selectedRadioCount; #selectedRadioCount :: før indhold: tæller (valgtRadioCount); #unSelectedRadioCount :: før indhold: tæller (unSelectedRadioCount);
De tre første stilregler i ovenstående uddrag er de samme som dem, vi anvendte i afkrydsningsfelterne, undtagen i stedet for at målrette mod hver Radio knap, Vi målretter mod den sidste radioknap i hver gruppe, hvilket er det tredje i vores tilfælde (: N'te-of-type (3n)). Så tæller vi ikke alle radioknapperne, men kun en pr. gruppe.
Men det vil ikke give os et rigtigt resultat i realtid, som vi har endnu ikke givet nogen regel for at tælle de to andre radioknapper i gruppen. Hvis en af dem er tjekket, skal den tælles og det ukontrollerede resultat skal falde på samme tid.
Det er derfor vi Tilføj en -1 værdi efter unSelectedRadioCount i den sidste stilregel, der retter sig mod de to andre radioknapper i en gruppe. Når en af dem er markeret, -1 vilje reducer det ukontrollerede resultat.
Placeringen af tæller
Du kan kun se det korrekte resultat efter at tællingen er afsluttet, dvs. efter at alle de elementer, der skal tælles, er blevet behandlet. Derfor er vi nødt til at placere det element, indenfor hvilket vi viser tællerne først efter de elementer, der skal tælles i HTML kildekoden.
Du vil måske ikke vise tællerne under elementerne, men et andet sted på siden. I dette tilfælde, du nødt til at omplacere tællerne ved hjælp af CSS egenskaber såsom Oversætte, margen, eller position.
Men mit forslag ville være at brug CSS-nettet så du kan oprette layoutet på din side uafhængig af rækkefølgen af dens elementer i HTML-kildekoden. For eksempel kan du nemt oprette et gitter, der placerer tællerne ovenfor eller ved siden af inputfelterne.
