Bruke og stilere HTML5 Meter [Guide]

Hvis du er kjent med HTML-fremdriftslinjen, som viser hvor mye av en aktivitet som er utført, vil du oppdage at måleelementet ligner det - både vis en nåværende verdi ut av en maksimumsverdi. Men i motsetning til fremdriftslinjen, må målerlinjen ikke brukes til å vise fremdrift.

Det er vant til å vise en statisk verdi i et bestemt område, for eksempel kan du angi lagringsplassen som brukes i en diskplass, ved å vise hvor mye lagringsplass er fylt og hvor mye det ikke er.

Dessuten kan målerelementet også brukes til å visualisere opptil tre regioner innenfor sitt område. Gjenbruk av lagringsplasseksemplet, i stedet for bare å vise hvor mye plass er opptatt, kan du også visuelt angi om det okkuperte rommet bare er tynt fylt (vi kan si under 30%) eller nær halvfullt (mellom 30 og 60%) eller mer enn halvfullt (over 60%) ved hjelp av forskjellige farger. Dette hjelper brukerne til å vite når de når lagringsgrensen.

I dette innlegget vil vi vise deg hvordan man stiler målerlinjen for begge formål nevnt, dvs. enkel måler (med ingen angitte områder) og to eksempler på målere med 3 fargedifiserte områder. For det sistnevnte vil vi jobbe med skape en "markør" -måler for å vise dårlige, gjennomsnittlige og gode karakterer, og en "pH" -måler for å vise sure, nevrale og alkaliske pH-verdier.

Egenskaper

Før vi begynner med eksemplene og gå grundig, la oss ta en rask titt på listen over attributter nedenfor, mer om disse attributene som standardene deres, etc. vil bli dekket i eksemplene.

verdi - Verdien av måler element
min - Minsteverdien av måleområdet
max - Maksimal verdi av måleområdet
lav - Indikerer lav grenseverdi
høy - Angir høy grenseverdien
optimal - Det optimale punktet i området

1. Styling A Simple Gauge

Her er et veldig enkelt eksempel ved å bruke bare ett attributt, verdi. Før vi går videre må vi først vite tre ting:

(1) Det er en standard min og max verdi som definerer rekkevidden av måler, som er henholdsvis 0 og 1. (2) Hvis den brukerdefinerte verdi faller ikke innenfor måler rekkevidde, det vil ta verdien av heller min eller max, uansett hvilken det er nærmest. (3) Ending-taggen er obligatorisk.

Her er syntaksen:

0.5

Alternativt kan vi også legge til min og max attributter gir dermed et brukerdefinert område som slik:

2. Styling "Marks" Gauge

Først må vi dele rekkevidden i tre regioner (venstre / lav, mellom, høyre / høy). Dette er varene lav og høy attributter kommer inn i spill. Slik er de tre regionene delt.

De tre regionene dannes mellom min & lav , lav & høy og høy & max.

Nå er det åpenbart at det er visse forhold lav og høy Verdiene bør følge for de tre områdene som skal dannes:

lav kan ikke være mindre enn min og større enn høy & max
høy kan ikke være større enn max og mindre enn lav & min.
Og når et kriterium er brutt begge deler lav og høy vil ta på verdien av den andre variabelen i kriteriene som ikke er oppfylt, dvs. hvis lav verdien er funnet lavere enn min som det ikke burde være, lav vil få min verdi.

I dette eksemplet vil vi vurdere våre tre regioner fra venstre til høyre for å være:

Fattige: (0-33)
Gjennomsnitt: (34-60)
Flink: (61-100)

Følgelig er følgende verdier for attributter; min = "0" low = "34" high = "60" max = "100".

Her er et bilde som visualiserer regionene.

Selv om det er tre regioner i måleren vi opprettet akkurat nå, vil det bare indikere to "slags" regioner i kun to farger for øyeblikket. Hvorfor? Fordi optimal er midt i regionen.

Optimal punkt

I hvilken region (av de tre) optimal punktet faller inn, det regnes som en "optimal region" farget grønt som standard. Området (r) umiddelbart ved siden av det kalles "suboptimal region", og den er farget oransje. Den lengst unna er en "ikke-mye-av-en-optimal region", farget rødt.

Så langt i vårt eksempel har vi ikke tildelt en verdi for optimal. Derfor blir standardverdien 50, noe som gjør midtområdet til den "optimale regionen" og de som ligger rett ved siden av den (både til venstre og høyre) som "suboptimale regioner".

Kort sagt i ovennevnte tilfelle, enhver verdi til måler element som faller inn i midtområdet er indikert med grønt; resten oransje.

Det er ikke det vi ønsker. Vi vil ha den farget på denne måten: Fattige (rød), Gjennomsnitt (oransje), Flink (grønn)

Siden høyre-regionen skal betraktes som vår optimale region, vil vi gi optimal en verdi som vil falle inn i høyre-regionen (enhver verdi mellom 61-100, inkludert 61 og 100).

Vi tar 90 for dette eksemplet. Dette vil gjøre høyre-regionen "optimal", midten (den nærmeste neste regionen) "suboptimal" og langt til venstre "ikke-mye-av-optimal" -regionen.

Dette er hva vi får på vår måler.

2. Styling "pH" -måleren

Først en puste på pH-verdier. En sur løsning har en pH på mindre enn 7, en alkalisk løsning har en pH på over 7 og hvis du lander på 7, er det en nøytral løsning.

Dermed vil vi bruke følgende verdier og attributter:

lav = "7" , høy = "7", max = "14", og min vil ta standardverdien av null.

Før vi legger til resten av attributter for å fullføre koden, la oss bestemme oss for farger: surt (rød), Nøytral (hvit) og Alkaline (blå). La oss også vurdere den sure regionen (venstreområde under 7) som "optimal"

Her er CSS pseudo-elementene vi vil målrette for å få den ønskede visuelle inn firefox. (For webkit meter pseudo elementer og mer, se linkene som er oppført under "referanse".)

 .ph_meter bakgrunn: lightgrey; bredde: 300px;  .ph_meter: -moz-meter-optimal :: - moz-meter-bar bakgrunn: indianred;  .ph_meter: -moz-meter-suboptimal :: - moz-meter-bar bakgrunn: antiquewhite;  .ph_meter: -moz-meter-sub-suboptimal :: - moz-meter-bar bakgrunn: steelblue;

Her er den komplette HTML-koden og det endelige resultatet av pH-måleren.

referanser

HTML5 Meter W3C spec
Liste over webkit pseudoelementer og klasser
Liste over leverandørspesifikke pseudoelementer

Mer om Hongkiat: Opprett og Styling Progress Bar med HTML5