Използване и стайлинг на HTML5 метър [Ръководство]

Ако сте запознати с лентата за напредъка на HTML, която показва колко дейност е била извършена, ще откриете, че елементът за измерване е подобен на този - и двата показва текущата стойност от максимална стойност. Но за разлика от лентата на напредъка, лентата с метри не трябва да се използва за показване на напредъка.

Използва се за показване на a статична стойност в определен диапазон, например можете да посочите използваното място в дисковото пространство, като покажете колко от пространството за съхранение е запълнено и колко не.

Освен това, измервателният елемент може да се използва и за визуализиране на до три района в неговия обхват. Повторно използване на пространството за съхранение, вместо да се показва само колко място е заето, визуално можете да посочите дали заетото пространство е само рядко запълнено (да кажем под 30%) или почти наполовина (между 30 и 60%) или повече от наполовина пълно (над 60%) при използване на различни цветове. Това помага на потребителите да знаят кога достигат лимита за съхранение.

В тази публикация ще ви покажем как да оформят лентата с метри за двете цели, споменати т.е. обикновен габарит (без посочените региони) и два примера на измервателни уреди с 3 обозначени с цвят области. За последното ще работим създаване на габарит "марки" за показване на бедни, средни и добри оценки и измервателен уред "pH" за показване на киселинни, нервни и алкални стойности на рН.

Атрибути

Преди да започнем с примерите и да продължим задълбочено, нека да погледнем бързо в списъка с атрибути по-долу, повече за тези атрибути, като техните настройки по подразбиране и т.н., ще бъдат обхванати в примерите..

стойност - Стойността на метър елемент
мин - Минималната стойност на обхвата на измервателния уред
макс - Максималната стойност на обхвата на електромера
ниско - Показва ниската граница
Високо - Показва високата гранична стойност
оптимален - Оптималната точка в диапазона

1. Оформяне на обикновен габарит

Ето един много прост пример, използващ само един атрибут стойност. Преди да продължим, първо трябва да знаем три неща:

(1) По подразбиране има мин и макс стойност, определяща обхвата на метър, което е съответно 0 и 1. \ t. (2) Ако е посочено от потребителя стойност не попада в обхвата на метър диапазон, ще вземе стойността на един от двамата мин или макс, което е най-близко до. (3) Крайният маркер е задължителен.

Ето синтаксиса:

0.5

Като алтернатива можем да добавим мин и макс атрибути, осигуряващи по този начин определен от потребителя диапазон:

2. Стайлинг "Марки"

Първо, трябва да разделим обхвата на три региона (ляв / нисък, среден, десен / висок). Това е така ниско и Високо атрибути. Така са разделени трите региона.

Трите региона се формират между тях мин & ниско , ниско & Високо и Високо & макс.

Сега е очевидно, че има определени условия ниско и Високо следва да се следват стойностите на трите региона:

ниско не може да бъде по-малко от мин и по-голяма от Високо & макс
Високо не може да бъде по-голямо от макс и по-малко от ниско & мин.
И когато един критерий е нарушен и двата ниско и Високо ще приеме стойността на другата променлива в критериите, които не са изпълнени, т.е. ниско стойността се намира по-ниска от мин което не трябва да бъде, ниско ще получи мин стойност.

В този пример ще разгледаме нашите три региона отляво надясно, за да бъдем:

беден: (0-33)
Средно аритметично: (34-60)
добре: (61-100)

Следователно, следните са стойностите за атрибутите; min = "0" low = "34" high = "60" max = "100".

Ето изображение, което визуализира регионите.

Въпреки че в метъра, който създадохме точно сега, има три региона, той ще посочи само два "вида" региони само в два цвята в момента. Защо? защото оптимален е в средата на региона.

Оптимална точка

В който и да е регион (от трите) оптимален точка попада, тя се счита за "оптимална област", оцветена в зелено по подразбиране. Районът (ите) непосредствено до него се нарича "подоптимален регион" и е оранжево оцветен. Най-далеч е "не много оптимален регион", оцветен в червено.

Досега в нашия пример не сме задали стойност за оптимален. Следователно стойността по подразбиране става 50, което прави средния регион "оптимален регион", а този до него (както отляво, така и вдясно) като "подоптимални региони".

Накратко, в горния случай всяка стойност за метър елемент, който попада в средния регион, е обозначен със зелено; останалото оранжево.

Това не е това, което искаме. Искаме да го оцветят по следния начин: беден (червен), Средно аритметично (Оранжево), добре (Зелен)

Тъй като десният район трябва да се счита за оптимален регион, ще дадем оптимален стойност, която ще попадне в десния регион (всяка стойност между 61-100, включително 61 и 100).

Ние вземаме 90 за този пример. Това ще направи "оптималния" десния регион, а средният (неговия непосредствен следващ регион) "неоптимален", а крайната лява част от "не много оптималния" регион.

Това е, което ще получим на нашия габарит.

2. Стайлинг "pH" Gauge

Първо, отдушник на стойностите на рН. Киселият разтвор има рН по-малко от 7, алкален разтвор има рН по-голямо от 7 и ако се приземи на 7, това е неутрално решение..

По този начин ще използваме следните стойности и атрибути:

ниско = "7" , високо = "7", макс = "14", и мин ще приеме стойността по подразбиране нула.

Преди да добавим останалите атрибути, за да завършим кода, нека да решим за цветовете: Киселинен (червен), неутрален (бяло) и алкален (син). Нека разгледаме и киселия регион (ляв регион под 7) като "оптимален"

Ето и псевдоелементите на CSS, които ще насочим, за да получим желаната визуална информация Firefox. (За псевдоелементите на webkit брояча и др. Вижте връзките, изброени под „препратка“.)

 .ph_meter фон: lightgrey; ширина: 300px;  .ph_meter: -moz-meter-optimum :: - moz-meter-bar фон: indianred;  .ph_meter: -moz-meter-sub-optimum :: - moz-meter-bar фон: antiquewhite;  .ph_meter: -moz-meter-sub-sub-optimum :: - moz-meter-bar (фон: steelblue;

Тук е пълният html код и крайният резултат от pH-метъра.

Препратки

Спецификация на HTML5 метър W3C
Списък на псевдоелементи и класове на webkit
Списък на специфичните за производителя псевдоелементи

Повече за Hongkiat: Създаване и оформяне на лента за напредък в HTML5