HTML5 mērītāja izmantošana un veidošana [Guide]

Ja esat iepazinies ar HTML progresa joslu, kas parāda, cik liela ir veikta darbība, jūs redzēsiet, ka skaitītāja elements ir līdzīgs tam - abiem rādīt pašreizējo vērtību no maksimālās vērtības. Bet atšķirībā no progresa joslas, skaitītāja josla nav jāizmanto, lai parādītu progresu.

To izmanto, lai parādītu a statiskā vērtība noteiktā diapazonā, piemēram, jūs varat norādīt diska uzglabāšanā izmantoto uzglabāšanas vietu, parādot, cik daudz atmiņas ir aizpildīta un cik daudz nav.

Turklāt skaitītāja elements var tikt izmantots arī, lai vizualizētu līdz trim reģioniem tās diapazonā. Atmiņas vietas atkārtota izmantošana, nevis tikai norādīt, cik daudz vietas ir aizņemts, jūs varat arī vizuāli norādīt, vai aizņemtā telpa ir tikai reti piepildīta (ļauj teikt zem 30%) vai gandrīz puse pilna (no 30 līdz 60%) vai vairāk pusi pilna (virs 60%), izmantojot dažādas krāsas. Tas palīdz lietotājiem uzzināt, kad tie sasniedz uzglabāšanas ierobežojumu.

Šajā ziņojumā mēs jums parādīsim kā veidot mērierīci abiem minētajiem mērķiem, t.i. vienkāršs gabarīts (bez norādītajiem reģioniem) un divi piemēri ar 3 krāsu norādītiem reģioniem. Pēdējā gadījumā mēs strādāsim radot "atzīmes" par sliktu, vidēju un labu atzīmi, un "pH" mērītājs skābju, neironu un sārmu pH vērtības.

Atribūti

Pirms sākam ar piemēriem un doties padziļināti, ieskatīsimies zemāk redzamajā atribūtu sarakstā, vairāk par šiem atribūtiem, piemēram, to noklusējuma utt..

• vērtību - Vērtība skaitītājs elementu
• min - Mēraparāta diapazona minimālā vērtība
• maks - Maksimālā skaitītāja diapazona vērtība
• zems - Norāda zemo robežvērtību
• augsts - Norāda augstu robežvērtību
• optimāls - Optimālais punkts diapazonā

1. Vienkārša mērītāja veidošana

Šeit ir ļoti vienkāršs piemērs, izmantojot tikai vienu atribūtu vērtību. Pirms mēs turpinām, mums vispirms ir jāzina trīs lietas:

(1) Ir noklusējuma iestatījums min un maks vērtība, kas nosaka diapazonu skaitītājs, kas ir attiecīgi 0 un 1. (2) Ja lietotājs ir norādījis vērtību neietilpst skaitītājs diapazonā, tas aizņems vai nu vērtību min vai maks, atkarībā no tā, kas tas ir vistuvāk. (3) Beigu atzīme ir obligāta.

Šeit ir sintakse:

 0,5 

Varat arī pievienot min un maks atribūti, tādējādi nodrošinot lietotāja definētu diapazonu, piemēram:

2. "Marķējumu" mērītājs

Pirmkārt, mums ir jāsadala diapazons trīs reģionos (pa kreisi / zema, vidēja, labā / augstākā). Tas bija zems un augsts atribūtus spēlē. Tādā veidā ir sadalīti trīs reģioni.

Trīs reģioni veidojas starp min & zems , zems & augsts un augsts & maks.

Tagad ir skaidrs, ka pastāv noteikti nosacījumi zems un augsts vērtībām jāievēro, lai izveidotu trīs reģionus:

• zems nevar būt mazāks par min un lielāks par augsts & maks
• augsts nevar būt lielāks par maks un mazāk nekā zems & min.
• Un, kad kritēriji ir sadalīti abos zems un augsts ņem vērā cita mainīgā vērtību kritērijos, kas nav izpildīti, t.i., ja zems vērtība ir zemāka par min kas tam nevajadzētu būt, zems saņems min vērtību.

