HTML5-mittarin käyttäminen ja muotoilu [opas]

Jos tiedät HTML-etenemispalkin, joka osoittaa, kuinka paljon toimintaa on suoritettu, mittarin elementti on samanlainen kuin molemmat näyttää nykyisen arvon maksimiarvosta. Toisin kuin etenemispalkissa, mittaripalkkia ei käytetä edistymisen näyttämiseen.

Sitä käytetään osoittamaan a staattinen arvo tietyllä alueella, Voit esimerkiksi ilmoittaa levytallennuksessa käytetyn tallennustilan osoittamalla, kuinka paljon tallennustilaa on täytetty ja kuinka paljon.

Tämän lisäksi mittarielementtiä voidaan käyttää jopa kolmen alueen visualisoimiseen sen alueella. Tallennustilan esimerkin käyttäminen uudelleen sen sijaan, että näytettäisiin vain kuinka paljon tilaa on käytössä, voit myös ilmoittaa visuaalisesti, onko varattu tila vain harvoin täytetty (sanoo alle 30%) tai lähes puoliksi täynnä (30–60%) tai enemmän kuin puolet täynnä (yli 60%) eri värejä käyttäen. Tämä auttaa käyttäjiä tietämään, milloin ne saavuttavat tallennusrajan.

Tässä viestissä näytämme sinulle miten mittarin palkki tyyliin molemmissa mainituissa tarkoituksissa, so yksinkertainen mittari (ilman ilmoitettuja alueita) ja kaksi esimerkkiä mittareista, joissa on 3 värillistä aluetta. Jälkimmäisen osalta työskentelemme "merkkien" mittarin luominen huonojen, keskimääräisten ja hyvien merkkien näyttämiseksi, ja "pH" -mitta happamien, hermojen ja emäksisten pH-arvojen osoittamiseksi.

määritteet

Ennen kuin aloitamme esimerkkien kanssa ja siirrymme syvällisemmin, otamme nopeasti selville sen alla olevien ominaisuuksien luettelon, näihin ominaisuuksiin, kuten niiden oletusarvoihin, jne..

arvo - Arvon arvo mittari elementti
min - Mittarin kantaman vähimmäisarvo
max - Mittarin kantaman maksimiarvo
matala - Ilmaisee pienen raja-arvon
korkea - Ilmaisee suuren raja-arvon
paras mahdollinen - Optimaalinen piste alueella

1. Yksinkertaisen mittarin muotoilu

Tässä on hyvin yksinkertainen esimerkki, jossa käytetään vain yhtä attribuuttia arvo. Ennen kuin jatkamme, meidän on ensin tiedettävä kolme asiaa:

(1) Oletusarvo on min ja max arvo, joka määrittää alueen mittari, joka on vastaavasti 0 ja 1. (2) Jos käyttäjä määrittää arvo ei kuulu mittari vaihteluväli, se ottaa joko arvon min tai max, kumpi se on lähimpänä. (3) Loppumerkintä on pakollinen.

Tässä on syntaksi:

0,5

Vaihtoehtoisesti voimme myös lisätä min ja max määrittelemällä siten käyttäjän määrittelemät alueet näin:

2. "Merkkien" mittarin muotoilu

Ensinnäkin meidän on jaettava alue kolmeen alueeseen (vasen / matala, keski, oikea / korkea). Tämä on ollut matala ja korkea ominaisuudet tulevat voimaan. Näin jaetaan kolme aluetta.

Kolme aluetta muodostetaan min & matala , matala & korkea ja korkea & max.

Nyt on selvää, että on olemassa tiettyjä ehtoja matala ja korkea arvojen tulisi seurata kolmen muodostettavan alueen osalta:

matala ei voi olla pienempi kuin min ja suurempi kuin korkea & max
korkea ei voi olla suurempi kuin max ja vähemmän kuin matala & min.
Ja kun kriteerit ovat rikki molemmat matala ja korkea ottaa huomioon toisen muuttujan arvon kriteereissä, jotka eivät täyty, eli jos matala arvo on pienempi kuin min jota sen ei pitäisi olla, matala saa min arvo.

