Štetje stanja HTML spreminja Real-Time s CSS
Štetje je povsod opravilo v spletnih aplikacijah. Koliko neprebranih e-poštnih sporočil imate? Koliko nalog na vašem seznamu opravil ni označenih? Koliko okusov krofov je vrečk v košarici? Vse so ključna vprašanja, za katera si uporabniki zaslužijo odgovore.
Torej, ta objava vam bo pokazala, kako štetje dvakrat navedenih elementov, ki predstavljajo večino uporabniških kontrol, kot so potrditvena polja in vnosi besedila, z uporabo števcev CSS.
Moraš najprej ciljno usmerite te države s CSS, kar je mogoče s pomočjo psevdo-razredi in atributi HTML to nam omogoča, da naredimo prav to. Nadaljujte z eksperimentiranjem z idejo in raziščite različne psevdo-razrede, ki lahko nakazujejo spremembo stanja elementa, dinamično.
Začeli bomo z najpreprostejšimi potrditvenimi polji.
1. Potrditvena polja
Označite potrditvena polja “preverjeno” navedite, ko so označeni. The : označeno psevdo-razred označuje preverjeno stanje.
potrditveno polje # 1
potrditveno polje # 2
potrditveno polje # 3
Preverjeno:
Nepreverjeno:
:: root counter-reset: tickedBoxCount, unTickedBoxCount; input [type = 'checkbox'] counter-increment: unTickedBoxCount; input [type = 'checkbox']: označeno counter-increment: tickedBoxCount; #tickedBoxCount :: before content: števec (tickedBoxCount); #unTickedBoxCount :: before content: counter (unTickedBoxCount);
Kot sem že rekel, je ta primer zelo preprost. Mi nastavite dva števca na korenskem elementu in vsakega za vsako potrditveno polje za svoja dva stanja. Vrednosti števec so nato prikazano na določenem mestu vsebine nepremičnine.
Če želite bolje razumeti delovanje CSS, si oglejte našo prejšnjo objavo.
Spodaj lahko vidite končni rezultat. Ko potrdite in počistite potrditvena polja, se prikažejo vrednosti “Preverjeno” in “Nepreverjeno” števci so v realnem času.
2. Vnosi besedila
Lahko tudi preštejemo število vnosov besedila so bili izpolnjeni in koliko ostala prazna uporabnik. Ta rešitev ne bo tako enostavna kot prejšnja, ker, za razliko od potrditvenih polj, vnosi besedila nimajo psevdo-razredov za označevanje, ko so napolnjeni.
Torej moramo najti nadomestno pot. To je psevdo-razred označuje, kdaj ima element besedo ograd; to se imenuje : prikazano mesto.
Če uporabimo ograde v vnosu besedila, lahko vemo, kdaj je vnosno polje prazno. To se zgodi, ko uporabnik še ni vnesel ničesar v to ker bo rezervirano mesto izginilo, ko se to zgodi.
Polnjeno:
Prazno:
:: root counter-reset: filledInputCount, emptyInputCount; input [type = 'text'] counter-increment: filledInputCount; input [type = 'text']: prikazana rezervirana mesta counter-increment: emptyInputCount; #filledInputCount :: before content: števec (filledInputCount); #emptyInputCount :: before content: števec (emptyInputCount);
Rezultat je podoben prejšnjemu - dva števca sta samodejno se poveča in zmanjša ko dodajamo ali odstranjujemo besedilo v vnosna polja ali iz njih.
3. Podrobnosti
Alternativnih stanj elementov ne smejo vedno navajati le psevdo-razredi. Mogoče je Atributi HTML delajo to nalogo, kot v primeru. \ t
The
Torej, odprto Atribut HTML v elementu. Ta atribut je lahko ciljno usmerjen v CSS upojejo njegov izbirnik atributov.
V1: vprašanje # 1
odgovor # 1
V2: vprašanje # 2
odgovor # 2
V3: vprašanje # 3
odgovor # 3
Odprto:
Zaprto:
:: root counter-reset: openDetailCount, closedDetailCount; Podrobnosti counter-increment: closedDetailCount; podrobnosti [odprto] counter-increment: openDetailCount; #closedDetailCount :: before content: števec (zaprtoDetailCount); #openDetailCount :: pred content: counter (openDetailCount);
Rezultat je dva CSS števca v realnem času znova: Odpri in Zapri.
4. Radijski gumbi
Štetje radijskih gumbov zahteva drugačno tehniko. Vsekakor bi lahko uporabili : označeno psevdo-razred smo uporabili za potrditvena polja. Vendar pa so izbirni gumbi uporabljajo drugače kot potrditvena polja.
Radijski gumbi so v skupinah. Uporabnik lahko izbere samo enega v skupini. Vsaka skupina deluje kot ena enota. Tudi dva stanja, ki jih lahko ima skupina radijskih gumbov, je izbran je eden od gumbov ali nobena od njih ni izbrana.
Zato radijskih gumbov ne smemo prešteti po posameznih gumbih, ampak s skupinami gumbov. Da bi to dosegli, mi uporabite : nth-of-type izbirnik. Razložil bom kasneje; najprej vidimo kodo.
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
Izbrano:
Neizbrano:
Moramo dodelite isto ime na izbirnih gumbih v isti skupini. Vsaka skupina v zgornji kodi ima v njem tri radijske gumbe.
:: root counter-reset: selectedRadioCount, unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n) counter-increment: unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n): označeno counter-increment: selectedRadioCount; input [type = 'radio']: ne (: nth-of-type (3n)): označeno counter-increment: unSelectedRadioCount -1 selectedRadioCount; #selectedRadioCount :: before content: counter (selectedRadioCount); #unSelectedRadioCount :: before content: counter (unSelectedRadioCount);
Prva tri pravila slog v zgornjem odlomku so enaka kot tista, ki smo jih uporabili za potrditvena polja, razen za ciljanje vsak radijski gumb, ciljno zadnje izbirno tipko v vsaki skupini, ki je tretji v našem primeru (: nth-of-type (3n)). Torej ne štejemo vseh radijskih gumbov, ampak samo ena na skupino.
Vendar pa to ne bo dalo pravega rezultata v realnem času, kot smo mi še niso podali nobenega pravila za štetje drugih dveh izbirnih gumbov v skupini. Če je eden od njih preverjen, ga je treba prešteti in obenem se mora zmanjšati nepreverjeni rezultat.
Zato smo mi dodajte a -1 vrednost po unSelectedRadioCount v zadnjem pravilu sloga, ki cilja na druga dva izbirna gumba v skupini. Ko je eden od njih preverjen, -1 volja zmanjšajte nepreverjeni rezultat.
Namestitev grofov
Pravi rezultat lahko vidite samo po zaključku štetja, ko so bili obdelani vsi elementi, ki jih je treba prešteti. Zato moramo postaviti element, znotraj katerega bomo prikazali števce šele po elementih, ki jih je treba prešteti v izvorni kodi HTML.
Morda ne boste želeli prikazati števcev pod elementi, ampak nekje drugje na strani. V tem primeru, vi premikanje števcev uporabo lastnosti CSS, kot je npr prevesti, marže, ali položaj.
Toda moj predlog bi bil uporabite mrežo CSS tako, da lahko ustvarite postavitev strani neodvisno od vrstnega reda elementov v izvorni kodi HTML. Na primer, preprosto lahko ustvarite mrežo, ki postavlja števce nad ali poleg vnosnih polj.
