Використання та укладання лічильника HTML5 [Керівництво]

Якщо ви знайомі з рядком показу HTML, який показує, скільки робіт було виконано, ви побачите, що елемент лічильника подібний до цього - як показувати поточне значення з максимального значення. Але, на відміну від індикатора, панель лічильників не використовується для показу прогресу.

Він використовується для показу a статичне значення в певному діапазоні, Наприклад, ви можете вказати простір для зберігання, що використовується в дисковому сховищі, показуючи, скільки місця для зберігання заповнене і скільки не є.

Крім того, елемент вимірювального приладу також може бути використаний для візуалізації до трьох регіонів у межах свого діапазону. Повторне використання прикладу місця для зберігання, замість того, щоб показувати тільки, скільки місця займає, ви також можете візуально вказати, чи займає простір лише рідко заповнене (скажімо нижче 30%) або майже наполовину повне (від 30 до 60%) або більше наполовину повний (вище 60%) з використанням різних кольорів. Це допомагає користувачам дізнатися, коли вони досягають ліміту зберігання.

У цій публікації ми покажемо вам як стилювати метр-бар для обох цілей, згаданих, наприклад, a простий калібр (без зазначених областей) і два приклади датчиків з 3 кольоровими областями. Для останнього ми працюватимемо створення калібру «знаків» для показу поганих, середніх і хороших оцінок, і датчик "рН" для виявлення кислотних, нервових і лужних значень рН.

Атрибути

Перш ніж ми почнемо з прикладів і пройдемо поглиблено, давайте швидко розглянемо його список атрибутів нижче, більше про ці атрибути, такі як значення за замовчуванням і т.д., буде розглянуто в прикладах.

• значення - Значення метр елемент
• хв - Мінімальне значення діапазону лічильника
• макс - Максимальне значення діапазону лічильника
• низький - Вказує на низьке граничне значення
• високий - Вказує на велике граничне значення
• оптимуму - Оптимальна точка в діапазоні

1. Стиль простого калібру

Ось дуже простий приклад з використанням тільки одного атрибута значення. Перш ніж продовжити, потрібно спочатку дізнатися три речі:

(1) За замовчуванням хв і макс значення, що визначає діапазон метр, що дорівнює 0 і 1 відповідно. (2) Якщо вказано користувачем значення не підпадає під. \ t метр діапазон, він буде приймати значення або хв або макс, в залежності від того, на що вона близька. (3) Кінцевий тег обов'язковий.

Ось синтаксис:

 0,5 

Також можна додати хв і макс атрибути, таким чином надаючи визначений користувачем діапазон так:

2. Укладка калібру «Марки»

По-перше, нам потрібно розділити діапазон на три області (ліва / низька, середня, права / висока). Це були низький і високий атрибути. Так поділені три регіони.

Трьох регіонів формуються між ними хв & низький , низький & високий і високий & макс.

Тепер очевидно, що існують певні умови низький і високий для формування трьох регіонів слід слідувати:

• низький не може бути менше хв і більше, ніж високий & макс
• високий не може бути більшим ніж макс і менше низький & хв.
• І тоді, коли критерій порушений низький і високий візьме на себе значення іншої змінної в критеріях, які не задовольняються, тобто якщо низький Значення знайдено нижче хв що не повинно бути, низький отримає хв значення.

У цьому прикладі ми розглянемо три регіони зліва направо, щоб бути:

• Бідні: (0-33)
• Середня: (34-60)
• Добре: (61-100)

Отже, наступними є значення для атрибутів; min = "0" низький = "34" високий = "60" max = "100".

Ось зображення, що візуалізує регіони.

Незважаючи на те, що в лічильнику, який ми створили зараз, є три регіони, на даний момент він буде вказувати лише два "види" регіонів лише в двох кольорах. Чому? Оскільки оптимуму знаходиться в середньому регіоні.

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

У якому б регіоні (з трьох) не було оптимуму точка впадає, вона розглядається як "оптимальна область" забарвленого в зелений колір за замовчуванням. Область (-а), що знаходиться поруч з нею, називається "суб-оптимальним регіоном" і пофарбована в помаранчевий колір. Найбільш віддалена - це "не дуже оптимальна область", пофарбована в червоний колір.

Поки що в нашому прикладі ми не призначали значення для оптимуму. Отже, значення за замовчуванням стає 50, що робить середній регіон "оптимальним регіоном", а той, що знаходиться поруч з ним (як зліва, так і справа), як "суб-оптимальні області".

Коротше кажучи, у вищенаведеному випадку будь-яке значення для метр елемент, який потрапляє в середній регіон, позначений зеленим кольором; решта помаранчеві.

Це не те, чого ми хочемо. Ми хочемо, щоб це було так: Бідні (червоний), Середня (помаранчевий), Добре (зелений)

Оскільки право-область повинна вважатися нашим оптимальним регіоном, ми дамо оптимуму значення, яке потраплятиме в праву область (будь-яке значення між 61-100, у тому числі 61 і 100).

Ми беремо 90 для цього прикладу. Це зробить "оптимальні" для правого регіону, "середній" (найближчий найближчий регіон) - "неоптимальний", а крайній лівий - "не дуже оптимальний" регіон.

Це те, що ми отримаємо на нашому калібрі.

2. Укладка калібру "pH"

По-перше, дихання за значеннями рН. Кислотний розчин має рН менше 7, лужний розчин має рН більше 7, а якщо приземлитися на 7, то це нейтральний розчин.

Таким чином, ми будемо використовувати наступні значення та атрибути:

low = "7" , high = "7", max = "14", і хв буде прийнято значення за замовчуванням нуль.

Перш ніж додати інші атрибути для заповнення коду, визначимося з кольорами: Кислотний (червоний), Нейтральний (білий) і Лужний (синій). Розглянемо також кислу область (ліву область нижче 7) як "оптимальну"

Ось псевдоелементи CSS, які ми будемо націлювати, щоб отримати бажаний візуальний елемент firefox. (Для псевдоелементів webkit лічильника та багато іншого зверніться до посилань, наведених у розділі "посилання".)

 .ph_meter background: lightgrey; ширина: 300px;  .ph_meter: -moz-meter-optimum :: - moz-метр-бар (фон: indianred;  .ph_meter: -moz-meter-sub-optimum :: - moz-метр-бар (фон: antiquewhite;  .ph_meter: -moz-meter-sub-sub-optimum :: - moz-метр-бар (фон: steelblue;  

Ось повний код html і кінцевий результат вимірювача рН.

Список літератури

• Спектр HTML5 лічильника W3C
• Список псевдоелементів і класів webkit
• Список специфічних псевдоелементів постачальника

Докладніше про Hongkiat: Створення та оформлення панелі прогресу з HTML5