Numărătoarea stării HTML se schimbă în timp real cu CSS
Numărarea este o sarcină omniprezentă în aplicațiile web. Câte e-mailuri necitite aveți? Câte sarcini sunt lăsate nesupravegheate în lista dvs. de sarcini? Cât de multe arome gogoși sunt ambalate în coșul de cumpărături? Toate sunt întrebări cruciale pentru care merită răspunsul utilizatorilor.
Deci, acest post vă va arăta cum să numără elementele bi-declarate, care constituie majoritatea comenzilor utilizatorului, cum ar fi casetele de selectare și intrările de text, utilizând contoare CSS.
Trebuie să vizați țările respective mai întâi cu CSS, care este posibil prin intermediul pseudo-clase și atributele HTML care ne permit să facem acest lucru. Mergeți și experimentați cu ideea și explorați diferitele pseudo-clase care pot indica schimbarea într-o stare a unui element, dinamic.
Vom începe cu cele mai simple casete de selectare.
1. casetele de selectare
Bifați casetele de selectare “verificat” atunci când sunt bifați. : verificat pseudo-clasă indică starea verificată.
caseta de selectare # 1
caseta de validare # 2
caseta de selectare # 3
verificat:
Nebifat:
:: rădăcină counter-reset: tickedBoxCount, unTickedBoxCount; introduceți [type = 'checkbox'] counter-increment: unTickedBoxCount; introduceți [type = 'checkbox']: verificat counter-increment: tickedBoxCount; #tickedBoxCount :: înainte de content: counter (tickedBoxCount); #unTickedBoxCount :: înainte de content: counter (unTickedBoxCount);
După cum am spus înainte, acest caz este foarte simplu. Noi setați două contoare la elementul rădăcină și incrementați fiecare pentru fiecare casetă de selectare pentru cele două stări, respectiv. Valorile contorului sunt apoi afișate într-un loc desemnat folosind conţinut proprietate.
Dacă vrei să înțelegi mai bine cum funcționează contoarele CSS, aruncăm o privire la postul nostru anterior.
Mai jos, puteți vedea rezultatul final. Când bifați și debifați casetele de validare, valorile din “verificat” și “necontenit” contoarele sunt modificat în timp real.
2. Introducerea textului
De asemenea, putem conta câte intrări de text au fost umplute și câte au fost lăsate goale de către utilizator. Această soluție nu va fi la fel de simplă ca cea precedentă, deoarece, spre deosebire de casetele de selectare, intrările de text nu au pseudo-clase să semnaleze când sunt încărcate.
Deci, trebuie să găsim un traseu alternativ. Există o pseudo-clasă indică când un element are text de tip placeholder; se numeste : Substituent nefigurat.
Dacă folosim opțiunile de inserare în textul nostru, putem să știm când câmpul de introducere este gol. Acest lucru se întâmplă atunci când utilizatorul încă nu a introdus nimic în ea deoarece substituentul va dispărea atunci când se întâmplă acest lucru.
Umplut:
Gol:
:: rădăcină contra-reset: filledInputCount, emptyInputCount; introducere [type = 'text'] contra-increment: filledInputCount; introducere [type = 'text']: afișare substituent counter-increment: emptyInputCount; #filledInputCount :: înainte de content: counter (filledInputCount); #emptyInputCount :: înainte de content: counter (emptyInputCount);
Rezultatul este similar cu cel precedent - cele două contoare sunt automat incrementate și decrementate adăugând sau eliminând textul din câmpurile de introducere.
3. Detalii
Stările alternative ale unui element nu trebuie întotdeauna să fie indicate numai de pseudo-clase. Ar putea fi acolo Atributele HTML care fac acea slujbă, ca în cazul
Asa de, deschis Atributul HTML în element. Acest atribut poate fi vizat în CSS ucântă selectorul său de atribute.
Q1: întrebarea # 1
raspunsul 1
Întrebarea nr. 2: Întrebarea nr. 2
răspunsul # 2
Q3: întrebarea # 3
răspunsul # 3
Deschis:
Închis:
:: rădăcină counter-reset: openDetailCount, closedDetailCount; detalii counter-increment: closedDetailCount; detalii [deschide] contra-increment: openDetailCount; #closedDetailCount :: înainte de content: counter (closedDetailCount); #openDetailCount :: înainte de content: counter (openDetailCount);
Rezultatul este două contoare CSS în timp real din nou: Deschis și închis.
4. Butoane radio
Numărarea butoanelor radio necesită o tehnică diferită. Am putea folosi cu siguranță : verificat pseudo-clasa pe care am folosit-o pentru casetele de selectare. Cu toate acestea, butoanele radio sunt utilizați diferit decât casetele de selectare.
Butoanele radio sunt să fie în grupuri. Utilizatorul poate selecta numai unul din interiorul unui grup. Fiecare grup acționează ca o singură unitate. Cele două stări pe care le poate avea un grup de butoane radio sunt: unul dintre butoane este selectat sau niciuna dintre ele nu este selectată.
Astfel, nu ar trebui să numărăm butoanele radio prin butoanele individuale, dar prin grupuri de butoane. Pentru a realiza acest lucru, noi să utilizeze : Nth-de-tip selector. O să explic mai târziu; Să vedem mai întâi codul.
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
Selectat:
neselectat:
Avem nevoie să atribuiți același nume la butoanele radio din același grup. Fiecare grup din codul de mai sus are trei butoane radio înăuntru.
:: rădăcină counter-reset: selectedRadioCount, unSelectedRadioCount; intrare [type = 'radio']: n-a-tip (3n) contra-increment: unSelectedRadioCount; intrare [type = 'radio']: nth-of-type (3n): verificat counter-increment: selectedRadioCount; input [type = 'radio']: nu (: nth-of-type (3n)): verificat contra-increment: unSelectedRadioCount -1 selectRadioCount; #selectedRadioCount :: înainte de content: counter (selectedRadioCount); #unSelectedRadioCount :: înainte de content: counter (unSelectedRadioCount);
Primele trei reguli de stil din fragmentul de mai sus sunt aceleași cu cele pe care le-am aplicat casetelor de selectare, cu excepția, în loc de direcționare fiecare buton de radio, vizăm ultimul buton radio din fiecare grup, care este a treia în cazul nostru (: Nth-de-tip (3n)). Deci, nu numărăm toate butoanele radio, ci doar unul pe grup.
Cu toate acestea, acest lucru nu ne va da un rezultat corect în timp real, ca noi nu au dat încă nicio regulă pentru numărarea celorlalte două butoane radio din grup. Dacă una dintre ele este verificată, ar trebui să fie luată în considerare și rezultatul necontrolat ar trebui să scadă în același timp.
De aceea noi adauga o -1 valoare după unSelectedRadioCount în ultima regulă de stil care vizează celelalte două butoane radio dintr-un grup. Când unul dintre ei este verificat, -1 voi scădea rezultatul necontrolat.
Plasarea contoarelor
Puteți vedea doar rezultatul corect după ce numărarea a fost terminată, adică după ce au fost procesate toate elementele care urmează să fie contorizate. Acesta este motivul pentru care trebuie să plasăm elementul în interiorul căruia vom afișa contoarele numai după ce au fost luate în considerare elementele în codul sursă HTML.
Este posibil să nu doriți să afișați contoarele de sub elemente, dar în altă parte a paginii. În acest caz, voi trebuie să repoziționați contoarele utilizând proprietăți CSS, cum ar fi Traduceți, margine, sau poziţie.
Dar sugestia mea ar fi să o fac utilizați grila CSS astfel încât să puteți crea aspectul paginii dvs. independent de ordinea elementelor sale în codul sursă HTML. De exemplu, puteți crea cu ușurință o rețea care plasează contoarele deasupra sau lângă câmpurile de introducere.
