Guida e uso dello strumento HTML5 [Guida]

Se hai familiarità con la barra di avanzamento HTML, che mostra quanta attività è stata eseguita, scoprirai che l'elemento meter è simile a quello - entrambi mostra un valore corrente fuori da un valore massimo. Ma a differenza della barra di avanzamento, la barra del misuratore non deve essere utilizzata per mostrare i progressi.

È usato per mostrare a valore statico in un intervallo specifico, ad esempio, è possibile indicare lo spazio di archiviazione utilizzato nella memoria del disco mostrando quanto spazio di memoria è stato riempito e quanto non lo è.

Inoltre, l'elemento meter può essere utilizzato anche per visualizzare fino a tre regioni all'interno del suo intervallo. Riutilizzando l'esempio dello spazio di archiviazione, invece di mostrare solo quanto spazio è occupato, puoi anche indicare visivamente se lo spazio occupato è solo pieno (meno del 30%) o quasi pieno (tra il 30 e il 60%) o più mezzo pieno (superiore al 60%) utilizzando colori diversi. Questo aiuta gli utenti a sapere quando raggiungono il limite di archiviazione.

In questo post, ti mostreremo come modellare la barra del contatore per entrambi gli scopi citati, cioè a calibro semplice (senza regioni indicate) e due esempi di indicatori con 3 regioni indicate dal colore. Per quest'ultimo, lavoreremo su creando un indicatore di "segni" per mostrare voti medi, mediocri e buoni, e un indicatore di "pH" per mostrare valori di pH acidi, neurali e alcalini.

attributi

Prima di iniziare con gli esempi e approfondire, diamo una rapida occhiata al suo elenco di attributi di seguito, più su questi attributi come i loro valori predefiniti, ecc. Saranno trattati negli esempi.

valore - Il valore del metro elemento
min - Il valore minimo dell'intervallo del misuratore
max - Il valore massimo dell'intervallo del misuratore
Basso - Indica il valore limite inferiore
alto - Indica il valore limite alto
ottimale - Il punto ottimale nell'intervallo

1. Styling A Simple Gauge

Ecco un esempio molto semplice che utilizza un solo attributo, il valore. Prima di procedere, dobbiamo prima sapere tre cose:

(1) C'è un valore predefinito min e max valore che definisce l'intervallo di metro, che è rispettivamente 0 e 1. (2) Se specificato dall'utente valore non rientra nel metro gamma, prenderà il valore di entrambi min o max, a seconda di quale sia il più vicino. (3) Il tag Ending è obbligatorio.

Ecco la sintassi:

0.5

In alternativa, possiamo anche aggiungere min e max attributi così fornendo un intervallo definito dall'utente in questo modo:

2. Styling Il calibro "Marchi"

Innanzitutto, dobbiamo dividere l'intervallo in tre regioni (sinistra / bassa, media, destra / alta). Questo è stato Basso e alto gli attributi entrano in gioco. Ecco come sono suddivise le tre regioni.

Le tre regioni sono formate tra min & Basso , Basso & alto e alto & max.

Ora è ovvio che ci sono determinate condizioni Basso e alto i valori dovrebbero seguire per le tre regioni da formare:

Basso non può essere inferiore a min e più grande di alto & max
alto non può essere più grande di max e meno di Basso & min.
E quando un criterio è rotto entrambi Basso e alto assumerà il valore dell'altra variabile nei criteri che non sono soddisfatti, cioè se Basso il valore è trovato inferiore a min quale non dovrebbe essere, Basso otterrà il min valore.

In questo esempio, considereremo le nostre tre regioni da sinistra a destra per essere:

Povero: (0-33)
Media: (34-60)
Buono: (61-100)

Quindi, i seguenti sono valori per gli attributi; min = "0" basso = "34" alto = "60" max = "100".

Ecco un'immagine che visualizza le regioni.

Anche se ci sono tre regioni nel contatore che abbiamo creato proprio ora, indicherà solo due "tipi" di regioni in soli due colori al momento. Perché? Perché ottimale è nella metà regione.

Punto ottimale

In qualsiasi regione (dei tre) il ottimale il punto cade, è considerato come una "regione ottimale" di colore verde per impostazione predefinita. La regione (s) immediatamente accanto è chiamata "regione sub-ottimale" ed è di colore arancione. Quello più lontano è una "regione non molto buona", di colore rosso.

Finora nel nostro esempio non abbiamo assegnato un valore per ottimale. Quindi, il valore predefinito diventa 50, rendendo la regione centrale la "regione ottimale" e quelle adiacenti (entrambe a sinistra e a destra) come "regioni sub-ottimali".

In breve, nel caso precedente, qualsiasi valore per il metro l'elemento che cade nella regione centrale è indicato dal verde; il resto arancione.

Non è quello che vogliamo. Lo vogliamo colorato in questo modo: Povero (rosso), Media (arancia), Buono (verde)

Dato che la regione giusta è da considerarsi la nostra regione ottimale, la daremo ottimale un valore che cadrà nella giusta regione (qualsiasi valore compreso tra 61 e 100, compresi 61 e 100).

Stiamo prendendo 90 per questo esempio. Ciò renderà la regione giusta "ottimale", la metà (la sua regione immediatamente successiva) "sub-ottimale" e l'estrema sinistra la regione "non molto di uno ottimale".

Questo è ciò che otterremo dal nostro indicatore.

2. Styling Il calibro "pH"

In primo luogo, uno sfiato sui valori di pH. Una soluzione acida ha un pH inferiore a 7, una soluzione alcalina ha un pH superiore a 7 e se atterri su 7, questa è una soluzione neutra.

Quindi, useremo i seguenti valori e attributi:

basso = "7" , alta = "7", max = "14", e il min prenderà il valore predefinito di zero.

Prima di aggiungere il resto degli attributi per completare il codice, decidiamo sui colori: acida (rosso), Neutro (bianco) e Alcalino (blu). Consideriamo anche la regione acida (parte sinistra sotto 7) come "ottimale"

Qui ci sono gli elementi pseudo CSS che avremo come target per ottenere l'immagine desiderata firefox. (Per gli pseudo-elementi del misuratore webkit e altro ancora, fare riferimento ai collegamenti elencati sotto "riferimento".)

 .ph_meter background: lightgrey; larghezza: 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 background: steelblue;

Ecco il codice html completo e il risultato finale dell'indicatore di pH.

Riferimenti

HTML5 Meter W3C spec
Elenco di pseudo elementi e classi del webkit
Elenco di pseudo elementi specifici del fornitore

Altro su Hongkiat: Creazione e styling Barra di avanzamento con HTML5