Używanie i stylizacja miernika HTML5 [Przewodnik]

Jeśli znasz pasek postępu HTML, który pokazuje, ile działań zostało wykonane, przekonasz się, że element miernika jest podobny do tego - oba pokaż bieżącą wartość z maksymalnej wartości. Ale w przeciwieństwie do paska postępu, pasek miernika nie może być używany do pokazywania postępu.

Służy do pokazania a wartość statyczna w określonym zakresie, na przykład można wskazać przestrzeń pamięci używaną w pamięci dyskowej, pokazując, ile miejsca w pamięci jest zapełnione, a ile nie.

Ponadto element miernika może być również używany do wizualizacji do trzech regionów w jego zasięgu. Ponowne użycie przykładu przestrzeni do przechowywania, zamiast pokazania tylko, ile miejsca jest zajęte, możesz również wizualnie wskazać, czy zajmowane miejsce jest tylko rzadko wypełnione (powiedzmy poniżej 30%) lub prawie połowa (od 30 do 60%) lub więcej niż połowa pełna (powyżej 60%) przy użyciu różnych kolorów. Dzięki temu użytkownicy wiedzą, kiedy osiągają limit pamięci.

W tym poście pokażemy Ci jak stylować pasek miernika dla obu celów wymienionych tj. a prosty miernik (bez wskazanych regionów) i dwa przykłady wskaźników z 3 regionami wskazanymi kolorem. W tym ostatnim będziemy pracować tworzenie wskaźnika „znaków” za pokazywanie słabych, średnich i dobrych ocen oraz wskaźnik „pH” do pokazywania kwaśnych, nerwowych i zasadowych wartości pH.

Atrybuty

Zanim zaczniemy od przykładów i zagłębimy się w szczegóły, rzućmy okiem na ich listę atrybutów poniżej, więcej o tych atrybutach, takich jak ich wartości domyślne itp. Zostaną omówione w przykładach.

wartość - Wartość metr element
min - Minimalna wartość zakresu miernika
max - Maksymalna wartość zakresu miernika
Niska - Wskazuje niską wartość graniczną
wysoki - Wskazuje wysoką wartość graniczną
optymalny - Optymalny punkt w zakresie

1. Stylizacja prostego miernika

Oto bardzo prosty przykład używający tylko jednego atrybutu wartość. Zanim przejdziemy dalej, musimy najpierw poznać trzy rzeczy:

(1) Domyślnie min i max wartość określająca zakres metr, który wynosi odpowiednio 0 i 1.. (2) Jeśli określono przez użytkownika wartość nie mieści się w metr zakres, będzie przyjmować wartość albo min lub max, cokolwiek jest najbliżej. (3) Tag końcowy jest obowiązkowy.

Oto składnia:

0,5

Alternatywnie możemy również dodać min i max atrybuty zapewniające zakres zdefiniowany przez użytkownika, taki jak:

2. Stylizacja wskaźnika „Marks”

Najpierw musimy podzielić zakres na trzy regiony (lewy / niski, środkowy, prawy / wysoki). Tak było Niska i wysoki w grę wchodzą atrybuty. W ten sposób trzy regiony są podzielone.

Trzy regiony tworzą się pomiędzy min & Niska , Niska & wysoki i wysoki & max.

Teraz jest oczywiste, że istnieją pewne warunki Niska i wysoki wartości powinny być następujące dla trzech tworzonych regionów:

Niska nie może być mniejsza niż min i większy niż wysoki & max
wysoki nie może być większa niż max i mniej niż Niska & min.
A kiedy kryteria zostaną złamane, oba Niska i wysoki przejmie wartość innej zmiennej w kryteriach, które nie są spełnione, tj. jeśli Niska wartość jest niższa niż min co nie powinno być, Niska dostanie min wartość.

W tym przykładzie uznamy nasze trzy regiony od lewej do prawej za:

Ubogi: (0-33)
Średni: (34-60)
Dobry: (61-100)

Stąd następujące wartości są atrybutami; min = "0" niski = "34" wysoki = "60" max = "100".

Oto obraz wizualizujący regiony.

Mimo że są trzy regiony w liczniku, który właśnie stworzyliśmy, będą wskazywać tylko dwa „rodzaje” regionów tylko w dwóch kolorach. Czemu? Bo optymalny jest w środkowym regionie.

Punkt optymalny

W dowolnym regionie (z trzech) optymalny punkt wpada, domyślnie jest uważany za „region optymalny” w kolorze zielonym. Region (y) bezpośrednio obok niego nazywany jest „regionem suboptymalnym” i ma kolor pomarańczowy. Ten najdalszy jest „regionem mało optymalnym”, w kolorze czerwonym.

Do tej pory w naszym przykładzie nie przypisaliśmy wartości dla optymalny. Stąd domyślna wartość to 50, co sprawia, że środkowy region jest „regionem optymalnym”, a te tuż obok niego (zarówno po lewej, jak i prawej stronie) jako „regiony nieoptymalne”.

W skrócie w powyższym przypadku, każda wartość do metr element, który wpada do środkowego regionu, jest oznaczony kolorem zielonym; reszta pomarańczowa.

Tego nie chcemy. Chcemy, aby kolor był taki: Ubogi (czerwony), Średni (Pomarańczowy), Dobry (Zielony)

Ponieważ prawy region ma być uważany za nasz optymalny region, damy optymalny wartość, która wpadnie w prawy region (dowolna wartość między 61-100, w tym 61 i 100).

Bierzemy 90 na ten przykład. To sprawi, że prawy region będzie „optymalny”, środek (jego najbliższy następny region) „nieoptymalny”, a najdalszy pozostanie regionem „mało optymalnym”.

Oto, co otrzymamy na naszym mierniku.

2. Stylizacja miernika „pH”

Po pierwsze, oddychanie na wartości pH. PH roztworu kwaśnego jest niższe niż 7, roztwór alkaliczny ma wartość pH większą niż 7, a jeśli wylądujesz na 7, to jest to neutralny roztwór.

Dlatego użyjemy następujących wartości i atrybutów:

niski = „7” , wysoki = „7”, max = "14", i min przyjmie domyślną wartość zero.

Zanim dodamy pozostałe atrybuty do uzupełnienia kodu, zdecydujmy się na kolory: Kwaśny (czerwony), Neutralny (biały) i Alkaliczny (niebieski). Rozważmy również region kwaśny (lewy region poniżej 7) jako „optymalny”

Oto pseudoelementy CSS, do których będziemy dążyć, aby uzyskać pożądany efekt wizualny firefox. (W przypadku pseudoelementów licznika webkitów i więcej, odnieś się do linków wymienionych pod „odnośnik”)

 .ph_meter background: lightgrey; szerokość: 300px;  .ph_meter: -moz-meter-optimum :: - moz-meter-bar background: indianred;  .ph_meter: -moz-meter-sub-optimum :: - moz-meter-bar background: antiquewhite;  .ph_meter: -moz-meter-sub-sub-optimum :: - moz-meter-bar background: steelblue;

Oto kompletny kod html i końcowy wynik miernika pH.

Referencje

Specyfikacja HTML5 Meter W3C
Lista pseudo elementów i klas webkit
Lista pseudoelementów specyficznych dla dostawcy

Więcej informacji o Hongkiat: Pasek postępu tworzenia i stylizacji z HTML5