HTML5 matuoklio naudojimas ir stilius [vadovas]

Jei esate susipažinę su HTML progreso juosta, kuri rodo, kiek veiklos buvo atlikta, matysite, kad matuoklio elementas yra panašus į tą - abu parodyti dabartinę vertę iš maksimalios vertės. Tačiau skirtingai nuo pažangos juostos, matuoklio juosta neturi būti naudojama pažangos rodymui.

Jis naudojamas rodyti a statinės vertės konkrečiame intervale, Pavyzdžiui, galite nurodyti disko saugykloje naudojamą atminties talpą, parodydami, kiek atminties yra užpildyta ir kiek nėra.

Be to, matuoklio elementas taip pat gali būti naudojamas vizualizuoti iki trijų regionų diapazone. Taip pat galite pakartotinai naudoti laikymo vietos pavyzdį, o ne tik parodyti, kiek vietos užimta, bet ir vizualiai nurodyti, ar užimta erdvė yra tik retai užpildyta (leidžia pasakyti žemiau 30%) arba beveik pusė (nuo 30 iki 60%) arba daugiau nei pusė (virš 60%), naudojant skirtingas spalvas. Tai padeda vartotojams žinoti, kada jie pasiekia saugojimo ribą.

Šiame pranešime parodysime kaip stiliaus baras stilius abiem nurodytais tikslais, t.y. paprastas matuoklis (be nurodyto regiono) ir du matuoklių pavyzdžiai su 3 spalvomis. Pastaruoju atveju mes dirbame sukurti „žymes“ rodant prastus, vidutinius ir gerus ženklus ir „pH“ matuoklis rūgštinių, nervų ir šarminių pH rodiklių.

Atributai

Prieš pradėdami su pavyzdžiais ir nuodugniai išnagrinėkime toliau pateiktą atributų sąrašą, daugiau apie šiuos atributus, pvz., Jų numatytuosius nustatymus ir pan..

• vertė - . \ T metras elementas
• min - Mažiausia matuoklio diapazono vertė
• maks - Didžiausia skaitiklio diapazono vertė
• žemas - Rodo mažą ribinę vertę
• aukštas - Nurodo didelę ribinę vertę
• optimalus - Optimalus taškas diapazone

1. Paprasto matuoklio stilius

Štai labai paprastas pavyzdys, naudojant tik vieną atributą vertė. Prieš tęsdami pirmiausia turime žinoti tris dalykus:

(1) Yra numatytasis min ir maks vertė, apibrėžianti diapazoną metras, kuris yra atitinkamai 0 ir 1. (2) Jei vartotojo nurodytas vertė nepatenka į metras diapazonas, jis užims bet kurią vertę min arba maks, kuri yra arčiausiai. (3) Galutinė žyma yra privaloma.

Čia yra sintaksė:

 0,5 

Arba taip pat galime pridėti min ir maks tokiu būdu suteikiant vartotojo apibrėžtą diapazoną:

2. „Marks“ matuoklio stilius

Pirma, turime suskirstyti diapazoną į tris regionus (kairę / žemą, vidurinę, dešinę / aukštą). Tai buvo žemas ir aukštas atkuriami atributai. Taip suskirstyti trys regionai.

Trys regionai yra suformuoti min & žemas , žemas & aukštas ir aukštas & maks.

Dabar akivaizdu, kad yra tam tikrų sąlygų žemas ir aukštas turėtų būti laikomasi trijų formuojamų regionų vertės:

• žemas negali būti mažesnis nei min ir didesnis nei aukštas & maks
• aukštas negali būti didesnis nei maks ir mažiau nei žemas & min.
• Ir kai abu kriterijai yra pažeisti žemas ir aukštas kito kito kintamojo vertę neatitinka kriterijų, t. y žemas vertė yra mažesnė nei min ji neturėtų būti, žemas gaus min vertė.

Šiame pavyzdyje mes laikysime savo tris regionus iš kairės į dešinę:

• Vargšas: (0-33)
• Vidutinis: (34-60)
• Gerai: (61-100)

Taigi, yra reikšmės atributams; min = "0" žemas = "34" aukštas = "60" max = "100".

Čia yra vaizdas, vaizduojantis regionus.

Nors šiuo metu sukurtame skaitiklyje yra trys regionai, šiuo metu tik dviejose spalvose bus rodomi tik du „tipai“. Kodėl? Nes optimalus yra viduryje.

Optimalus taškas

Bet kuriame regione (iš trijų) optimalus taškas patenka į „optimalų regioną“, kuris pagal nutylėjimą yra žalias. Netoliese esantis regionas (-ai) yra vadinamas „sub-optimaliu regionu“ ir yra oranžinis. Toliausiai nutolęs yra „ne-optimalus regionas“, raudonas.

Iki šiol mūsų pavyzdyje mes nepriskyrėme vertės optimalus. Vadinasi, numatytoji vertė tampa 50, todėl vidurio regionas yra „optimalus regionas“ ir tie, kurie yra šalia jo (kairėje ir dešinėje) kaip „sub-optimalūs regionai“.

Trumpai tariant, aukščiau minėtu atveju, bet kokia vertė metras elementą, kuris patenka į vidurinį regioną, žymi žalia spalva; poilsio oranžinė.

Tai ne tai, ko mes norime. Mes norime, kad jis taptų tokiu būdu: Vargšas (raudona), Vidutinis (oranžinė), Gerai (žalias)

Kadangi teisingas regionas bus laikomas mūsų optimaliu regionu, mes suteiksime optimalus vertė, kuri pateks į dešinįjį regioną (bet kokia vertė nuo 61 iki 100, įskaitant 61 ir 100).

Šiam pavyzdžiui prisiimame 90. Tai padarys teisingą regioną „optimalų“, vidurį (jo artimiausią kitą regioną) „sub-optimalų“, o tolimoje vietoje - „ne-daug-optimalaus“ regioną.

Štai ką gausime ant mūsų matuoklio.

2. Stilizavimas „pH“ matuoklis

Pirma, išpūtimas ant pH vertės. Rūgšties tirpalo pH yra mažesnis nei 7, šarminis tirpalas yra didesnis kaip 7, o jei nusileidžiate ant 7, tai neutralus tirpalas.

Taigi, mes naudosime šias vertes ir atributus:

žemas = "7" , aukštas = "7", maks. = "14", ir min bus nulinė numatytoji vertė.

Prieš pridedant likusius atributus, kad užbaigtume kodą, nuspręskime dėl spalvų: Rūgštus (raudona), Neutralus (baltas) ir Šarminis (mėlyna). Taip pat laikykimės rūgštinio regiono (kairysis regionas žemiau 7) kaip „optimalų“

Čia yra CSS pseudo elementai, kuriuos mes norime gauti norimą vaizdą „Firefox“. (Webkit metrų pseudo elementams ir kt. Rasite nuorodose, nurodytose „nuoroda“.)

 .ph_meter background: lightgrey; plotis: 300px;  .ph_meter: -moz-meter-optimimum :: - moz-meter-bar fonas: indianred;  .ph_meter: -moz-meter-sub-optimum :: - moz-meter-bar fonas: antiquewhite;  .ph_meter: -moz-meter-sub-sub-optimum :: - moz-metras-baras fonas: plieninis;  

Čia yra visas HTML kodas ir galutinis pH matuoklio rezultatas.

Nuorodos

• HTML5 Meter W3C spec
• Webkitų pseudo elementų ir klasių sąrašas
• Pardavėjo specifinių pseudo elementų sąrašas

Daugiau apie „Hongkiat“: pažangos juostos kūrimas ir formavimas naudojant HTML5