110 of 133 menu

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.
Melayu
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Kami menggunakan kuki untuk operasi laman web, analisis dan personalisasi. Pemprosesan data dijalankan mengikut Polisi Kerahsiaan.
terima semua tataletak tolak