Count HTML State Pakeičia realaus laiko su CSS
Skaičiavimas yra visuotinė užduotis žiniatinklio programose. Kiek neskaitytų el. Laiškų turite? Kiek užduočių palikta nepažymėta jūsų darbų sąraše? Kiek spurgų skonio yra supakuota į krepšelį? Visi svarbiausi klausimai, į kuriuos vartotojai turi atsakyti.
Taigi, šis pranešimas parodys, kaip suskaičiuoti dviem elementais, kurios sudaro didžiausią vartotojų kontrolę, pvz., žymės langelius ir teksto įvestį, naudojant CSS skaitiklius.
Tau reikia pirmiausia nukreipkite tas valstybes, kuriose yra CSS, tai yra įmanoma pseudo klasės ir HTML atributai tai leidžia mums tai padaryti. Eikite į priekį ir eksperimentuokite su idėja ir ištyrinėkite įvairias pseudo klases, kurios gali dinamiškai rodyti elemento būsenos pasikeitimą.
Pradėsime nuo paprasčiausių, žymimųjų langelių.
1. Pažymėkite langelius
Pažymės langeliai “patikrinta” nurodykite, kada jie pažymėti. The : patikrinta pseudo klasė nurodo patikrintą būseną.
langelis # 1
žymės langelis # 2
langelis # 3
Patikrinta:
Nepažymėta:
:: root counter-reset: tickedBoxCount, unTickedBoxCount; input [type = 'checkbox'] counter-increment: unTickedBoxCount; input [type = 'checkbox']: pažymėtas counter-increment: tickedBoxCount; #tickedBoxCount :: prieš content: counter (tickedBoxCount); #unTickedBoxCount :: prieš turinys: skaitiklis (unTickedBoxCount);
Kaip jau minėjau, šis atvejis yra labai paprastas. Mes nustatykite du skaitiklius prie šaknų elemento ir kiekvienos pakopos padidinimas kiekvienam jų dviejose būsenose. Tuomet skaitiklių reikšmės yra rodoma tam tikroje vietoje naudojant turinys nuosavybė.
Jei norite geriau suprasti kaip veikia CSS skaitikliai, pažvelgti į mūsų ankstesnį pranešimą.
Žemiau galite matyti galutinį rezultatą. Pažymėję ir išbraukdami žymės langelius, bus rodomos “Patikrinta” ir “Nepasirinkta” skaitikliai modifikuotas realiu laiku.
2. Teksto įvestys
Taip pat galime suskaičiuoti, kiek teksto įvesties buvo užpildyti ir kiek buvo palikti tuščias vartotojo. Šis sprendimas nebus toks paprastas, kaip ir ankstesnis, nes, skirtingai nei žymės langeliai, teksto įvestys neturi pseudo klasių pažymėti, kai jie užpildomi.
Taigi, turime rasti alternatyvų maršrutą. Tai yra pseudo klasė nurodo, kada elementas turi vietos žymeklio tekstą; tai vadinama : rodomas vietos žymeklis.
Jei teksto įvestyje naudojame vietos žymenis, galime žinoti, kada įvesties laukas yra tuščias. Taip atsitinka, kai vartotojas dar neįrašė nieko į jį nes vietos žymeklis išnyks, kai taip atsitiks.
Užpildyta:
Tuščia:
:: root counter-reset: filledInputCount, emptyInputCount; input [type = 'text'] counter-increment: filledInputCount; input [type = 'text']: rodomas vietos žymeklis counter-increment: emptyInputCount; #filledInputCount :: prieš content: counter (filledInputCount); #emptyInputCount :: prieš content: counter (emptyInputCount);
Rezultatas yra panašus į ankstesnius du skaitiklius automatiškai didinamas ir sumažinamas pridedant arba pašalinant tekstą į arba iš įvesties laukų.
3. Išsami informacija
Alternatyvios elemento būsenos ne visada turi būti nurodytos tik pseudo klasės. Gali būti HTML atributai atlieka šį darbą, kaip
The
Taigi, atviras HTML atributas elemente. Šis atributas gali būti nukreiptas į CSS udainuoti jo atributo selektorių.
1 klausimas: # 1 klausimas
atsakymas # 1
Q2: # 2 klausimas
atsakymas # 2
3 klausimas
atsakymas # 3
Atviras:
Uždaryta:
:: root counter-reset: openDetailCount, uždarytasDetailCount; detalės counter-increment: uždarytiDetailCount; informacija [atvira] counter-increment: openDetailCount; #closedDetailCount :: prieš turinys: skaitiklis (uždarytasDetailų skaičius); #openDetailCount :: prieš content: counter (openDetailCount);
Rezultatas yra du realaus laiko CSS skaitikliai dar kartą: atidaryti ir uždaryti.
4. Radijo mygtukai
Radijo mygtukų skaičiavimui reikalinga kitokia technika. Mes tikrai galėtume naudoti : patikrinta pseudo klasė, kurią naudojome žymimiesiems langeliams. Tačiau radijo mygtukai yra naudojami skirtingai nei žymės langeliai.
Radijo mygtukai yra būti skirta grupėms. Naudotojas gali pasirinkti tik vieną grupėje. Kiekviena grupė veikia kaip vienas vienetas. Abi valstybės - radijo mygtukų grupė - taip pat gali būti pasirinktas vienas iš mygtukų arba nė vienas iš jų nėra pasirinktas.
Taigi neturėtume skaičiuoti radijo mygtukų atskirais mygtukais, bet pagal mygtukų grupes. Norėdami tai pasiekti, mes pasinaudoti : n-ojo tipo selektorių. Aš tai paaiškinsiu vėliau; pirmiausia pažiūrėkime kodą.
radijo 1.1 radijo-1.2 radijo-1.3
radijo 2.1 radijo-2.2 radijo-2.3
radijo 2.1 radijo-2.2 radijo-2.3
Pasirinkta:
Nepasirinkta:
Mums reikia priskirti tą patį pavadinimą prie tos pačios grupės radijo mygtukų. Kiekvienoje grupėje aukščiau esančiame kode yra trys radijo mygtukai.
:: root counter-reset: pasirinktaRadioCount, unSelectedRadioCount; įvestis [type = 'radio']: nth-of-type (3n) counter-increment: unSelectedRadioCount; įvestis [type = 'radio']: nth-of-type (3n): pažymėtas counter-increment: selectedRadioCount; input [type = 'radio']: ne (: nth-of-type (3n)): patikrinta counter-increment: unSelectedRadioCount -1 pasirinktaRadioCount; #selectedRadioCount :: prieš content: counter (selectedRadioCount); #unSelectedRadioCount :: prieš turinys: skaitiklis (unSelectedRadioCount);
Pirmieji trys pirmiau minėto fragmento stiliaus taisyklės yra tokie patys kaip ir tie, kuriuos taikėme žymimiesiems langeliams, išskyrus vietoj taikymo kiekvienas radijo mygtukas, kiekvienoje grupėje taikome paskutinį mygtuką, kuris yra trečiasis mūsų atveju (: n-ojo tipo (3n)). Taigi, mes neskaitome visų radijo mygtukų, bet tik po vieną.
Tačiau tai nepadės mums teisingo realaus laiko rezultato, kaip mes dar nepateikė jokių kitų dviejų radijo mygtukų grupėje taisyklių. Jei vienas iš jų yra patikrintas, jis turėtų būti skaičiuojamas ir tuo pačiu metu turėtų sumažėti nekontroliuojamas rezultatas.
Štai kodėl mes Pridėti -1 vertė po to unSelectedRadioCount paskutinio stiliaus taisyklėje, kuri nukreipia kitus du radijo mygtukus grupėje. Patikrinus vieną iš jų, -1 valia sumažinti nekontroliuojamą rezultatą.
Skaitmenų išdėstymas
Galite matyti tik teisingą rezultatą baigus skaičiavimą, t. y. po to, kai buvo apdoroti visi skaičiuojami elementai. Štai kodėl mes turime įdėti elementą, kurio viduje bus rodomi skaitikliai tik po elementų skaičiavimo HTML kodo kodą.
Galbūt nenorite rodyti skaitiklių žemiau elementų, bet kažkur kitur puslapyje. Šiuo atveju jūs reikia keisti skaitiklius naudojant CSS savybes, pvz versti, marža, arba poziciją.
Bet, mano siūlymas būtų naudoti CSS tinklelį kad galėtumėte sukurti puslapio išdėstymą nepriklausomai nuo jos elementų eilės HTML šaltinio kode. Pvz., Galite lengvai sukurti tinklelį, kuriame skaitikliai yra virš arba šalia įvesties laukų.
