Použití a styling HTML5 Meter [Průvodce]

Pokud jste obeznámeni s pruhem postupu HTML, který ukazuje, kolik aktivity bylo provedeno, zjistíte, že prvek metru je podobný tomu, který je zobrazí aktuální hodnotu mimo maximální hodnotu. Na rozdíl od ukazatele průběhu se však panel měřičů nesmí zobrazovat.

Používá se k zobrazení a statická hodnota ve specifickém rozsahu, například můžete označit úložný prostor použitý v diskovém úložišti tak, že ukáže, kolik úložného prostoru je vyplněno a kolik není.

Kromě toho může být prvek měřidla také použit k vizualizaci až tří oblastí v jeho rozsahu. Opětovné použití příkladu úložného prostoru namísto zobrazení pouze toho, kolik místa je obsazeno, můžete také vizuálně ukázat, zda je obsazený prostor pouze řídce zaplněný (řekněme pod 30%) nebo téměř poloviční (mezi 30 až 60%) nebo více než polovina plná (nad 60%) pomocí různých barev. To pomáhá uživatelům vědět, kdy dosáhnou limitu úložiště.

V tomto příspěvku vám ukážeme jak styl baru pro oba zmíněné účely, tzn jednoduchý rozchod (bez vyznačených oblastí) a dva příklady měřidel se 3 barevně označenými oblastmi. Pro druhé, budeme pracovat na vytvoření měřidla "značky" pro zobrazení špatných, průměrných a dobrých známek a měřidlo "pH" pro zobrazení kyselých, nervových a alkalických hodnot pH.

Atributy

Než začneme s příklady a jdeme do hloubky, podívejme se rychle na seznam níže uvedených atributů, více o těchto atributech, jako jsou jejich výchozí hodnoty, atd..

hodnota - Hodnota Metr živel
min - Minimální hodnota rozsahu měřidla
max - Maximální hodnota rozsahu měřidla
nízký - Označuje nízkou hraniční hodnotu
vysoký - Označuje vysokou hraniční hodnotu
optimální - Optimální bod v rozsahu

1. Styling Simple Gauge

Zde je velmi jednoduchý příklad používající pouze jeden atribut hodnota. Než budeme pokračovat, musíme nejprve znát tři věci:

(1) Existuje výchozí nastavení min a max hodnota definující rozsah Metr, což je 0 a 1. (2) Pokud je uživatel zadán hodnota nespadá pod Metr bude mít hodnotu buď min nebo max, podle toho, co je nejbližší. (3) Značka Konec je povinná.

Zde je syntaxe:

0,5

Alternativně můžeme také přidat min a max atributy tak, aby poskytovaly takto definovaný rozsah:

2. Styling "Marks" Gauge

Nejprve musíme rozdělit rozsah do tří oblastí (vlevo / nízko, uprostřed, vpravo / vysoko). To bylo nízký a vysoký atributy. Tak jsou tyto tři regiony rozděleny.

Tyto tři regiony jsou tvořeny mezi min & nízký , nízký & vysoký a vysoký & max.

Nyní je zřejmé, že existují určité podmínky nízký a vysoký hodnoty by měly následovat pro tři regiony, které mají být vytvořeny: \ t

nízký nesmí být menší než min a větší než vysoký & max
vysoký nesmí být větší než max a méně než nízký & min.
A když jsou porušena kritéria nízký a vysoký přebírá hodnotu jiné proměnné v kritériích, která nejsou splněna, tzn nízký hodnota je nižší než min což by nemělo být, nízký dostane min hodnota.

V tomto příkladu budeme považovat naše tři regiony zleva doprava:

Chudý: (0-33)
Průměrný: (34-60)
Dobrý: (61-100)

Proto jsou pro atributy následující hodnoty; min = "0" nízká = "34" vysoká = "60" max = "100".

Zde je obraz zobrazující regiony.

I když v metru, který jsme právě vytvořili, existují tři regiony, bude to znamenat pouze dva „druhy“ regionů v současné době pouze ve dvou barvách. Proč? Protože optimální je ve střední oblasti.

Optimální bod

V kterékoli oblasti (ze tří) optimální bod spadá do, je považován za "optimální region" barevně zelené ve výchozím nastavení. Oblast bezprostředně vedle ní se nazývá "sub-optimální region" a je zbarven oranžově. Nejvzdálenější je „ne-moc-optimální oblast“, zbarvená červeně.

V našem příkladu jsme zatím nepřiděli hodnotu optimální. Výchozí hodnota je tedy 50, což znamená, že střední oblast je "optimální region" a oblasti přímo vedle ní (obě vlevo a vpravo) jako "sub-optimální oblasti".

Stručně řečeno, ve výše uvedeném případě, jakákoli hodnota Metr prvek, který spadá do střední oblasti, je označen zelenou barvou; zbytek oranžová.

To není to, co chceme. Chceme, aby byla takto barvená: Chudý (Červené), Průměrný (oranžový), Dobrý (zelená)

Vzhledem k tomu, že pravý region má být považován za náš optimální region, dáme optimální hodnota, která bude spadat do pravé oblasti (jakákoli hodnota mezi 61-100, včetně 61 a 100).

Za tento příklad bereme 90 bodů. To učiní pravý region "optimálním", uprostřed (jeho bezprostřední příští region) "sub-optimální" a daleko opustí "ne-moc-z-optimální" region.

To je to, co dostaneme na náš rozchod.

2. Styling "pH" měřidlo

Zaprvé, odvzdušnění na hodnotách pH. Kyselý roztok má pH nižší než 7, alkalický roztok má hodnotu pH vyšší než 7 a pokud přistane na 7, je to neutrální roztok..

Budeme tedy používat následující hodnoty a atributy:

low = "7" , vysoká = "7", max = "14", a min bude mít výchozí hodnotu nula.

Než přidáme zbytek atributů k dokončení kódu, rozhodněte se o barvách: Kyselina (Červené), Neutrální (bílá) a Alkalické (modrý). Uvažujme také o kyselé oblasti (levá oblast pod 7) jako "optimální"

Zde jsou pseudo elementy CSS, na které se budeme snažit získat požadovaný vizuální vzhled Firefox. (Pro webkit metr pseudo elementy a další, odkaz na odkazy uvedené pod "reference".)

 .ph_meter background: lightgrey; šířka: 300px;  .ph_meter: -moz-meter-optim :: - moz-metr-bar pozadí: indianred;  .ph_meter: -moz-meter-sub-optimum :: - moz-meter-bar pozadí: antiquewhite;  .ph_meter: -moz-meter-sub-sub-optimum :: - moz-metr-bar pozadí: steelblue;

Zde je kompletní html kód a konečný výsledek pH měřidla.

Reference

HTML5 Meter W3C spec
Seznam webkit pseudo elementů a tříd
Seznam specifických pseudo prvků dodavatele

Více o Hongkiat: Vytváření & Styling Progress Bar S HTML5