HTML5-Meter verwenden und gestalten [Anleitung]

Wenn Sie mit der HTML-Fortschrittsleiste vertraut sind, die zeigt, wie viel von einer Aktivität ausgeführt wurde, werden Sie feststellen, dass das Meter-Element diesem Element ähnlich ist - beides Zeigt einen aktuellen Wert aus einem Maximalwert an. Im Gegensatz zum Fortschrittsbalken darf der Zählerbalken jedoch nicht zur Anzeige des Fortschritts verwendet werden.

Es wird verwendet, um a anzuzeigen statischer Wert in einem bestimmten Bereich, Sie können beispielsweise den in einem Plattenspeicher belegten Speicherplatz angeben, indem Sie anzeigen, wie viel Speicherplatz belegt ist und wie viel nicht.

Darüber hinaus können mit dem Zählerelement auch bis zu drei Bereiche innerhalb seines Bereichs dargestellt werden. Wenn Sie beispielsweise den Speicherplatz wiederverwenden, können Sie nicht nur anzeigen, wie viel Speicherplatz belegt ist, sondern Sie können auch visuell angeben, ob der belegte Speicherplatz nur spärlich gefüllt ist (etwa unter 30%) oder fast halb voll (zwischen 30 bis 60%) oder mehr als halbvoll (über 60%) mit verschiedenen Farben. Dies hilft den Benutzern, zu wissen, wann sie das Speicherlimit erreichen.

In diesem Beitrag zeigen wir es Ihnen wie man die Meterleiste gestaltet für beide genannten Zwecke, d.h. einfaches Messgerät (ohne angezeigte Bereiche) und zwei Beispiele für Messgeräte mit drei farblich gekennzeichneten Bereichen. Für Letzteres arbeiten wir weiter Erstellen eines "Noten" -Messgeräts für schlechte, durchschnittliche und gute Noten, und ein "pH" -Messgerät zur Anzeige saurer, neuronaler und alkalischer pH-Werte.

Attribute

Bevor wir mit den Beispielen beginnen und ausführlich vorgehen, werfen wir einen kurzen Blick auf die Liste der unten aufgeführten Attribute. Weitere Informationen zu diesen Attributen wie ihren Standardwerten usw. werden in den Beispielen behandelt.

Wert - Der Wert von Meter Element
Mindest - Der Mindestwert des Messbereichs
max - Der maximale Wert des Messbereichs
niedrig - Gibt den unteren Grenzwert an
hoch - Gibt den oberen Grenzwert an
Optimum - Der optimale Punkt im Bereich

1. Eine einfache Lehre gestalten

Hier ist ein sehr einfaches Beispiel, das nur ein Attribut verwendet, das Wert. Bevor wir fortfahren, müssen wir zuerst drei Dinge wissen:

(1) Es gibt einen Standardwert Mindest und max Wert, der den Bereich von Meter, welches ist 0 bzw. 1. (2) Wenn der Benutzer angegeben hat Wert fällt nicht in die Meter Bereich, nimmt es den Wert von entweder Mindest oder max, was auch immer es am nächsten ist. (3) Das Ending-Tag ist obligatorisch.

Hier ist die Syntax:

0,5

Alternativ können wir auch hinzufügen Mindest und max Attribute, die so einen benutzerdefinierten Bereich bereitstellen:

2. Anpassen der Anzeige "Marken"

Zuerst müssen wir den Bereich in drei Bereiche unterteilen (links / tief, mittel, rechts / hoch). Das ist gewesen niedrig und hoch Attribute kommen ins Spiel. So sind die drei Regionen aufgeteilt.

Die drei Regionen sind dazwischen gebildet Mindest & niedrig , niedrig & hoch und hoch & max.

Nun ist es offensichtlich, dass es bestimmte Bedingungen gibt niedrig und hoch Werte sollten für die drei zu bildenden Regionen folgen:

