Count HTML State Muuttaa Real-Time CSS llä
Laskeminen on yleinen tehtävä Web-sovelluksissa. Kuinka monta lukematonta sähköpostiviestiä sinulla on? Kuinka monta tehtävää ei ole valittu tehtäväluettelossasi? Kuinka monta donutin makua on ostettu ostoskoriin? Kaikki ovat ratkaisevia kysymyksiä, joita käyttäjät ansaitsevat.
Joten tämä viesti näyttää, miten lasketaan bi-ilmoitettuja elementtejä, jotka muodostavat suurimman osan käyttäjäohjauksista, kuten valintaruutuista ja tekstinsyöttöistä, CSS-laskurien avulla.
Sinun täytyy kohdista ne CSS-valtiot, joka on mahdollista pseudo-luokat ja HTML-määritteet että voimme tehdä juuri niin. Mene eteenpäin ja kokeile ajatusta ja tutki erilaisia pseudo-luokkia, jotka voivat osoittaa elementin tilan muuttumisen dynaamisesti.
Aloitamme yksinkertaisimmista valintaruuduista.
1. Valintaruudut
Valintaruudut siirtyvät “tarkistettu” ilmoitetaan, kun ne on valittu. : tarkistettu näennäisluokka ilmaisee tarkistetun tilan.
valintaruutu # 1
valintaruutu # 2
valintaruutu # 3
tarkistettu:
Tarkistamaton:
:: root counter-reset: tickedBoxCount, unTickedBoxCount; input [type = 'checkbox'] counter-inrement: unTickedBoxCount; input [type = 'checkbox']: valittu counter-increment: tickedBoxCount; #tickedBoxCount :: ennen content: counter (tickedBoxCount); #unTickedBoxCount :: ennen content: counter (unTickedBoxCount);
Kuten aiemmin sanoin, tämä tapaus on hyvin yksinkertainen. Me aseta kaksi laskuria juurielementtiin ja jokaisen lisäyksen kunkin kunkin valintaruudun osalta. Laskuriarvot ovat sitten näytetään määritetyssä paikassa käyttäen pitoisuus omaisuus.
Jos haluat ymmärtää paremmin miten CSS laskee, katso edellinen viesti.
Alla näet lopullisen tuloksen. Kun tarkistat ja poistat valintaruudut, merkit “tarkistettu” ja “esteettä” laskurit ovat muutettu reaaliaikaisesti.
2. Tekstinsyötöt
Voimme myös laskea, kuinka monta tekstinsyöttöä on täytetty ja kuinka monta on jätetty tyhjäksi käyttäjä. Tämä ratkaisu ei ole yhtä yksinkertainen kuin edellinen, koska toisin kuin valintaruudut, tekstinsyöttöillä ei ole pseudo-luokkia merkitä, kun ne on täytetty.
Joten meidän on löydettävä vaihtoehtoinen reitti. Siellä on pseudo-luokka ilmoittaa, milloin elementillä on paikkamerkki; sitä kutsutaan : Paikkamerkki-esitetty.
Jos käytämme tekstinsyötössä paikanvaraajia, voimme tietää, milloin syöttökenttä on tyhjä. Tämä tapahtuu, kun käyttäjä ei ole vielä kirjoittanut mitään siihen koska paikkamerkki poistuu, kun se tapahtuu.
täytetty:
Tyhjä:
:: root counter-reset: filledInputCount, emptyInputCount; input [type = 'text'] counter-increment: täytettyInputCount; input [type = 'text']: paikkamerkki näytetty counter-increment: emptyInputCount; #filledInputCount :: ennen content: counter (filledInputCount); #emptyInputCount :: ennen content: counter (emptyInputCount);
Tulos on samanlainen kuin edellinen kaksi laskuria automaattisesti ja vähennetään kun lisäämme tai poistamme tekstin syöttökenttiin tai niistä.
3. Tiedot
Elementin vaihtoehtoisia tiloja ei tarvitse aina ilmoittaa vain pseudo-luokilla. Siellä saattaa olla HTML-attribuutit tekevät tätä työtä, kuten
Niin, avata HTML-määrite elementissä. Tämä ominaisuus voidaan kohdistaa CSS ulaulaa sen attribuutinvalitsin.
Q1: kysymys # 1
vastaus # 1
Q2: kysymys # 2
vastaus # 2
Q3: kysymys # 3
vastaus # 3
Avata:
Suljettu:
:: root counter-reset: openDetailCount, suljettuDetailCount; yksityiskohdat counter-increment: suljettuDetailCount; yksityiskohdat [open] counter-increment: openDetailCount; #closedDetailCount :: ennen sisältö: laskuri (suljettuDetailCount); #openDetailCount :: ennen content: counter (openDetailCount);
Tulos on kaksi reaaliaikaista CSS-laskuria uudelleen: Avaa ja suljettu.
4. Radio-painikkeet
Radiopainikkeiden laskeminen vaatii eri tekniikkaa. Voimme varmasti käyttää sitä : tarkistettu pseudo-luokka, jota käytimme valintaruutuihin. Radion painikkeet ovat kuitenkin käytetään eri tavoin kuin valintaruutuja.
Radio-painikkeet ovat tarkoitus olla ryhmissä. Käyttäjä voi valita vain yhden ryhmän sisällä. Jokainen ryhmä toimii yhtenä yksikkönä. Molemmat tilat, joissa radiopainoryhmä voi olla, on myös yksi painikkeista on valittu tai mikään niistä ei ole valittuna.
Näin ollen meidän ei pitäisi laskea radiotappeja yksittäisillä painikkeilla, vaan painikkeilla. Tämän saavuttamiseksi me hyödyntää : Nnen-of-tyyppinen valitsin. Selitän sen myöhemmin; Katsotaan ensin koodi.
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
valitut:
Valitsematon:
Meidän täytyy määritä sama nimi samaan ryhmään kuuluviin radiopainikkeisiin. Jokaisessa yllä olevassa koodissa olevalla ryhmällä on kolme radiopainiketta.
:: root counter-reset: valittuRadioCount, unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n) counter-increment: unSelectedRadioCount; input [type = 'radio']: nth-of-type (3n): tarkistettu counter-increment: selectedRadioCount; input [type = 'radio']: ei (: nth-of-type (3n)): valittu counter-increment: unSelectedRadioCount -1 valittuRadioCount; #selectedRadioCount :: ennen content: counter (selectedRadioCount); #unSelectedRadioCount :: ennen sisältö: laskuri (unSelectedRadioCount);
Edellä mainitun katkelman kolme ensimmäistä tyylisääntöä ovat samat kuin ne, joita käytimme valintaruutuihin, paitsi kohdistuksen sijaan joka radiopainike, Kohdistamme viimeisimmän valintapainikkeen kussakin ryhmässä, joka on kolmas tapauksessamme (: Nnen-of-tyyppi (3n)). Joten emme laske kaikkia radiopainikkeita vain yksi per ryhmä.
Tämä ei kuitenkaan anna meille oikeaa reaaliaikaisia tuloksia, kuten me eivät ole vielä antaneet mitään sääntöä muiden kahden radion painikkeen laskemiseksi ryhmässä. Jos jokin niistä tarkistetaan, se on laskettava ja tarkistamattoman tuloksen pitäisi laskea samanaikaisesti.
Siksi me lisää -1 arvo jälkeen unSelectedRadioCount viimeisessä tyylisäännössä, joka kohdistuu kahteen muuhun radion painikkeeseen ryhmässä. Kun jokin niistä on tarkistettu, -1 tahtoa vähennä tarkistamatonta tulosta.
Laskelmien lukumäärä
Näet vain oikean tuloksen laskennan jälkeen, eli kun kaikki laskettavat elementit on käsitelty. Siksi meidän on sijoitettava elementti, johon näytämme laskurit vain sen jälkeen, kun elementit on laskettava HTML-lähdekoodissa.
Et ehkä halua näyttää laskurit elementtien alapuolella, vaan muualla sivulla. Tässä tapauksessa sinä täytyy laskea laskurit uudelleen käyttämällä CSS-ominaisuuksia, kuten Kääntää, marginaali, tai asento.
Mutta minun ehdotukseni olisi käytä CSS-verkkoa jotta voit luoda sivusi asettelun riippumatta sen elementtien järjestyksestä HTML-lähdekoodissa. Voit esimerkiksi luoda helposti ruudukon, joka asettaa laskurit syöttökenttien ylä- tai vieressä.
