Uporaba in oblikovanje HTML5 merilnika [Vodnik]

Če ste seznanjeni z vrstico napredka HTML, ki kaže, koliko dejavnosti je bilo opravljenih, boste ugotovili, da je element merilnika podoben temu - oboje prikaže trenutno vrednost iz največje vrednosti. Za razliko od vrstice napredka pa se merilnik ne sme uporabljati za prikaz napredka.

Uporablja se za prikaz a statična vrednost v določenem območju, na primer, lahko označite prostor za shranjevanje, uporabljen v diskovnem pomnilniku, tako da pokažete, koliko prostora je shranjen in koliko ni.

Poleg tega se lahko merilni element uporablja tudi za vizualizacijo do treh regij v svojem območju. Če znova uporabite primer prostora za shranjevanje, namesto da prikažete samo, koliko prostora je zasedeno, lahko tudi vizualno označite, ali je zaseden prostor le redko napolnjen (recimo pod 30%) ali skoraj pol poln (od 30 do 60%) ali več kot polna (nad 60%) z različnimi barvami. To uporabnikom pomaga vedeti, kdaj dosežejo omejitev pomnilnika.

V tej objavi vam bomo pokazali kako oblikovati merilnik za omenjene namene, tj preprost profil (brez označenih regij) in dva primera merilnikov s tremi barvno označenimi regijami. Za slednje bomo delali naprej ustvarjanje merilnega znaka za prikaz slabih, povprečnih in dobrih ocen in merilnik pH za prikaz kislih, živčnih in alkalnih pH vrednosti.

Lastnosti

Preden začnemo s primeri in gremo poglobljeno, si lahko hitro ogledamo njegov seznam spodaj navedenih atributov, več o teh atributih, kot so privzete nastavitve itd., Bodo zajeti v primerih..

• vrednost - Vrednost meter element
• min - Najmanjša vrednost obsega merilnika
• maks - Največja vrednost obsega merilnika
• nizko - Označuje nizko mejno vrednost
• visoko - Označuje visoko mejno vrednost
• optimalno - Optimalna točka v območju

1. Styling A Simple Gauge

Tu je zelo preprost primer, ki uporablja samo en atribut vrednost. Preden nadaljujemo, moramo najprej vedeti tri stvari:

(1) Privzeto je min in maks vrednost, ki opredeljuje obseg. \ t meter, 0 in 1. (2) Če je uporabnik podal vrednost ne spada v. \ t meter razponu, bo prevzel vrednost obeh min ali maks, kar je najbližje. (3) Oznaka Ending je obvezna.

Tu je sintaksa:

 0,5 

Lahko pa tudi dodamo min in maks atributi, ki zagotavljajo tako določeno uporabniško območje:

2. Styling "Marks" Gauge

Najprej moramo razdeliti območje na tri regije (levo / nizko, srednja, desna / visoka). To je bilo nizko in visoko atributi. Tako so tri regije razdeljene.

Tri regije se oblikujejo med min & nizko , nizko & visoko in visoko & maks.

Zdaj je očitno, da obstajajo določeni pogoji nizko in visoko Za tri regije je treba oblikovati naslednje vrednote: \ t

• nizko ne sme biti manjša od. \ t min in večji od visoko & maks
• visoko ne more biti večja od maks in manj kot. \ t nizko & min.
• In ko je kriterij prekršen nizko in visoko prevzela vrednost druge spremenljivke v merilih, ki niso izpolnjena, tj nizko vrednost je nižja od min kar ne bi smelo biti, nizko bo dobil min vrednost.

V tem primeru bomo obravnavali tri regije od leve proti desni, da bomo:

• Slabo: (0-33)
• Povprečje: (34-60)
• Dobro: (61-100)

Zato so naslednje vrednosti za atribute; min = "0" nizko = "34" visoko = "60" max = "100".

Tukaj je slika, ki vizualizira regije.

Čeprav so v merilniku tri regije, ki smo jih ustvarili prav zdaj, bodo v tem trenutku prikazane samo dve vrsti regij v samo dveh barvah. Zakaj? Ker optimalno je sredi regije.

Optimalna točka

V kateri koli regiji (od treh) optimalno točka pade v, se šteje kot "optimalna regija", ki je privzeto obarvana zeleno. Območje (-e), ki se nahaja tik ob njem, se imenuje "podoptimalno območje" in je oranžno obarvano. Najbolj oddaljena je "ne-optimalna regija", obarvana rdeče.

Zaenkrat v našem primeru nismo določili vrednosti za optimalno. Privzeta vrednost je torej 50, zaradi česar je srednja regija "optimalna regija", tista poleg nje (tako na levi kot na desni) kot "podoptimalne regije"..

Na kratko, v zgornjem primeru vsaka vrednost za. \ T meter element, ki pade v srednjo regijo, je označen z zeleno; ostalo oranžno.

To ne želimo. Želimo ga obarvati na ta način: Slabo (rdeča), Povprečje (oranžna), Dobro (zelena)

Glede na to, da je desna regija naša optimalna regija, jo bomo dali optimalno vrednost, ki bo spadala v desno regijo (vsaka vrednost med 61-100, vključno s 61 in 100).

Za ta primer vzamemo 90. Zaradi tega bo desna regija "optimalna", srednja (njena naslednja regija) "suboptimalna" in daleč levo "ne-optimalno" območje.

To bomo dobili na naši merilni napravi.

2. Styling "pH" Gauge

Prvič, odzračevanje na pH vrednosti. Kisla raztopina ima pH manj kot 7, alkalna raztopina ima pH večji od 7, če pa pristane na 7, je to nevtralna raztopina..

Zato bomo uporabili naslednje vrednosti in atribute:

low = "7" , high = "7", max = "14", in min bo privzeta vrednost nič.

Preden dodamo ostale atribute za dokončanje kode, se odločimo za barve: Kisla (rdeča), Nevtralno (bela) in Alkalne (modra). Upoštevajmo tudi kislo regijo (levo območje pod 7) kot "optimalno".

Tu so CSS psevdo elementi, ki jih bomo ciljali, da dobimo želeno vizualno firefox. (Za psevdo elemente merilnika webkit in več glejte povezave, ki so navedene pod »reference«.)

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

Tukaj je celotna html koda in končni rezultat pH merilnika.

Reference

• Specifikacija HTML5 merilnika W3C
• Seznam psevdo elementov in razredov
• Seznam psevdoelementov, specifičnih za prodajalca

Več o storitvi Hongkiat: Ustvarjanje in oblikovanje sloga napredka z HTML5