Brug og styling HTML5 Meter [Guide]

Hvis du er bekendt med HTML-statuslinjen, som viser, hvor meget en aktivitet er blevet udført, vil du opdage, at måleelementet ligner det - begge vis en nuværende værdi ud af en maksimumsværdi. Men i modsætning til fremdriftslinjen må målerlinjen ikke bruges til at vise fremskridt.

Det er vant til at vise en statisk værdi i et bestemt interval, Du kan f.eks. angive det lagerplads, der bruges i en diskplads, ved at vise, hvor meget lagerpladsen er fyldt og hvor meget der ikke er.

Derudover kan målerelementet også bruges til at visualisere op til tre regioner inden for sit område. Genbrug af lagerpladseksemplet, i stedet for kun at vise hvor meget plads der er besat, kan du også visuelt angive, om det besatte rum kun er sparsomt fyldt (lad os sige under 30%) eller næsten halvt fyldt (mellem 30 og 60%) eller mere end halv fuld (over 60%) ved hjælp af forskellige farver. Dette hjælper brugerne ved, hvornår de når oplagringsgrænsen.

I dette indlæg vil vi vise dig hvordan man måler målerlinjen til begge formål nævnt, dvs. enkel måler (uden angivne områder) og to eksempler på målere med 3 farveindikerede områder. For sidstnævnte vil vi arbejde videre skabe en "mærker" måler for at vise dårlige, gennemsnitlige og gode karakterer, og en "pH" -måler for at vise sure, neurale og alkaliske pH-værdier.

Egenskaber

Før vi begynder med eksemplerne og går i dybden, lad os hurtigt se på listen over attributter nedenfor, mere om disse attributter som deres standardværdier mv. Vil blive dækket i eksemplerne.

værdi - Værdien af måler element
min - Mindste værdi af måleren
max - Den maksimale værdi af måleren
lav - Angiver den lave grænseværdi
høj - Angiver den høje grænseværdi
optimal - Det optimale punkt i området

1. Styling A Simple Gauge

Her er et meget simpelt eksempel ved kun at bruge en attribut, den værdi. Før vi fortsætter, skal vi først vide tre ting:

(1) Der er en standard min og max værdi definerer rækkevidden af måler, som er henholdsvis 0 og 1. (2) Hvis den brugerdefinerede værdi falder ikke inden for måler rækkevidde, det vil tage værdien af enten min eller max, alt efter hvad det er tættest på. (3) Afslutningsmærket er obligatorisk.

Her er syntaxen:

0,5

Alternativt kan vi også tilføje min og max attributter giver således en brugerdefineret rækkevidde som sådan:

2. Styling "Marks" Gauge

For det første skal vi opdele rækken i tre regioner (venstre / lav, midt, højre / høj). Dette er var lav og høj attributter kommer i spil. Sådan divideres de tre regioner.

De tre regioner er dannet mellem min & lav , lav & høj og høj & max.

Nu er det indlysende, at der er visse forhold lav og høj værdier bør følge for de tre regioner, der skal dannes:

lav kan ikke være mindre end min og større end høj & max
høj kan ikke være større end max og mindre end lav & min.
Og når et kriterium er brudt begge dele lav og høj vil påtage sig værdien af den anden variabel i de kriterier, der ikke er opfyldt, dvs. hvis lav værdien er fundet lavere end min som det ikke burde være, lav vil få min værdi.

I dette eksempel vil vi overveje vores tre regioner fra venstre til højre for at være:

Fattige: (0-33)
Gennemsnit: (34-60)
godt: (61-100)

Følgelig er følgende værdier for attributterne; min = "0" low = "34" high = "60" max = "100".

Her er et billede, der visualiserer regionerne.

Selv om der er tre regioner i den måler, vi skabte lige nu, vil den kun indikere to "slags" regioner i kun to farver i øjeblikket. Hvorfor? Fordi optimal ligger midt i regionen.

Optimum Point

I hvilken region (af de tre) optimal punkt falder ind, det betragtes som en "optimal region" farvet grøn som standard. Regionen (r) umiddelbart ved siden af det hedder den "suboptimale region", og den er farvet orange. Den længst væk er en "ikke-meget-af-en-optimal region", farvet rødt.

Hidtil i vores eksempel har vi ikke tildelt en værdi for optimal. Derfor bliver standardværdien 50, hvilket gør midtområdet til den "optimale region" og dem lige ved siden af det (både til venstre og højre) som "suboptimale regioner".

Kort sagt i ovennævnte tilfælde er enhver værdi til måler element, der falder ind i midterregionen, er angivet med grønt; resten orange.

Det er ikke det, vi vil have. Vi vil have det farvet på denne måde: Fattige (rød), Gennemsnit (orange), godt (grøn)

Da højregionen skal betragtes som vores optimale region, vil vi give optimal en værdi, der falder ind i højre-regionen (enhver værdi mellem 61-100, inklusive 61 og 100).

Vi tager 90 for dette eksempel. Dette vil gøre højre region "optimal", midten (dens nærmeste næste region) "suboptimal" og langt til venstre den "ikke-meget-af-en-optimale" region.

Det er det, vi får på vores måle.

2. Styling "pH" -måleren

For det første en puste på pH-værdier. En sur opløsning har en pH på mindre end 7, en alkalisk opløsning har en pH på mere end 7, og hvis du lander på 7, er det en neutral løsning.

Således vil vi bruge følgende værdier og attributter:

lav = "7" , høj = "7", max = "14", og min vil tage standardværdien på nul.

Før vi tilføjer resten af attributterne for at fuldføre koden, lad os beslutte os om farver: sure (rød), Neutral (hvid) og Alkaline (blå). Lad os også overveje den sure region (venstreområde under 7) som "optimal"

Her er CSS pseudoelementerne, vi vil målrette mod for at få den ønskede visuelle indstilling firefox. (For webkit meter pseudo elementer og mere henvises til linkene angivet under "reference".)

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

Her er den komplette html-kode og det endelige resultat af pH-måleren.

Referencer

HTML5 Meter W3C spec
Liste over webkit pseudo elementer og klasser
Liste over leverandørspecifikke pseudoelementer

Mere om Hongkiat: Oprettelse og Styling Progress Bar med HTML5