Коришћење и обликовање ХТМЛ5 мерача [Водич]

Ако сте упознати са ХТМЛ траком напретка, која показује колико је активности извршено, видећете да је елемент мерача сличан ономе - приказати тренутну вредност од максималне вредности. Али за разлику од траке напретка, мерна трака се не користи за приказ напретка.

Користи се за приказивање а статичка вредност у одређеном опсегу, на пример, можете да означите простор за складиштење који се користи у диск јединици, показујући колико је простора за складиштење попуњено и колико није.

Поврх тога, елемент метра се такође може користити за визуелизацију до три региона у свом опсегу. Ако поново употребите пример простора за складиштење, уместо да приказује само колико је простора заузето, такође можете визуелно назначити да ли је заузети простор само ретко попуњен (рецимо испод 30%) или близу половине (између 30 до 60%) или више од пола пуна (изнад 60%) користећи различите боје. Ово помаже корисницима да знају када достигну ограничење складиштења.

У овом посту ћемо вам показати како стилизовати шипку мерача за обе поменуте сврхе, тј симпле гауге (без назначених подручја) и два примјера мјерача с 3 подручја означена бојом. За ово друго ћемо радити стварајући меру "ознака" за показивање лоших, просечних и добрих оцена, и мерач "пХ" за показивање киселих, неуралних и алкалних пХ вредности.

Атрибути

Пре него што почнемо са примерима и идемо у дубину, хајде да погледамо његову листу атрибута у наставку, више о овим атрибутима као што су њихове подразумеване вредности, итд..

вредност - Вредност метар елемент
мин - Минимална вредност опсега бројила
мак - Максимална вредност опсега бројила
лов - Означава ниску граничну вриједност
хигх - Означава високу граничну вредност
оптимум - Оптимална тачка у опсегу

1. Стилинг А Симпле Гауге

Ево веома једноставног примера који користи само један атрибут вредност. Пре него што наставимо, прво морамо да знамо три ствари:

(1) Постоји дефаулт мин и мак вредност која одређује опсег метар, што је 0 и 1 респективно. (2) Ако корисник одреди вредност не спада у метар распону, он ће узети вриједност било које мин или мак, оно што је најближе. (3) Завршна ознака је обавезна.

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

0.5

Алтернативно, можемо додати мин и мак атрибути који обезбеђују кориснички дефинисани опсег тако:

2. Стајлинг Гауге "Маркс"

Прво, треба да поделимо опсег на три региона (лево / ниско, средње, десно / високо). Ово је било лов и хигх атрибути долазе у игру. Тако су три региона подијељена.

Између њих се формирају три региона мин & лов , лов & хигх и хигх & мак.

Сада је очигледно да постоје одређени услови лов и хигх треба да следе вредности за формирање три региона:

лов не може бити мање од мин и веће од хигх & мак
хигх не може бити већа од мак и мање од лов & мин.
И када је критеријум прекршен лов и хигх ће узети вриједност друге варијабле у критеријима који нису задовољени, тј лов вредност је нижа од мин што не би требало да буде, лов ће добити мин вредност.

У овом примеру, размотрићемо наша три региона с лева на десно да бисмо:

Лоше: (0-33)
Просек: (34-60)
Добро: (61-100)

Дакле, слиједеће вриједности за атрибуте; мин = "0" ниско = "34" високо = "60" мак = "100".

Ово је слика која визуализује регионе.

Иако постоје три региона у метру који смо направили управо сада, то ће указати само на два "типа" региона у само две боје у овом тренутку. Зашто? Јер оптимум је у средњем региону.

Оптимум Поинт

У било којој регији (од три) оптимум Тачка пада, сматра се да је "оптимална регија" обојена зеленом бојом. Регион (и) непосредно поред њега се назива "подоптималним подручјем" и обојен је наранџастом бојом. Онај најудаљенији је "не баш оптималан регион", обојен црвено.

До сада у нашем примјеру нисмо додијелили вриједност оптимум. Према томе, подразумевана вредност постаје 50, што средњи регион чини "оптималним регионом", а они који се налазе одмах поред њега (и лево и десно) као "подоптимални региони".

Укратко, у горе наведеном случају, свака вредност за метар елемент који пада у средњи регион означен је зеленом бојом; остало је наранџасто.

То није оно што желимо. Желимо да се обоји на овај начин: Лоше (црвено), Просек (наранџаста), Добро (зелен)

Пошто се десно подручје сматра нашим оптималним подручјем, ми ћемо га дати оптимум вредност која ће пасти у десни регион (било која вредност између 61-100, укључујући 61 и 100).

Узмемо 90 за овај пример. Ово ће учинити "оптималним" десним регионом, средином (његовом непосредном суседном регијом) "субоптимално", а крајње лево подручје "не баш оптималног".

То је оно што ћемо добити на нашем колосијеку.

2. Стилинг "пХ" Гауге

Прво, одушак на пХ вредности. Кисели раствор има пХ мањи од 7, алкални раствор има пХ већи од 7 и ако слетите на 7, то је неутрално раствор.

Тако ћемо користити следеће вредности и атрибуте:

лов = "7" , хигх = "7", мак = "14", анд тхе мин ће узети подразумевану вредност нула.

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

Овде су ЦСС псеудо елементи које ћемо циљати да би добили жељену визуелну позицију фирефок. (За псеудо елементе бројила вебкит и више, погледајте линкове наведене под "референца".)

 .пх_метер бацкгроунд: лигхтгреи; видтх: 300пк;  .пх_метер: -моз-метер-оптимум :: - моз-метер-бар бацкгроунд: индианред;  .пх_метер: -моз-метер-суб-оптимум :: - моз-метер-бар бацкгроунд: антикуевхите;  .пх_метер: -моз-метер-суб-суб-оптимум :: - моз-метер-бар бацкгроунд: стеелблуе;

Овде је комплетан хтмл код и коначни резултат пХ мерача.

Референце

ХТМЛ5 Метер В3Ц спец
Листа вебкит псеудо елемената и класа
Списак псеудо елемената произвођача

Више о Хонгкјату: Креирање и стилизовање траке напретка са ХТМЛ5