Šajā piemērā mēs uzskatīsim, ka mūsu trīs reģioni ir no kreisās uz labo pusi:

• Nabadzīgs: (0-33)
• Vidējais: (34-60)
• Labi: (61-100)

Tādējādi atribūtu vērtībām ir šādas; min = "0" zems = "34" augsts = "60" max = "100".

Šeit ir attēls, kas attēlo reģionus.

Lai gan trijos skaitītājos, kurus mēs tikko izveidojām, ir trīs reģioni, šobrīd tikai divās krāsās būs redzami tikai divi reģionu veidi. Kāpēc? Tāpēc, ka optimāls atrodas vidējā reģionā.

Optimālais punkts

Jebkurā reģionā (no trim) optimāls punktā, tas tiek uzskatīts par "optimālu reģionu", kas pēc noklusējuma ir zaļš. Reģions (-i), kas atrodas tieši blakus tam, tiek saukts par "zemāko optimālo reģionu", un tas ir oranžs krāsa. Tas, kas atrodas vistālāk, ir "ne-optimāls reģions", kas ir sarkanā krāsā.

Līdz šim mūsu piemērā mums nav piešķirta vērtība optimāls. Tādējādi noklusējuma vērtība kļūst par 50, padarot vidus reģionu par "optimālo reģionu" un tās blakus (gan pa kreisi, gan pa labi) kā "nepietiekami optimālus reģionus"..

Īsumā iepriekš minētajā gadījumā jebkura vērtība skaitītājs elementu, kas iekrīt vidējā reģionā, norāda zaļš; pārējo apelsīnu.

Tas nav tas, ko mēs vēlamies. Mēs vēlamies, lai tas būtu krāsains šādā veidā: Nabadzīgs (sarkans), Vidējais (apelsīns), Labi (zaļš)

Tā kā pareizais reģions ir uzskatāms par mūsu optimālo reģionu, mēs sniegsim optimāls vērtība, kas ietilpst pareizajā reģionā (jebkura vērtība no 61 līdz 100, ieskaitot 61 un 100).

Šajā piemērā mēs izmantojam 90. Tas padarīs pareizo reģionu "optimālu", vidējo (tā tuvāko nākamo reģionu) "nepietiekami optimālu" un tālu atstāj "ne-optimāli" reģionu..

Tas ir tas, ko mēs iegūsim uz mūsu mērinstrumenta.

2. Styling "pH" mērītājs

Pirmkārt, elpošana uz pH vērtībām. Skābā šķīduma pH ir mazāks par 7, sārmainā šķīduma pH ir lielāks par 7, un, ja jūs nokrītat uz 7, tas ir neitrāls risinājums..

Tādējādi mēs izmantosim šādas vērtības un atribūtus:

zems = "7" , augsta = "7", max = "14", un min būs nulles noklusējuma vērtība.

Pirms pievienojam pārējos atribūtus, lai pabeigtu kodu, pieņemsim lēmumu par krāsām: Skāba (sarkans), Neitrāls (balts) un Sārmains (zils). Ļaujiet arī uzskatīt skābu reģionu (kreisais reģions zem 7) kā "optimālu"

Šeit ir CSS pseido elementi, kurus mēs mērķēsim iegūt vēlamo vizuālo Firefox. (Webkit skaitītāja pseido elementiem un vairāk, skatiet saites, kas uzskaitītas sadaļā "atsauce".)

 .ph_meter fons: gaišs; platums: 300px;  .ph_meter: -moz-meter-optimimum :: - moz-meter-bar fons: indianred;  .ph_meter: -moz-meter-sub-optimum :: - moz-meter-bar fons: antiquewhite;  .ph_meter: -moz-meter-sub-sub-optimum :: - moz-metrs-bar (fons: tērauda zils;  

Šeit ir pilns html kods un pH mērītāja gala rezultāts.

Atsauces

• HTML5 Meter W3C spec
• Webkit pseido elementu un klašu saraksts
• Piegādātāja specifisko pseido elementu saraksts

Vairāk par Hongkiat: progresa joslas izveide un veidošana ar HTML5