Tässä esimerkissä pidämme kolmea aluettamme vasemmalta oikealle:

Huono: (0-33)
Keskiverto: (34-60)
Hyvä: (61-100)

Näin ollen attribuutit ovat arvoja; min = "0" matala = "34" korkea = "60" max = "100".

Tässä on kuva alueiden visualisoimiseksi.

Vaikka juuri nyt muodostamassa mittarissa on kolme aluetta, se ilmaisee vain kaksi "erilaista" aluetta vain kahdessa värissä tällä hetkellä. Miksi? Koska paras mahdollinen on keskialueella.

Optimaalinen piste

Missä tahansa alueella (kolmesta) paras mahdollinen piste putoaa, sitä pidetään "optimaalisena alueena", joka on väriltään vihreä. Aluetta (alueita), joita sen vieressä on, kutsutaan "optimaaliseksi alueeksi" ja se on värillinen oranssi. Se, joka on kauimpana, on "ei-paljon-optimaalinen alue", värillinen punainen.

Tähän mennessä emme ole osoittaneet arvoa paras mahdollinen. Tällöin oletusarvo muuttuu 50: ksi, jolloin keskialue on "optimaalinen alue" ja sen vieressä olevat (sekä vasemmalla että oikealla) "optimaalisina alueina".

Lyhyesti sanottuna edellä mainitussa tapauksessa, mikä tahansa arvo mittari keskiosaan laskeva elementti on merkitty vihreällä; loput oranssi.

Emme halua sitä. Haluamme sen värjäämisen näin: Huono (punainen), Keskiverto (oranssi), Hyvä (vihreä)

Koska oikea alue on pidettävä optimaalisena alueena, annamme paras mahdollinen arvo, joka tulee oikealle alueelle (mikä tahansa arvo välillä 61-100, mukaan lukien 61 & 100).

Otamme 90 esimerkkiä. Tämä tekee oikean alueen "optimaalisesta", keskimmäisestä (sen välittömästä seuraavasta alueesta) "optimaalisen" ja kaukana vasemmalta "ei-paljon-optimaalista" aluetta.

Tätä me saamme mittaristamme.

2. Muotoilu "pH" -mittaus

Ensinnäkin pH-arvojen hengitys. Hapan liuoksen pH on alle 7, emäksisen liuoksen pH on suurempi kuin 7 ja jos laskeutuu 7: een, se on neutraali ratkaisu.

Käytämme siis seuraavia arvoja ja määritteitä:

low = "7" , korkea = "7", max = "14", ja min ottaa oletusarvon nolla.

Ennen kuin lisäämme loput määritteet koodin täydentämiseksi, päätämme värit: hapan (punainen), Neutraali (valkoinen) ja Emäksinen (sininen). Katsotaanpa myös happaman alueen (vasemmanpuoleinen alue alle 7) "optimaalisena"

Tässä ovat CSS-pseudoelementit, jotka haluamme saada halutun visuaalisen sisällön firefox. (Webkit-mittarin pseudoelementtejä ja muita tietoja on kohdassa "viittaus".)

 .ph_meter tausta: lightgrey; leveys: 300px;  .ph_meter: -moz-meter-optimum :: - moz-meter-bar tausta: indianred;  .ph_meter: -moz-meter-sub-optimum :: - moz-meter-bar tausta: antiquewhite;  .ph_meter: -moz-meter-sub-sub-optimum :: - moz-meter-bar tausta: teräsblue;

Tässä on täydellinen html-koodi ja pH-mittarin lopullinen tulos.

Viitteet

HTML5-mittarin W3C-spec
Luettelo webkit-pseudoelementeistä ja luokista
Luettelo myyjäkohtaisista pseudoelementeistä

Lisää Hongkiatista: Edistymispalkin luominen ja muotoilu HTML5: llä