HTML5-meetri kasutamine ja kujundamine [Guide]

Kui tunnete HTML-i edenemisriba, mis näitab, kui suur osa tegevusest on sooritatud, leiad, et arvesti element on sarnane - mõlemad näitama praeguse väärtuse maksimaalsest väärtusest. Kuid erinevalt edenemisriba ei kasutata meetri riba edusammude näitamiseks.

Seda kasutatakse a staatiline väärtus teatud vahemikus, näiteks saate näidata kettaruumi salvestusruumi, näidates, kui palju mäluruumi on täidetud ja kui palju ei ole.

Lisaks sellele saab mõõteseadet kasutada ka kuni kolme regiooni visualiseerimiseks selle vahemikus. Salvestusruumi näite taaskasutamine selle asemel, et näidata ainult, kui palju ruumi on hõivatud, saate ka visuaalselt näidata, kas hõivatud ruum on ainult hõredalt täidetud (ütleb alla 30%) või peaaegu pooltäis (30–60%) või rohkem pooled (üle 60%), kasutades erinevaid värve. See aitab kasutajatel teada, millal nad on salvestuspiirini jõudnud.

Selles postituses näitame teile kuidas kujundada mõõdikuriba mõlemal nimetatud eesmärgil, st a lihtne mõõtur (ilma näidatud piirkondadeta) ja kaks näidet 3 värviga tähistatud piirkonnaga. Viimase jaoks töötame edasi "märkide" gabariidi loomine halbade, keskmiste ja heade märkide näitamiseks ning "pH" mõõtur happelised, närvilised ja leeliselised pH väärtused.

Atribuudid

Enne kui me alustame näidetega ja läheme põhjalikult, vaatame kiiresti oma allpool olevate atribuutide nimekirja, rohkem nendest atribuutidest nagu nende vaikeväärtused jne..

• väärtus - Väärtuse meeter element
• min - Arvesti vahemiku minimaalne väärtus
• max - Arvesti vahemiku maksimaalne väärtus
• madal - Näitab väikest piirväärtust
• kõrge - Näitab suurt piirväärtust
• optimaalne - Optimaalne punkt vahemikus

1. Lihtsa mõõturi kujundamine

Siin on väga lihtne näide, mis kasutab ainult ühte atribuuti väärtus. Enne kui me jätkame, peame kõigepealt teada kolm asja:

(1) Vaikimisi on min ja max väärtus, mis määratleb vahemikku meeter, mis on vastavalt 0 ja 1. (2) Kui kasutaja on määratud väärtus ei kuulu meeter vahemikus, võtab see kas väärtuse min või max, kumb see on kõige lähemal. (3) Lõppmärgis on kohustuslik.

Siin on süntaks:

 0,5 

Teise võimalusena saame lisada ka min ja max atribuudid, andes seega kasutajale defineeritud vahemiku, näiteks:

2. "Marks" gabariidi kujundamine

Esiteks peame jagama vahemiku kolme piirkonda (vasak / madal, keskmine, parem / kõrge). See on olnud madal ja kõrge atribuudid mängivad. Nii jagunevad need kolm piirkonda.

Need kolm piirkonda on moodustatud min & madal , madal & kõrge ja kõrge & max.

Nüüd on ilmne, et on olemas teatud tingimused madal ja kõrge väärtused peaksid järgnema kolme moodustatava piirkonna jaoks:

• madal ei tohi olla väiksem kui min ja suurem kui kõrge & max
• kõrge ei tohi olla suurem kui max ja vähem kui madal & min.
• Ja kui kriteeriumid on katki mõlemad madal ja kõrge võtab teise muutuja väärtuse kriteeriumides, mis ei ole täidetud, st madal väärtus on väiksem kui min mida see ei tohiks olla, madal saab min väärtus.

Selles näites käsitleme meie kolme piirkonda vasakult paremale, et olla:

• Vaene: (0-33)
• Keskmine: (34-60)
• Hea: (61-100)

Seega on atribuutide väärtused järgmised; min = "0" madal = "34" kõrge = "60" max = "100".

Siin on piirkond, mis kujutab piirkondi.

Ehkki just praegu loodud mõõturil on kolm piirkonda, näitab see ainult kahte liiki piirkondi ainult kahes värvitoonis. Miks? Sest optimaalne on keskel.

Optimaalne punkt

Mis tahes piirkonnas (kolmest) optimaalne punkt langeb, seda peetakse vaikimisi roheliseks värvitud "optimaalseks piirkonnaks". Seda vahetult ümbritsevat piirkonda nimetatakse "optimaalseks piirkonnaks" ja see on oranž. Kõige kaugemal asuv on „mitte-optimaalne piirkond”, mis on punane.

Siiani ei ole meie näites väärtust määratud optimaalne. Seega muutub vaikeväärtus 50-ks, muutes keskpiirkonna "optimaalseks piirkonnaks" ja need, mis on selle kõrval (nii vasakul kui paremal) kui "optimaalsed piirkonnad".

Ülaltoodud juhul lühidalt - mis tahes väärtus meeter keskmisesse piirkonda langev element on rohelise tähisega; ülejäänud oranž.

See pole see, mida me tahame. Me tahame, et see värvuks nii: Vaene (punane), Keskmine (oranž), Hea (roheline)

Kuna õige piirkond on meie optimaalne piirkond, anname optimaalne väärtus, mis langeb õigesse piirkonda (mis tahes väärtus vahemikus 61-100, sealhulgas 61 & 100).

Võtame selle näite jaoks 90. See muudab õige piirkonna "optimaalseks", keskseks (vahetuks järgmiseks piirkonnaks) "optimaalseks" ja kaugelt vasakpoolseks "mitte-optimaalseks" piirkonnaks.

Seda me saame meie gabariidilt.

2. Stiilimine "pH" mõõtur

Esiteks, pH väärtuste hingamine. Happelise lahuse pH on alla 7, leeliselise lahuse pH on suurem kui 7 ja kui maandute 7-le, on see neutraalne lahus..

Seega kasutame järgmisi väärtusi ja atribuute:

madal = "7" , kõrge = "7", max = "14", ja min võtab vaikeväärtuse nulliks.

Enne koodi lisamiseks vajalike atribuutide lisamist otsustame, kas värvid on järgmised: Happeline (punane), Neutraalne (valge) ja Leeliseline (sinine). Pidagem ka happelist piirkonda (vasakpoolne piirkond alla 7) kui "optimaalset"

Siin on CSS pseudoelemendid, mida soovime saada soovitud visuaalseks firefox. (Veebikomplekti meetri pseudoelementide ja muu kohta vaadake "viide" all loetletud linke.)

 .ph_meter background: lightgrey; laius: 300 px;  .ph_meter: -moz-meter-optimum :: - moz-meter-bar taust: indianred;  .ph_meter: -moz-meter-sub-optimum :: - moz-meter-bar taust: antiquewit;  .ph_meter: -moz-meter-sub-sub-optimum :: - moz-meter-bar taust: teraskivi;  

Siin on täielik html-kood ja pH-meetodi lõpptulemus.

Viited

• HTML5 Meter W3C spec
• Veebikomplekti pseudoelementide ja klasside loend
• Müüja spetsiifiliste pseudoelementide loend

Lisateave Hongkiat kohta: progressi riba loomine ja kujundamine HTML5-ga