Tag meter
Tag meter digunakan untuk memaparkan
beberapa nilai dalam bentuk yang cantik.
Penampilan tag mewakili jalur yang diisi sebahagian atau sepenuhnya. Jalur boleh berwarna hijau, kuning atau merah (warna jalur bergantung pada nilai atribut, tentang ini akan diterangkan kemudian):
Tag meter harus digunakan, sebagai
contoh, dalam situasi berikut: anda ingin
memaparkan nilai suhu semasa pada skrin,
sementara suhu boleh berubah dari 0
hingga 100. Anda harus nyatakan atribut
berikut: atribut value harus menunjukkan
nilai suhu semasa, atribut min
- nilai minimum yang mungkin (dalam kes kami
0), atribut max - nilai maksimum
yang mungkin (dalam kes kami 100).
Bergantung pada nilai atribut value
jalur akan menjadi kecil atau besar. Jika
value dinyatakan dengan nilai 10,
maka jalur akan menjadi kecil (kerana 10
sangat hampir dengan minimum - sifar), jika
nilai 90 dinyatakan, maka jalur akan
menjadi besar (kerana 90 hampir dengan maksimum
- 100). Jika nilai 100 dinyatakan - maka
jalur akan memenuhi keseluruhan elemen (kerana nilai
telah mencapai maksimum).
Jika nilai yang lebih besar daripada 100 dinyatakan,
maka jalur tetap akan memenuhi keseluruhan elemen.
Jika 0 dan kurang dinyatakan - maka jalur
langsung tidak akan kelihatan.
Contoh
Nilai atribut value kecil:
<meter value="10" min="0" max="100"></meter>
:
Contoh
Nilai atribut value besar:
<meter value="90" min="0" max="100"></meter>
:
Contoh
Nilai atribut value sederhana:
<meter value="50" min="0" max="100"></meter>
:
Contoh
Nilai atribut value sama dengan maksimum:
<meter value="100" min="0" max="100"></meter>
:
Contoh
Nilai atribut value sama dengan minimum:
<meter value="0" min="0" max="100"></meter>
:
Contoh
Nilai atribut value lebih besar daripada maksimum:
<meter value="110" min="0" max="100"></meter>
:
Contoh
Nilai atribut value lebih kecil daripada minimum:
<meter value="-10" min="0" max="100"></meter>
:
Menambah atribut low dan high
Dalam tag meter terdapat 2 atribut lagi:
low dan high.
Mari kita lihat cara kerjanya menggunakan contoh suhu.
Ingat bahawa suhu minimum kami
ialah 0, dan maksimum - 100.
Sekarang katakan kami ingin membuat julat berikut
- "suhu sejuk" dari 0 hingga 20,
"normal" dari 20 hingga 80 dan
"panas" dari 80 hingga 100.
Untuk menetapkan suhu sejuk, nyatakan
nilai atribut low sebagai nombor 20.
Ini bermakna, dari sifar (nilai atribut
min) hingga 20 (nilai atribut
low) adalah kawasan nilai rendah.
Untuk menetapkan suhu panas, nyatakan
nilai atribut high sebagai nombor 80.
Ini bermakna, dari 80 (nilai
atribut high) hingga 100 (nilai
atribut max) adalah kawasan nilai
tinggi.
Suhu normal akan dari 20
(nilai atribut low) hingga 80
(nilai atribut high). Kawasan ini
dipanggil kawasan nilai normal.
Sekarang, bergantung pada kawasan mana
nilai atribut value jatuh,
jalur akan diwarnakan dengan warna hijau atau
kuning. Hijau akan, jika jatuh
dalam kawasan nilai normal, dan kuning
- jika dalam kawasan nilai tinggi atau rendah.
Contoh
Nilai atribut value jatuh dalam
kawasan nilai rendah:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Contoh
Nilai atribut value jatuh dalam
kawasan nilai normal:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Contoh
Nilai atribut value jatuh dalam
kawasan nilai tinggi:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Menambah atribut optimum
Atribut optimum menentukan nilai
optimum. Untuk contoh kami, suhu optimum
boleh jadi sejuk, normal
atau panas - mengikut pilihan anda. Katakan,
anda nyatakan bahawa suhu optimum
adalah sejuk. Sekarang, bergantung pada nilai
atribut value (iaitu suhu semasa)
warna jalur akan menjadi hijau,
kuning, atau merah.
Jika suhu semasa jatuh dalam kawasan suhu optimum (dan kami nyatakan bahawa optimum adalah sejuk), maka warna jalur akan menjadi hijau. Jika suhu semasa jatuh dalam julat bersebelahan dengan optimum (dalam kes kami ini adalah suhu normal), maka jalur akan menjadi kuning. Jika suhu semasa jatuh bukan dalam julat bersebelahan dengan optimum (dalam kes kami ini adalah suhu panas), maka jalur akan menjadi merah.
Secara analogi, semua ini akan berlaku jika suhu optimum dinyatakan sebagai panas. Dalam kes ini, jika suhu semasa jatuh dalam kawasan suhu panas - jalur akan menjadi hijau, jika jatuh dalam kawasan normal - kuning, jika dalam kawasan sejuk - merah.
Jika optimum dinyatakan sebagai suhu normal, maka jalur hanya boleh menjadi hijau (jika suhu semasa jatuh dalam normal) atau kuning (jika suhu semasa jatuh dalam julat bersebelahan dengan normal, iaitu panas atau sejuk).
Untuk menentukan julat mana yang optimum,
anda perlu nyatakan dalam nilai atribut
optimum sebarang nombor dari julat tersebut.
Dalam contoh di bawah, nilai atribut optimum
jatuh dalam kawasan nilai rendah
(iaitu suhu sejuk).
Contoh
Nilai atribut value jatuh dalam
kawasan nilai rendah:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Contoh
Nilai atribut value jatuh dalam
kawasan nilai normal:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Contoh
Nilai atribut value jatuh dalam
kawasan nilai tinggi:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Dalam contoh di bawah, nilai atribut optimum
jatuh dalam kawasan nilai tinggi
(iaitu suhu panas).
Contoh
Nilai atribut value jatuh dalam
kawasan nilai rendah:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Contoh
Nilai atribut value jatuh dalam
kawasan nilai normal:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Contoh
Nilai atribut value jatuh dalam
kawasan nilai tinggi:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Dalam contoh di bawah, nilai atribut optimum
jatuh dalam kawasan nilai normal
(iaitu suhu normal).
Contoh
Nilai atribut value jatuh dalam
kawasan nilai rendah:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Contoh
Nilai atribut value jatuh dalam
kawasan nilai normal:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Contoh
Nilai atribut value jatuh dalam
kawasan nilai tinggi:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Pelayar lama
Pelayar lama tidak dapat memaparkan tag meter
dalam bentuk yang cantik dan akan memaparkan sebaliknya
kandungan tag itu sendiri:
<meter value="10" min="0" max="100">Teks ini akan dipaparkan dalam pelayar lama.</meter>
:
Atribut
Nilai atribut boleh menjadi nombor pecahan dan negatif.
| Atribut | Keterangan |
|---|---|
value |
Menetapkan nilai semasa. Atribut wajib. |
min |
Menetapkan nilai minimum yang mungkin. Nilai lalai: 0. |
max |
Menetapkan nilai maksimum yang mungkin. Nilai lalai: 1. |
low |
Menetapkan sempadan kawasan nilai rendah. Nilai rendah akan dari nombor dalam atribut
min hingga nombor dalam atribut low.
|
high |
Menetapkan sempadan kawasan nilai rendah. Nilai rendah akan dari nombor dalam atribut
high hingga nombor dalam atribut max.
|
optimum |
Menentukan kawasan nilai optimum. |
Lihat juga
-
tag
progress,
yang mencipta bar kemajuan.