Il tag meter
Il tag meter viene utilizzato per visualizzare
un determinato valore in modo graficamente accattivante.
L'aspetto del tag è una barra parzialmente o completamente riempita. La barra può essere verde, gialla o rossa (il colore della barra dipende dai valori degli attributi, ne parleremo più avanti):
Il tag meter dovrebbe essere utilizzato, ad
esempio, nella seguente situazione: si desidera
visualizzare a schermo il valore corrente della temperatura,
considerando che la temperatura può variare da 0
a 100. È necessario specificare i seguenti
attributi: l'attributo value deve indicare
il valore corrente della temperatura, l'attributo min
- il valore minimo possibile (nel nostro
caso 0), l'attributo max - il valore massimo
possibile (nel nostro caso 100).
A seconda del valore dell'attributo value
la barra sarà piccola o grande. Se
si specifica value con valore 10,
la barra sarà piccola (poiché 10
è molto vicino al minimo - zero), se invece
si specifica il valore 90, la barra sarà
grande (poiché 90 è vicino al massimo
- 100). Se si specifica il valore 100 -
la barra occuperà l'intero elemento (poiché il valore
ha raggiunto il massimo).
Se si specifica un valore maggiore di 100,
la barra occuperà comunque l'intero elemento.
Se invece si specifica 0 o meno - la barra
non ci sarà affatto.
Esempio
Il valore dell'attributo value è piccolo:
<meter value="10" min="0" max="100"></meter>
:
Esempio
Il valore dell'attributo value è grande:
<meter value="90" min="0" max="100"></meter>
:
Esempio
Il valore dell'attributo value è medio:
<meter value="50" min="0" max="100"></meter>
:
Esempio
Il valore dell'attributo value è uguale al massimo:
<meter value="100" min="0" max="100"></meter>
:
Esempio
Il valore dell'attributo value è uguale al minimo:
<meter value="0" min="0" max="100"></meter>
:
Esempio
Il valore dell'attributo value è maggiore del massimo:
<meter value="110" min="0" max="100"></meter>
:
Esempio
Il valore dell'attributo value è minore del minimo:
<meter value="-10" min="0" max="100"></meter>
:
Aggiungiamo gli attributi low e high
Nel tag meter ci sono altri 2 attributi:
low e high.
Consideriamo il loro funzionamento con l'esempio della temperatura.
Ricordiamo che la nostra temperatura minima
è 0, mentre quella massima è 100.
Supponiamo ora di voler definire i seguenti intervalli
- "temperatura fredda" da 0 a 20,
"normale" da 20 a 80 e
"calda" da 80 a 100.
Per definire la temperatura fredda, specifichiamo
il valore dell'attributo low come il numero 20.
Risulterà che da zero (questo è il valore dell'attributo
min) a 20 (valore dell'attributo
low) avremo l'area dei valori bassi.
Per definire la temperatura calda, specifichiamo
il valore dell'attributo high come il numero 80.
Risulterà che da 80 (questo è il valore
dell'attributo high) a 100 (valore
dell'attributo max) avremo l'area dei valori alti
.
La temperatura normale sarà da 20
(valore dell'attributo low) a 80
(valore dell'attributo high). Quest'area
verrà chiamata area dei valori normali.
Ora, a seconda dell'area in cui
cade il valore dell'attributo value,
la barra si colorerà di verde o
giallo. Sarà verde se cadiamo
nell'area dei valori normali, e gialla
- se nell'area dei valori alti o bassi.
Esempio
Il valore dell'attributo value cade nell'
area dei valori bassi:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Esempio
Il valore dell'attributo value cade
nell'area dei valori normali:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Esempio
Il valore dell'attributo value cade
nell'area dei valori alti:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Aggiungiamo l'attributo optimum
L'attributo optimum definisce il valore
ottimale. Per il nostro esempio, la temperatura
ottimale potrebbe essere quella fredda, normale
o calda - a vostra scelta. Supponiamo
che specifichiate che la temperatura ottimale
è quella fredda. Ora, a seconda del valore
dell'attributo value (cioè della temperatura
corrente) il colore della barra sarà verde,
giallo o rosso.
Se la temperatura corrente cade nell'area delle temperature ottimali (e abbiamo specificato che quella ottimale è la fredda), allora il colore della barra sarà verde. Se la temperatura corrente cade in un intervallo adiacente a quello ottimale (nel nostro caso la temperatura normale), allora la barra diventerà gialla. Se invece la temperatura corrente cade in un intervallo non adiacente a quello ottimale (nel nostro caso la temperatura calda), allora la barra diventerà rossa.
Analogamente avverrà tutto se si specifica come ottimale la temperatura calda. In questo caso, se la temperatura corrente cade nell'area delle temperature calde - la barra sarà verde, se cade nell'area delle temperature normali - gialla, se nell'area delle temperature fredde - rossa.
Se si specifica come ottimale la temperatura normale, allora la barra potrà essere solo verde (se la temperatura corrente cade in quella normale) o gialla (se la temperatura corrente cade in un intervallo adiacente a quello normale, cioè caldo o freddo).
Per specificare quale intervallo è ottimale,
è necessario specificare come valore dell'attributo
optimum un qualsiasi numero di quell'intervallo.
Negli esempi seguenti, il valore dell'attributo optimum
cade nell'area dei valori bassi
(cioè delle temperature fredde).
Esempio
Il valore dell'attributo value cade nell'
area dei valori bassi:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Esempio
Il valore dell'attributo value cade nell'
area dei valori normali:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Esempio
Il valore dell'attributo value cade nell'
area dei valori alti:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Negli esempi seguenti, il valore dell'attributo optimum
cade nell'area dei valori alti
(cioè delle temperature calde).
Esempio
Il valore dell'attributo value cade nell'
area dei valori bassi:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Esempio
Il valore dell'attributo value cade nell'
area dei valori normali:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Esempio
Il valore dell'attributo value cade nell'
area dei valori alti:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Negli esempi seguenti, il valore dell'attributo optimum
cade nell'area dei valori normali
(cioè delle temperature normali).
Esempio
Il valore dell'attributo value cade nell'
area dei valori bassi:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Esempio
Il valore dell'attributo value cade nell'
area dei valori normali:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Esempio
Il valore dell'attributo value cade nell'
area dei valori alti:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Browser obsoleti
I browser obsoleti non saranno in grado di mostrare il tag meter
in modo grafico e visualizzeranno invece
il contenuto del tag stesso:
<meter value="10" min="0" max="100">Questo testo apparirà nei browser obsoleti.</meter>
:
Attributi
Il valore degli attributi può essere un numero frazionario e negativo.
| Attributo | Descrizione |
|---|---|
value |
Imposta il valore corrente. Attributo obbligatorio. |
min |
Specifica il valore minimo possibile. Valore predefinito: 0. |
max |
Specifica il valore massimo possibile. Valore predefinito: 1. |
low |
Specifica il confine dell'area dei valori bassi. I valori bassi saranno dal numero nell'attributo
min al numero nell'attributo low.
|
high |
Specifica il confine dell'area dei valori alti. I valori alti saranno dal numero nell'attributo
high al numero nell'attributo max.
|
optimum |
Definisce l'area dei valori ottimali. |
Vedi anche
-
il tag
progress,
che crea una barra di caricamento.