niedrig kann nicht kleiner sein als Mindest und größer als hoch & max
hoch kann nicht größer sein als max und weniger als niedrig & Mindest.
Und wenn ein Kriterium gebrochen wird niedrig und hoch nimmt den Wert der anderen Variablen in den Kriterien an, die nicht erfüllt sind, d. h niedrig Wert ist niedriger als Mindest was es nicht sein sollte, niedrig werde das bekommen Mindest Wert.

In diesem Beispiel betrachten wir unsere drei Regionen von links nach rechts als:

Arm: (0-33)
Durchschnittlich: (34-60)
Gut: (61-100)

Daher sind die folgenden Werte für die Attribute; min = "0 low" = 34 hoch "= 60" max = "100".

Hier ist ein Bild, das die Regionen visualisiert.

Auch wenn der gerade erstellte Zähler drei Bereiche enthält, werden im Moment nur zwei "Arten" von Bereichen in nur zwei Farben angezeigt. Warum? weil Optimum ist in der Mitte der Region.

Optimaler Punkt

In welcher Region auch immer (von den drei) Optimum Punkt fällt in, es wird als "optimale Region" standardmäßig grün gefärbt betrachtet. Die Region (en) unmittelbar daneben wird "suboptimale Region" genannt und ist orange gefärbt. Die am weitesten entfernte Region ist eine "nicht viel optimale Region", rot gefärbt.

In unserem Beispiel haben wir bisher noch keinen Wert für angegeben Optimum. Daher wird der Standardwert 50, wodurch die mittlere Region zur "optimalen Region" und die direkt daneben (sowohl links als auch rechts) zu "suboptimalen Regionen" wird..

Kurz gesagt, in dem oben genannten Fall jeder Wert auf Meter Das Element, das in die Mitte fällt, wird durch Grün angezeigt. der Rest orange.

Das wollen wir nicht. Wir möchten, dass es so gefärbt wird: Arm (rot), Durchschnittlich (Orange), Gut (Grün)

Da die richtige Region als unsere optimale Region betrachtet werden soll, werden wir geben Optimum ein Wert, der in den rechten Bereich fällt (jeder Wert zwischen 61-100, einschließlich 61 und 100).

Wir nehmen 90 für dieses Beispiel. Dies macht die rechte Region "optimal", die Mitte (ihre unmittelbare nächste Region) "suboptimal" und die ganz links die "nicht viel von einem optimalen" Region.

Das werden wir mit unserem Maßstab messen.

2. Styling Die "pH" -Anzeige

Zunächst eine Verschnaufpause bei den pH-Werten. Eine saure Lösung hat einen pH-Wert von weniger als 7, eine alkalische Lösung einen pH-Wert von mehr als 7 und wenn Sie auf 7 landen, ist dies eine neutrale Lösung.

Daher verwenden wir die folgenden Werte und Attribute:

niedrig = "7" , hoch = "7", max = "14", und das Mindest nimmt den Standardwert von Null.

Bevor wir die restlichen Attribute hinzufügen, um den Code zu vervollständigen, müssen wir uns für Farben entscheiden: Sauer (rot), Neutral (weiß) und Alkalisch (Blau). Betrachten wir auch den sauren Bereich (linker Bereich unter 7) als "optimal".

Hier sind die CSS-Pseudo-Elemente, mit denen wir das gewünschte Bild erstellen möchten Feuerfuchs. (Informationen zu Pseudoelementen des Webkit-Meters und mehr finden Sie in den Links unter "Referenz".)

 .ph_meter hintergrund: hellgrau; Breite: 300px;  .ph_meter: -moz-meter-optimal :: - moz-meter-bar background: indianred;  .ph_meter: -moz-meter-sub-optimal :: - moz-meter-bar hintergrund: antiquewhite;  .ph_meter: -moz-meter-sub-sub-optimal :: - moz-meter-bar Hintergrund: Stahlblau;

Hier ist der vollständige HTML-Code und das Endergebnis des pH-Messgeräts.

Verweise

HTML5 Meter W3C-Spezifikation
Liste der Pseudoelemente und Klassen des Webkits
Liste herstellerspezifischer Pseudoelemente

Weitere Informationen zu Hongkiat: Erstellen und Gestalten von Fortschrittsbalken mit HTML5