Utilizarea și stylingul HTML5 Meter [Ghid]

Dacă sunteți familiarizat cu bara de progres HTML, care arată cât de mult o activitate a fost efectuată, veți găsi că elementul contorului este similar cu cel - ambele arată o valoare curentă dintr-o valoare maximă. Dar, spre deosebire de bara de progres, bara de măsurare nu trebuie utilizată pentru a arăta progresul.

Este folosit pentru a arăta a valoare statică într-un anumit interval, de exemplu, puteți indica spațiul de stocare utilizat într-un spațiu de stocare pe disc, afișând cât spațiu de stocare este umplut și cât de mult nu este.

În plus, elementul contorului poate fi de asemenea utilizat pentru a vizualiza până la trei regiuni din intervalul său. Reutilizând exemplul de spațiu de stocare, în loc să arătați doar spațiul ocupat, puteți indica, de asemenea, vizual dacă spațiul ocupat este slab umplut (să zicem mai jos de 30%) sau aproape de jumătate plin (între 30 și 60%) sau mai mult pe jumătate plin (peste 60%) folosind diferite culori. Aceasta ajută utilizatorii să știe când ating limita de stocare.

În acest post, vă vom arăta cum să stilul bara de metru pentru ambele scopuri menționate, adică a gabaritul simplu (fără regiuni indicate) și două exemple de măsurători cu 3 regiuni indicate. Pentru acesta din urmă vom lucra crearea unui ecartament "mărci" pentru afișarea unor semne slabe, medii și bune; un indicator "pH" pentru a arăta valorile pH-ului acid, neural și alcalin.

atribute

Înainte de a începe cu exemplele și de a aprofunda în detaliu, să examinăm rapid lista de atribute de mai jos, mai multe despre aceste atribute, cum ar fi implicit, etc. vor fi acoperite în exemple.

• valoare - Valoarea lui metru element
• min - Valoarea minimă a domeniului contorului
• max - Valoarea maximă a domeniului contorului
• scăzut - Indică valoarea limită inferioară
• înalt - Indică valoarea limită superioară
• optim - Punctul optim din domeniu

1. Styling Un indicator simplu

Iată un exemplu foarte simplu folosind un singur atribut, valoare. Înainte de a continua, trebuie să știm mai întâi trei lucruri:

(1) Există o valoare implicită min și max valoare definind intervalul de metru, care este 0 și, respectiv, 1. (2) Dacă este specificat de utilizator valoare nu se încadrează în metru , va lua valoarea fiecăruia min sau max, indiferent de care este cel mai apropiat. (3) Eticheta Terminare este obligatorie.

Iată sintaxa:

 0.5 

Alternativ, putem adăuga și noi min și max atribute, oferind astfel o gamă definită de utilizator, cum ar fi:

2. Styling Gauge "Marks"

În primul rând, trebuie să împărțim intervalul în trei regiuni (stânga / jos, mijloc, dreapta / înalt). Asta a fost scăzut și înalt atributele intră în joc. Acesta este modul în care cele trei regiuni sunt împărțite.

Cele trei regiuni se formează între min & scăzut , scăzut & înalt și înalt & max.

Acum este evident că există anumite condiții scăzut și înalt ar trebui să urmeze valori pentru formarea celor trei regiuni:

• scăzut nu poate fi mai mică decât min și mai mare decât înalt & max
• înalt nu poate fi mai mare decât max și mai puțin decât scăzut & min.
• Și atunci când un criteriu este rupt atât scăzut și înalt va lua valoarea celeilalte variabile în criteriile care nu sunt îndeplinite, adică dacă scăzut valoarea este mai mică decât min care nu ar trebui să fie, scăzut va primi min valoare.

În acest exemplu, vom considera că cele trei regiuni de la stânga la dreapta sunt:

• slab: (0-33)
• In medie: (34-60)
• Bun: (61-100)

Prin urmare, următoarele sunt valori pentru atribute; min = "0" scăzut = "34" mare = "60" max = "100".

Iată o imagine care vizualizează regiunile.

Chiar dacă există trei regiuni în contorul pe care l-am creat tocmai acum, vom indica doar două "tipuri" de regiuni în numai două culori în acest moment. De ce? pentru că optim este în regiunea mijlocie.

Punctul optim

În oricare regiune (din cele trei) optim punctul se încadrează, este considerat ca o "regiune optimă" colorată verde în mod implicit. Regiunea (regiunile) imediat alături de aceasta se numește "regiune sub-optimă" și este colorată în portocaliu. Cel mai îndepărtat este o regiune "nu prea optimă", colorată roșu.

Până acum, în exemplul nostru nu am atribuit o valoare pentru optim. Prin urmare, valoarea implicită devine 50, ceea ce face ca regiunea mijlocie să fie "regiunea optimă" și cele de lângă ea (atât din stânga cât și din dreapta) ca "regiuni sub-optime".

Pe scurt, în cazul de mai sus, orice valoare pentru metru element care intră în regiunea mijlocie este indicat de verde; restul portocaliu.

Nu asta vrem. Vrem să fie colorat în felul următor: slab (roșu), In medie (portocale), Bun (verde)

Din moment ce regiunea din dreapta trebuie considerată regiunea noastră optimă, vom da optim o valoare care va cădea în regiunea dreaptă (orice valoare între 61-100, inclusiv 61 și 100).

Luăm 90 pentru acest exemplu. Acest lucru va face ca regiunea din dreapta să fie "optimă", jumătatea (următoarea regiune imediată) "sub-optimă" și zona din stânga a regiunii "nu prea mult optimă".

Aceasta este ceea ce vom obține pe ecartamentul nostru.

2. Styling Gauge "pH"

Mai întâi, o respirație pentru valorile pH-ului. O soluție acidă are un pH mai mic de 7, o soluție alcalină are un pH mai mare de 7 și dacă aterizați pe 7, este o soluție neutră.

Astfel, vom folosi următoarele valori și atribute:

low = "7" , mare = "7", max = "14", si min va lua valoarea implicită de zero.

Înainte de a adăuga restul atributelor pentru a finaliza codul, permiteți-ne să decidem asupra culorilor: acidic (roșu), Neutru (alb) și Alcalin (albastru). Să considerăm, de asemenea, că regiunea acidă (regiunea stângă sub 7) este "optimă"

Iată pseudo-elementele CSS pe care le vom viza pentru a obține imaginea dorită în firefox. (Pentru pseudoelementele de metrou webkit și altele, consultați linkurile enumerate la "referință".)

 .ph_meter fundal: lightgrey; lățime: 300px;  .ph_meter: -moz-metru-optim:: - moz-metru-bar background: indianred;  .ph_meter: -moz-metru-sub-optimum :: - moz-metru-bar fundal: antiquewhite;  .ph_meter: -moz-metru-sub-sub-optimum :: - moz-metru-bar fundal: oțel albastru;  

Aici este codul HTML complet și rezultatul final al indicatorului pH.

Referințe

• Modul HTML5 Meter W3C spec
• Lista de pseudo elemente și clase webkit
• Lista de pseudo elemente specifice furnizorului

Mai multe despre Hongkiat: Crearea și stilul de avansare cu HTML5