Η ετικέτα meter
Η ετικέτα meter χρησιμοποιείται για την εμφάνιση
μιας τιμής σε ελκυστική μορφοποίηση.
Η εμφάνιση της ετικέτας μοιάζει με μια μερικώς ή πλήρως γεμισμένη μπάρα. Η μπάρα μπορεί να είναι πράσινη, κίτρινη ή κόκκινη (το χρώμα της μπάρας εξαρτάται από τις τιμές των χαρακτηριστικών, περισσότερα για αυτό παρακάτω):
Η ετικέτα meter πρέπει να χρησιμοποιείται, για
παράδειγμα, στην ακόλουθη κατάσταση: θέλετε να
εμφανίσετε στην οθόνη την τρέχουσα τιμή της θερμοκρασίας,
ενώ η θερμοκρασία μπορεί να κυμαίνεται από 0
έως 100. Θα πρέπει να ορίσετε τα ακόλουθα
χαρακτηριστικά: το χαρακτηριστικό value πρέπει να καθορίζει
την τρέχουσα τιμή θερμοκρασίας, το χαρακτηριστικό min
- την ελάχιστη δυνατή τιμή (στην περίπτωσή μας 0), το χαρακτηριστικό max - τη μέγιστη
δυνατή (στην περίπτωσή μας 100).
Ανάλογα με την τιμή του χαρακτηριστικού value
η μπάρα θα είναι μικρή ή μεγάλη. Αν
ορίσετε το value στην τιμή 10,
τότε η μπάρα θα είναι μικρή (καθώς το 10
βρίσκεται πολύ κοντά στο ελάχιστο - στο μηδέν), ενώ αν
ορίσετε την τιμή 90, τότε η μπάρα θα είναι
μεγάλη (καθώς το 90 βρίσκεται κοντά στο μέγιστο
- στο 100). Αν ορίσετε την τιμή 100 - τότε
η μπάρα θα καταλάβει ολόκληρο το στοιχείο (καθώς η τιμή
έφτασε το μέγιστο).
Αν ορίσετε τιμή μεγαλύτερη από 100,
τότε η μπάρα θα καταλαμβάνει ολόκληρο το στοιχείο.
Ενώ αν ορίσετε 0 ή λιγότερο - τότε η μπάρα
δεν θα εμφανίζεται καθόλου.
Παράδειγμα
Η τιμή του χαρακτηριστικού value είναι μικρή:
<meter value="10" min="0" max="100"></meter>
:
Παράδειγμα
Η τιμή του χαρακτηριστικού value είναι μεγάλη:
<meter value="90" min="0" max="100"></meter>
:
Παράδειγμα
Η τιμή του χαρακτηριστικού value είναι μεσαία:
<meter value="50" min="0" max="100"></meter>
:
Παράδειγμα
Η τιμή του χαρακτηριστικού value είναι ίση με τη μέγιστη:
<meter value="100" min="0" max="100"></meter>
:
Παράδειγμα
Η τιμή του χαρακτηριστικού value είναι ίση με την ελάχιστη:
<meter value="0" min="0" max="100"></meter>
:
Παράδειγμα
Η τιμή του χαρακτηριστικού value είναι μεγαλύτερη από τη μέγιστη:
<meter value="110" min="0" max="100"></meter>
:
Παράδειγμα
Η τιμή του χαρακτηριστικού value είναι μικρότερη από την ελάχιστη:
<meter value="-10" min="0" max="100"></meter>
:
Προσθήκη χαρακτηριστικών low και high
Στην ετικέτα meter υπάρχουν 2 ακόμη χαρακτηριστικά:
low και high.
Ας εξετάσουμε τη λειτουργία τους χρησιμοποιώντας τη θερμοκρασία ως παράδειγμα.
Υπενθυμίζω ότι η ελάχιστη θερμοκρασία μας
είναι 0, και η μέγιστη - 100.
Ας υποθέσουμε τώρα ότι θέλουμε να ορίσουμε τα ακόλουθα εύρη
- "κρύα θερμοκρασία" από 0 έως 20,
"κανονική" από 20 έως 80 και
"ζεστή" από 80 έως 100.
Για να ορίσουμε τη κρύα θερμοκρασία, θα ορίσουμε
ως τιμή του χαρακτηριστικού low τον αριθμό 20.
Θα προκύψει ότι από το μηδέν (αυτή είναι η τιμή του χαρακτηριστικού
min) έως 20 (τιμή του χαρακτηριστικού
low) έχουμε περιοχή χαμηλών τιμών.
Για να ορίσουμε τη ζεστή θερμοκρασία, θα ορίσουμε
ως τιμή του χαρακτηριστικού high τον αριθμό 80.
Θα προκύψει ότι από 80 (αυτή είναι η τιμή
του χαρακτηριστικού high) έως 100 (τιμή
του χαρακτηριστικού max) έχουμε περιοχή υψηλών
τιμών.
Η κανονική θερμοκρασία θα είναι από 20
(αυτή είναι η τιμή του χαρακτηριστικού low) έως 80
(τιμή του χαρακτηριστικού high). Αυτήν την περιοχή
θα την ονομάσουμε περιοχή κανονικών τιμών.
Τώρα, ανάλογα με το σε ποια περιοχή
εμπίπτει η τιμή του χαρακτηριστικού value,
η μπάρα θα χρωματίζεται με πράσινο ή
κίτρινο χρώμα. Πράσινο θα είναι, αν εμπέσουμε
στην περιοχή κανονικών τιμών, και κίτρινο
- αν βρισκόμαστε στην περιοχή υψηλών ή χαμηλών τιμών.
Παράδειγμα
Η τιμή του χαρακτηριστικού value εμπίπτει στην
περιοχή χαμηλών τιμών:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Παράδειγμα
Η τιμή του χαρακτηριστικού value εμπίπτει στην
περιοχή κανονικών τιμών:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Παράδειγμα
Η τιμή του χαρακτηριστικού value εμπίπτει στην
περιοχή υψηλών τιμών:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Προσθήκη χαρακτηριστικού optimum
Το χαρακτηριστικό optimum καθορίζει τη βέλτιστη
τιμή. Για το παράδειγμά μας η βέλτιστη
μπορεί να είναι η κρύα θερμοκρασία, η κανονική
ή η ζεστή - ανάλογα με την επιλογή σας. Ας υποθέσουμε,
ότι ορίσετε ότι η βέλτιστη θερμοκρασία
είναι η κρύα. Τώρα, ανάλογα με την τιμή
του χαρακτηριστικού value (δηλαδή από την τρέχουσα
θερμοκρασία) το χρώμα της μπάρας θα είναι πράσινο,
κίτρινο ή κόκκινο.
Αν η τρέχουσα θερμοκρασία εμπίπτει στην περιοχή των βέλτιστων θερμοκρασιών (και εμείς ορίσαμε, ότι η βέλτιστη είναι η κρύα), τότε το χρώμα της μπάρας θα είναι πράσινο. Αν η τρέχουσα θερμοκρασία εμπίπτει στο γειτονικό με τη βέλτιστη εύρος (στην περίπτωσή μας αυτή είναι η κανονική θερμοκρασία), τότε η μπάρα θα γίνει κίτρινη. Αν όμως η τρέχουσα θερμοκρασία εμπίπτει σε μη γειτονικό με τη βέλτιστη εύρος (στην περίπτωσή μας αυτή είναι η ζεστή θερμοκρασία), τότε η μπάρα θα γίνει κόκκινη.
Παρόμοια θα συμβαίνει, αν η βέλτιστη θερμοκρασία οριστεί ως η ζεστή. Σε αυτήν την περίπτωση, αν η τρέχουσα θερμοκρασία εμπέσει στην περιοχή των ζεστών θερμοκρασιών - η μπάρα θα είναι πράσινη, αν εμπέσει στην περιοχή των κανονικών - κίτρινη, αν στην περιοχή των κρύων - κόκκινη.
Αν η βέλτιστη οριστεί ως η κανονική θερμοκρασία, τότε η μπάρα μπορεί να είναι μόνο πράσινη (αν η τρέχουσα θερμοκρασία εμπέσει στην κανονική) ή κίτρινη (αν η τρέχουσα θερμοκρασία εμπέσει στη γειτονική της κανονικής θερμοκρασίας, δηλαδή στην ζεστή ή στην κρύα).
Για να καθορίσετε ποιο εύρος είναι το βέλτιστο,
πρέπει να ορίσετε ως τιμή του χαρακτηριστικού
optimum οποιονδήποτε αριθμό από αυτό το εύρος.
Στα παρακάτω παραδείγματα η τιμή του χαρακτηριστικού optimum
εμπίπτει στην περιοχή χαμηλών τιμών
(δηλαδή στις κρύες θερμοκρασίες).
Παράδειγμα
Η τιμή του χαρακτηριστικού value εμπίπτει στην
περιοχή χαμηλών τιμών:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Παράδειγμα
Η τιμή του χαρακτηριστικού value εμπίπτει στην
περιοχή κανονικών τιμών:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Παράδειγμα
Η τιμή του χαρακτηριστικού value εμπίπτει στην
περιοχή υψηλών τιμών:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Στα παρακάτω παραδείγματα η τιμή του χαρακτηριστικού optimum
εμπίπτει στην περιοχή υψηλών τιμών
(δηλαδή στις ζεστές θερμοκρασίες).
Παράδειγμα
Η τιμή του χαρακτηριστικού value εμπίπτει στην
περιοχή χαμηλών τιμών:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Παράδειγμα
Η τιμή του χαρακτηριστικού value εμπίπτει στην
περιοχή κανονικών τιμών:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Παράδειγμα
Η τιμή του χαρακτηριστικού value εμπίπτει στην
περιοχή υψηλών τιμών:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Στα παρακάτω παραδείγματα η τιμή του χαρακτηριστικού optimum
εμπίπτει στην περιοχή κανονικών τιμών
(δηλαδή στις κανονικές θερμοκρασίες).
Παράδειγμα
Η τιμή του χαρακτηριστικού value εμπίπτει στην
περιοχή χαμηλών τιμών:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Παράδειγμα
Η τιμή του χαρακτηριστικού value εμπίπτει στην
περιοχή κανονικών τιμών:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Παράδειγμα
Η τιμή του χαρακτηριστικού value εμπίπτει στην
περιοχή υψηλών τιμών:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Παλαιότερα προγράμματα περιήγησης
Τα παλαιότερα προγράμματα περιήγησης δεν μπορούν να εμφανίσουν την ετικέτα meter
σε ελκυστική μορφή και θα εμφανίζουν αντί αυτού
το περιεχόμενο της ίδιας της ετικέτας:
<meter value="10" min="0" max="100">Αυτό το κείμενο θα εμφανιστεί σε παλαιότερα προγράμματα περιήγησης.</meter>
:
Χαρακτηριστικά
Η τιμή των χαρακτηριστικών μπορεί να είναι κλασματικός και αρνητικός αριθμός.
| Χαρακτηριστικό | Περιγραφή |
|---|---|
value |
Ορίζει την τρέχουσα τιμή. Υποχρεωτικό χαρακτηριστικό. |
min |
Ορίζει την ελάχιστη δυνατή τιμή. Προεπιλεγμένη τιμή: 0. |
max |
Ορίζει τη μέγιστη δυνατή τιμή. Προεπιλεγμένη τιμή: 1. |
low |
Ορίζει το όριο της περιοχής χαμηλών τιμών. Οι χαμηλές τιμές θα είναι από τον αριθμό στο χαρακτηριστικό
min έως τον αριθμό στο χαρακτηριστικό low.
|
high |
Ορίζει το όριο της περιοχής χαμηλών τιμών. Οι χαμηλές τιμές θα είναι από τον αριθμό στο χαρακτηριστικό
high έως τον αριθμό στο χαρακτηριστικό max.
|
optimum |
Καθορίζει την περιοχή των βέλτιστων τιμών. |
Δείτε επίσης
-
την ετικέτα
progress,
η οποία δημιουργεί μια μπάρα προόδου.