HTML5-mérő használata és formázása [Útmutató]

Ha ismeri a HTML előrehaladási sávját, amely megmutatja, hogy egy adott tevékenység mennyi részét hajtotta végre, úgy fogja találni, hogy a mérőelem hasonló ahhoz - mindkettő mutasson egy aktuális értéket a maximális értékből. Az előrehaladási sávtól eltérően azonban a mérő sáv nem használható a haladás megjelenítéséhez.

Az a statikus érték egy adott tartományban, például a lemeztárolóban használt tárhelyet jelezheti a tárolóterület teljes mennyiségének feltüntetésével és mennyi nem.

Ezen felül a mérőelem a tartományon belül akár három régió megjelenítésére is használható. A tárterület példájának újrahasznosítása ahelyett, hogy csak azt mutatja, hogy mennyi helyet foglal el, vizuálisan is jelezheti, hogy a foglalt hely csak ritkán van-e kitöltve (30% alatti), vagy közel félig (30-60%) vagy több fele (60% felett) különböző színeket használ. Ez segít a felhasználóknak abban, hogy mikor érik el a tárolási korlátot.

Ebben a bejegyzésben megmutatjuk hogyan kell megmérni a mérő sávot mindkét említett célra, azaz a egyszerű mérőeszköz (nem jelzett régiókkal) és két példányt 3 színjelzéssel ellátott régióval. Az utóbbi esetében dolgozunk "jelek" mérőeszköz létrehozása a rossz, átlag és jó jelek megjelenítéséhez, és "pH" mérőműszer savas, idegi és lúgos pH-értékek kimutatására.

attribútumok

Mielőtt elkezdenénk a példákkal, és elmélyülnénk, vessünk egy gyors pillantást az alábbi attribútumok listájára, ezekről az attribútumokról, például az alapértelmezett értékekről, stb..

• érték - A méter elem
• min - A mérő tartományának minimális értéke
• max - A mérő tartományának maximális értéke
• alacsony - Az alacsony határértéket jelzi
• magas - A magas határértéket jelzi
• optimális - Az optimális pont a tartományban

1. Egy egyszerű mérőeszköz kialakítása

Itt egy nagyon egyszerű példa, amely csak egy attribútumot használ érték. Mielőtt folytatnánk, először három dolgot kell ismernünk:

(1) Alapértelmezett min és max értékét meghatározó érték méter, ami 0 és 1. (2) Ha a felhasználó megadta érték nem tartozik a méter tartományba kerül, akkor akár az is min vagy max, melyik a legközelebb van. (3) A záró címke kötelező.

Itt van a szintaxis:

 0.5 

Alternatív megoldásként hozzáadhatunk min és max attribútumok, így a felhasználó által meghatározott tartományt biztosítva így:

2. A "Marks" mérőeszköz stílusa

Először, a tartományt három régióra kell osztanunk (bal / alacsony, középső, jobb / magas). Ez volt alacsony és magas az attribútumok jönnek létre. Így oszlik meg a három régió.

A három régió között létrejöttek min & alacsony , alacsony & magas és magas & max.

Nyilvánvaló, hogy vannak bizonyos feltételek alacsony és magas értékeket kell követni a három létrehozandó régió esetében:

• alacsony nem lehet kevesebb min és nagyobb, mint magas & max
• magas nem lehet nagyobb max és kevesebb mint alacsony & min.
• És amikor egy kritérium mindkettője megtört alacsony és magas a másik változó értékét a nem teljesített kritériumokban veszi át, azaz ha alacsony értéke kisebb, mint a min amit nem kellene, alacsony megkapja a min érték.

Ebben a példában három régiót balról jobbra tekintjük:

• Szegény: (0-33)
• Átlagos: (34-60)
• Jó: (61-100)

Ezért az attribútumok értékei az alábbiak; min = "0" alacsony = "34" magas = "60" max = "100".

Itt látható a régiók képe.

Annak ellenére, hogy a mostanában létrehozott mérőműszerben három régió van, csak két "régiót" jelez a pillanatban csak két színben. Miért? Mert optimális a közepén van.

Optimális pont

Bármelyik régióban (a három közül) a optimális pont alá esik, az „optimális régiónak” tekinthető, zöld színnel. A közvetlenül mellette elhelyezkedő régiót „al-optimális régiónak” nevezik, és narancssárga színű. A legtávolabb egy "nem sok-optimális régió", piros színű.

Eddig példánkban nem értékeltünk értéket optimális. Ennélfogva az alapértelmezett érték 50 lesz, így a középső régió az "optimális régió" és az azt közvetlenül (mind a bal, mind a jobb oldalon) "optimális régiók", mint "optimális régiók"..

Röviden a fenti esetben, bármilyen értéket a méter a középső tartományba eső elemet zöld jelzi; a többi narancs.

Ez nem az, amit akarunk. Ily módon színezzük: Szegény (piros), Átlagos (narancs), Jó (zöld)

Mivel a helyes területet optimális régiónak tekintjük, megadjuk optimális olyan érték, amely a jobb tartományba esik (61-100, beleértve a 61 és 100 közötti értéket).

90 példát veszünk erre a példára. Ezzel az „optimális”, a középső (közvetlen következő régiója) „szuboptimális” és a távolabbi „nem-sok-optimális” régió lesz a helyes régiója..

Ezt fogjuk kapni a mérőn.

2. Styling A "pH" mérőműszer

Először egy pH-értékű légtelenítő. A savas oldat pH-értéke 7-nél kisebb, az alkáli oldat pH-ja nagyobb, mint 7, és ha 7-re esik, ez egy semleges oldat.

Így az alábbi értékeket és attribútumokat fogjuk használni:

alacsony = "7" , magas = "7", max = "14", és a min az alapértelmezett nulla érték lesz.

Mielőtt hozzáadjuk a többi attribútumot a kód kitöltéséhez, döntsünk a színekről: savas (piros), Semleges (fehér) és Lúgos (kék). Tekintsük a savas régiót (7-es baloldali régió) "optimálisnak"

Itt vannak a CSS pszeudo elemek, amiket célunk a kívánt vizuális megjelenítéshez firefox. (A webkód-mérő pszeudo-elemeihez és a többihez lásd a "hivatkozás" alatt található hivatkozásokat.)

 .ph_meter háttér: lightgrey; szélesség: 300px;  .ph_meter: -moz-meter-optimum :: - moz-meter-bar háttér: indianred;  .ph_meter: -moz-meter-sub-optimum :: - moz-meter-bar háttér: antiquewit;  .ph_meter: -moz-meter-sub-sub-optimum :: - moz-meter-bar háttér: acélvörös;  

Itt van a teljes html-kód és a pH-mérő végeredménye.

Irodalom

• HTML5 mérő W3C specifikáció
• Webkit pseudo elemek és osztályok listája
• A szállítóspecifikus pszeudo elemek listája

További információ a Hongkiat-ról: Előrehaladási sáv létrehozása és formázása HTML5-tel