HTML5-meter gebruiken en stylen [Guide]

Als u bekend bent met de HTML-voortgangsbalk, die aangeeft hoeveel van een activiteit is uitgevoerd, zult u merken dat het meterelement vergelijkbaar is met dat - beide toon een huidige waarde van een maximale waarde. Maar in tegenstelling tot de voortgangsbalk, moet de meterbalk niet worden gebruikt om de voortgang weer te geven.

Het wordt gebruikt om een statische waarde in een specifiek bereik, U kunt bijvoorbeeld de opslagruimte aangeven die wordt gebruikt in een schijfopslag door aan te geven hoeveel van de opslagruimte is gevuld en hoeveel dat niet is.

Bovendien kan het meterelement ook worden gebruikt om maximaal drie regio's binnen het bereik ervan te visualiseren. Hergebruik van het voorbeeld van de opslagruimte, in plaats van alleen te laten zien hoeveel ruimte bezet is, kunt u ook visueel aangeven of de bezette ruimte slechts spaarzaam is gevuld (laten we zeggen minder dan 30%) of bijna half vol (tussen 30 tot 60%) of meer dan halfvol (boven 60%) met verschillende kleuren. Dit helpt de gebruikers te weten wanneer ze de opslaglimiet bereiken.

In dit bericht laten we je zien hoe de meterstaaf te vormen voor beide genoemde doelen, d.w.z. eenvoudige meter (zonder aangegeven regio's) en twee voorbeelden van meters met 3 in kleur aangegeven gebieden. Voor de laatste zullen we werken het creëren van een "markeringen" -meter voor het tonen van slechte, gemiddelde en goede cijfers, en een "pH" -meter voor het tonen van zure, neurale en alkalische pH-waarden.

attributen

Voordat we met de voorbeelden beginnen en dieper gaan, laten we eerst de onderstaande lijst met kenmerken bekijken, meer over deze kenmerken, zoals hun standaardwaarden, enz. Worden behandeld in de voorbeelden..

waarde - De waarde van de meter element
min - De minimale waarde van het bereik van de meter
max - De maximale waarde van het bereik van de meter
laag - Geeft de lage grenswaarde aan
hoog - Geeft de hoge grenswaarde aan
optimum - Het optimale punt in het bereik

1. Styling A Simple Gauge

Hier is een heel eenvoudig voorbeeld met slechts één attribuut, de waarde. Voordat we verder gaan, moeten we eerst drie dingen weten:

(1) Er is een standaard min en max waarde die het bereik van definieert meter, wat respectievelijk 0 en 1 is. (2) Als de gebruiker opgegeven waarde valt niet binnen de meter bereik, het zal de waarde van een van beide aannemen min of max, wat het het dichtst benadert. (3) De Ending-tag is verplicht.

Hier is de syntaxis:

0.5

Als alternatief kunnen we ook toevoegen min en max attributen waardoor een door de gebruiker gedefinieerd bereik wordt geboden, zoals:

2. Styling De "Marks" -meter

Eerst moeten we het bereik verdelen in drie regio's (links / laag, midden, rechts / hoog). Dit is waar laag en hoog attributen komen om de hoek kijken. Dit is hoe de drie regio's verdeeld zijn.

De drie regio's zijn gevormd tussen min & laag , laag & hoog en hoog & max.

Nu is het duidelijk dat er bepaalde voorwaarden zijn laag en hoog waarden moeten volgen voor de drie te vormen regio's:

laag kan niet minder zijn dan min en groter dan hoog & max
hoog kan niet groter zijn dan max en minder dan laag & min.
En wanneer een criterium wordt gebroken beide laag en hoog zal de waarde van de andere variabele aannemen in de criteria waaraan niet wordt voldaan, d.w.z. indien laag waarde wordt lager gevonden dan min wat het niet zou moeten zijn, laag zal de min waarde.

In dit voorbeeld beschouwen we onze drie regio's van links naar rechts als:

Arm: (0-33)
Gemiddelde: (34-60)
Goed: (61-100)

Daarom zijn de volgende waarden voor de attributen; min = "0" low = "34" high = "60" max = "100".

Hier is een afbeelding die de regio's visualiseert.

Hoewel er op dit moment drie gebieden in de meter zijn die we hebben gemaakt, worden op dit moment slechts twee soorten regio's in slechts twee kleuren weergegeven. Waarom? Omdat optimum bevindt zich in de middenregio.

Optimaal punt

In welke regio (van de drie) de optimum punt valt in, het wordt standaard beschouwd als een "optimaal gebied" dat groen gekleurd is. De regio ('s) direct ernaast wordt het "suboptimale gebied" genoemd en het is oranje gekleurd. De meest verafgelegen is een "niet-veel-van-een-optimale regio", rood gekleurd.

Tot nu toe hebben we in ons voorbeeld geen waarde toegekend voor optimum. Daarom wordt de standaardwaarde 50, waardoor het middengebied het "optimale gebied" is en degenen die ernaast staan (zowel links als rechts) als "suboptimale regio's".

Kortom in het bovenstaande geval, elke waarde voor de meter het element dat in het middengebied valt, wordt aangegeven met groen; de rest oranje.

Dat is niet wat we willen. We willen het op deze manier gekleurd: Arm (rood), Gemiddelde (oranje), Goed (groen)

Omdat de juiste regio als onze optimale regio moet worden beschouwd, zullen we geven optimum een waarde die in de rechterregio valt (elke waarde tussen 61 - 100, inclusief 61 en 100).

We nemen 90 voor dit voorbeeld. Dit maakt de juiste regio "optimaal", de middelste (zijn onmiddellijke volgende regio) "suboptimaal" en helemaal links de "niet-veel-van-een-optimale" regio.

Dit is wat we op onze meter zullen krijgen.

2. Styling De "pH" -meter

Ten eerste een adempauze op pH-waarden. Een zure oplossing heeft een pH van minder dan 7, een alkalische oplossing heeft een pH van meer dan 7 en als u op 7 landt, is dat een neutrale oplossing.

We zullen dus de volgende waarden en attributen gebruiken:

lage = "7" , hoge = "7", max = "14", en de min neemt de standaardwaarde van nul.

Voordat we de rest van de kenmerken toevoegen om de code te voltooien, moeten we eerst de kleuren bepalen: zure (rood), Neutrale (wit) en Alkalisch (blauw). Laten we ook het zure gebied (links-gebied onder 7) als "optimaal" beschouwen

Hier zijn de CSS pseudo-elementen die we zullen targeten om het gewenste visuele te krijgen firefox. (Voor de pseudo-elementen van de webkit-meter en meer, raadpleegt u de links onder "verwijzing".)

 .ph_meter achtergrond: lichtgrijs; breedte: 300 px;  .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 achtergrond: staalblauw;

Hier is de complete html-code en het eindresultaat van de pH-meter.

Referenties

HTML5 Meter W3C spec
Lijst met webkit pseudo-elementen en klassen
Lijst met leverancierspecifieke pseudo-elementen

Meer over Hongkiat: voortgangsbalk maken en stylen met HTML5