Korištenje i oblikovanje HTML5 mjerača [Vodič]

Ako ste upoznati s HTML trakom napretka, koja pokazuje koliko je aktivnosti provedeno, otkrit ćete da je element mjerača sličan onom - oboje prikazati trenutnu vrijednost od maksimalne vrijednosti. No, za razliku od trake napretka, mjerač se ne smije koristiti za prikaz napretka.

Koristi se za prikazivanje a statička vrijednost u određenom rasponu, na primjer, možete naznačiti prostor za pohranu koji se koristi u diskovnom spremištu pokazujući koliko je prostora za pohranu popunjeno i koliko nije.

Povrh toga, element metra se također može koristiti za vizualizaciju do tri područja unutar svog dometa. Ponovno upotrebljavajući primjer prostora za pohranu, umjesto da prikazuje samo koliko je prostora zauzeto, možete vizualno naznačiti je li zauzeti prostor samo rijetko popunjen (recimo ispod 30%) ili blizu polovine (između 30 i 60%) ili više od pola puna (iznad 60%) koristeći različite boje. To pomaže korisnicima da znaju kada dosegnu ograničenje pohrane.

U ovom postu ćemo vam pokazati kako oblikovati mjernu traku za obje spomenute svrhe, tj. a jednostavan mjerač (bez naznačenih područja) i dva primjera mjerača s 3 područja označena bojom. Za potonje ćemo raditi stvarajući mjerilo "oznake" za pokazivanje loših, prosječnih i dobrih ocjena, i mjerač pH vrijednosti za pokazivanje kiselih, živčanih i alkalnih pH vrijednosti.

Značajke

Prije no što počnemo s primjerima i idemo u dubinu, neka brzo pogledamo njegov popis atributa u nastavku, više o tim atributima kao što su zadane postavke itd. Bit će obuhvaćeni u primjerima.

• vrijednost - Vrijednost metar element
• min - Minimalna vrijednost raspona mjerača
• maksimum - Maksimalna vrijednost raspona mjerača
• nizak - Označava nisku graničnu vrijednost
• visok - Označava visoku graničnu vrijednost
• optimalno - Optimalna točka u rasponu

1. Styling Simple Gauge

Evo vrlo jednostavnog primjera koji koristi samo jedan atribut vrijednost. Prije nego što nastavimo, prvo moramo znati tri stvari:

(1) Postoji zadana postavka min i maksimum vrijednost koja definira raspon metar, što je 0 i 1 respektivno. (2) Ako korisnik odredi vrijednost ne spada u metar rasponu, on će uzeti vrijednost oba min ili maksimum, što god je najbliže. (3) Završna oznaka je obavezna.

Ovdje je sintaksa:

 0.5 

Alternativno, možemo dodati min i maksimum atributi koji pružaju korisnički definirani raspon na takav način:

2. Styling "Marks" vodomjera

Prvo, moramo podijeliti raspon na tri regije (lijevo / nisko, srednje, desno / visoko). To je bilo nizak i visok atributi dolaze u igru. Tako su tri regije podijeljene.

Između njih formiraju se tri regije min & nizak , nizak & visok i visok & maksimum.

Sada je očito da postoje određeni uvjeti nizak i visok treba slijediti vrijednosti za tri regije koje će se formirati:

• nizak ne može biti manje od min i veći od visok & maksimum
• visok ne može biti veća od maksimum i manje od nizak & min.
• I kada se prekrši kriterij nizak i visok će uzeti vrijednost druge varijable u kriterijima koji nisu zadovoljeni, tj. ako nizak vrijednost je niža od min što ne bi trebalo biti, nizak će dobiti min vrijednost.

U ovom primjeru razmotrit ćemo naša tri područja s lijeva na desno kako bismo bili:

• siromašan: (0-33)
• prosječan: (34-60)
• Dobro: (61-100)

Stoga su sljedeće vrijednosti za atribute; min = "0" nisko = "34" visoko = "60" max = "100".

Ovdje je slika koja vizualizira regije.

Iako postoje tri regije u mjerilu koje smo stvorili upravo sada, to će ukazivati ​​samo na dvije vrste "regija" u samo dvije boje u ovom trenutku. Zašto? Jer optimalno nalazi se u srednjoj regiji.

Optimalna točka

U bilo kojoj regiji (od tri) optimalno točka pada, smatra se "optimalnom regijom" koja je prema zadanim postavkama obojena zelenom bojom. Područje (e) koje se nalazi odmah pored njega nazivaju se "podoptimalnom regijom" i obojene su narančasto. Onaj najudaljeniji je "ne baš optimalna regija", obojena crveno.

Do sada u našem primjeru nismo dodijelili vrijednost optimalno. Prema tome, zadana vrijednost postaje 50, što srednju regiju čini "optimalnom regijom", a ona koja se nalazi pokraj nje (lijevo i desno) kao "podoptimalna područja".

Ukratko u gore navedenom slučaju, svaka vrijednost za metar element koji pada u srednju regiju označen je zelenom bojom; ostalo je narančasto.

To nije ono što želimo. Želimo ga obojiti na ovaj način: siromašan (Crvena), prosječan (Narančasto), Dobro (Zeleno)

Budući da se pravo područje smatra našim optimalnim područjem, dat ćemo ga optimalno vrijednost koja će pasti u desnu regiju (bilo koja vrijednost između 61-100, uključujući 61 i 100).

Uzmemo 90 za ovaj primjer. To će učiniti "optimalnu" desnu regiju, srednju (najbližu sljedeću regiju) "ne-optimalnu", a krajnje lijevo područje "ne baš optimalno".

To je ono što ćemo dobiti na našem kolosijeku.

2. Styling "pH" vodomjera

Prvo, odušak na pH vrijednosti. Kisela otopina ima pH manji od 7, alkalna otopina ima pH veći od 7 i ako sletite na 7, to je neutralno rješenje..

Stoga ćemo koristiti sljedeće vrijednosti i atribute:

niska = "7" , visoka = "7", max = "14", i min će uzeti zadanu vrijednost nula.

Prije nego što dodamo ostale atribute za dovršavanje koda, odlučimo se za boje: kiseli (Crvena), neutralan (bijelo) i alkalna (Plavo). Uzmimo također i kiselu regiju (lijevo područje ispod 7) kao "optimalnu"

Ovdje su CSS pseudo elementi koje ćemo ciljati da bi dobili željenu vizualnu sliku krijesnica. (Za pseudo elemente mjerača webkit-a i više, pogledajte veze navedene pod "referenca".)

 .ph_meter pozadina: svjetlosna; širina: 300px;  .ph_meter: -moz-meter-optimum :: - moz-meter-bar pozadina: indianred;  .ph_meter: -moz-meter-sub-optimum :: - moz-meter-bar pozadina: antiquewhite;  .ph_meter: -moz-meter-sub-sub-optimum :: - moz-meter-bar pozadina: steelblue;  

Ovdje je cjeloviti html kod i konačni rezultat pH mjerača.

Reference

• Specifikacija HTML5 mjerača W3C
• Popis pseudo elemenata i klasa webkita
• Popis pseudo elemenata dobavljača

Više o Hongkiatu: Stvaranje i stiliziranje trake napretka s HTML5