Använda och utforma HTML5 Meter [Guide]

Om du är bekant med HTML-statusfältet, som visar hur mycket av en aktivitet som har utförts, kommer du att finna att mätelementet liknar det - båda visa ett nuvärde av ett maximalt värde. Men till skillnad från framdriftsfältet ska mätarstången inte användas för att visa framsteg.

Det är vanligt att visa en statiskt värde i ett visst intervall, till exempel kan du ange det lagringsutrymme som används i en disklagring genom att visa hur mycket lagringsutrymme är fyllt och hur mycket det inte är.

Dessutom kan mätelementet också användas för att visualisera upp till tre regioner inom sitt område. Återanvända lagringsutrymmeexemplet, istället för att bara visa hur mycket utrymme som upptas, kan du också visuellt indikera om det ockuperade utrymmet endast är litet fyllt (låter säga under 30%) eller nästan halvfullt (mellan 30 och 60%) eller mer än halv full (över 60%) med olika färger. Detta hjälper användarna att veta när de når lagringsgränsen.

I det här inlägget visar vi dig hur man stilar mätarens bar för båda nämnda ändamål, dvs a enkel mätare (utan angivna områden) och två exempel på mätare med 3 färgindikerade områden. För det senare kommer vi att arbeta vidare skapa en "marks" mätare för att visa dåliga, genomsnittliga och bra betyg, och en "pH" -mätare för att visa sura, neurala och alkaliska pH-värden.

attribut

Innan vi börjar med exemplen och gå djupt, låt oss ta en snabb titt på dess lista över attribut nedan, mer om dessa attribut som deras standardvärden etc. kommer att omfattas av exemplen.

värde - Värdet av meter element
min - Minsta värdet av mätarens intervall
max - Det maximala värdet av mätarens intervall
låg - Indikerar det låga gränsvärdet
hög - Indikerar det höga gränsvärdet
optimalt - Den optimala punkten i intervallet

1. Styling A Simple Gauge

Här är ett mycket enkelt exempel med endast ett attribut, värde. Innan vi fortsätter måste vi först veta tre saker först:

(1) Det finns en standard min och max värde som definierar intervallet av meter, vilket är 0 respektive 1. (2) Om den användardefinierade värde faller inte inom meter intervallet, det kommer att ta värdet av antingen min eller max, beroende på vilken som är närmast. (3) Ending-taggen är obligatorisk.

Här är syntaxen:

0,5

Alternativt kan vi också lägga till min och max attribut ger således ett användardefinierat intervall som så:

2. Styling "Marks" Gauge

Först måste vi dela intervallet i tre regioner (vänster / låg, mitten, höger / hög). Det här är var låg och hög attribut kommer till spel. Så här delas de tre regionerna.

De tre regionerna bildas mellan min & låg , låg & hög och hög & max.

Nu är det uppenbart att det finns vissa villkor låg och hög värden bör följas för de tre regioner som ska bildas:

låg kan inte vara mindre än min och större än hög & max
hög kan inte vara större än max och mindre än låg & min.
Och när ett kriterium bryts båda låg och hög kommer att ta på värdet av den andra variabeln i de kriterier som inte är uppfyllda, dvs om låg värdet är lägre än min vilket det inte borde vara, låg kommer att få min värde.

I det här exemplet kommer vi att överväga våra tre regioner från vänster till höger för att vara:

Fattig: (0-33)
Medel: (34-60)
Bra: (61-100)

Följaktligen är följande värden för attributen; min = "0" low = "34" high = "60" max = "100".

Här är en bild som visualiserar regionerna.

Trots att det finns tre regioner i mätaren som vi skapat just nu, kommer det bara att indikera två "slag" av regioner i endast två färger för tillfället. Varför? Därför att optimalt ligger i mittenregionen.

Optimal punkt

I vilken region (av de tre) optimalt punkt faller in, det betraktas som en "optimal region" färgad grön som standard. Regionen (erna) bredvid den kallas "suboptimal region" och den är färgad orange. Den längst bort är en "inte-mycket-av-en-optimal region", rödfärgad.

Hittills i vårt exempel har vi inte tilldelat ett värde för optimalt. Därför blir standardvärdet 50, vilket gör mittområdet till "optimala regionen" och de som ligger bredvid det (både till vänster och höger) som "suboptimale regioner".

Kort sagt i ovanstående fall, vilket värde som helst till meter element som faller in i mittenregionen indikeras med grön; resten orange.

Det är inte vad vi vill ha. Vi vill ha det färgat så här: Fattig (röd), Medel (orange), Bra (grön)

Eftersom högerregionen ska betraktas som vår optimala region, kommer vi att ge optimalt ett värde som kommer att falla i högerregionen (valfritt värde mellan 61-100, inklusive 61 och 100).

Vi tar 90 för det här exemplet. Detta kommer att göra högerregionen "optimal", mitten (dess närmaste nästa region) "suboptimal" och längst till vänster den "inte-mycket-av-optimala" regionen.

Detta är vad vi kommer att få på vår mätare.

2. Styling "pH" -mätaren

Först en andning på pH-värden. En sur lösning har ett pH lägre än 7, en alkalisk lösning har ett pH större än 7 och om du landar på 7, det är en neutral lösning.

Således kommer vi att använda följande värden och attribut:

låg = "7" , hög = "7", max = "14", och den min tar standardvärdet på noll.

Innan vi lägger till resten av attributen för att slutföra koden, låt oss bestämma om färger: sura (röd), Neutral (vit) och Alkalisk (blå). Låt oss också överväga den sura regionen (vänstra regionen under 7) som "optimal"

Här är CSS-pseudoelementen vi kommer att rikta in för att få den önskade visuella in firefox. (För webbkitmätarens pseudoelement och mer, se länkarna under "referens".)

 .ph_meter bakgrund: ljusgrå; bredd: 300px;  .ph_meter: -moz-meter-optimal :: - moz-meter-bar bakgrund: indianred;  .ph_meter: -moz-meter-suboptimal :: - moz-meter-bar bakgrund: antiquewhite;  .ph_meter: -moz-meter-sub-suboptimal :: - moz-meter-bar background: steelblue;

Här är den fullständiga html-koden och det slutliga resultatet av pH-mätaren.

referenser

HTML5 Meter W3C spec
Lista över webkit pseudoelement och klasser
Lista över leverantörsspecifika pseudoelement

Mer om Hongkiat: Skapa och Styling Progress Bar med HTML5