Menggunakan dan Melukis HTML5 Meter [Panduan]

Sekiranya anda terbiasa dengan bar kemajuan HTML, yang menunjukkan berapa banyak aktiviti yang telah dilakukan, anda akan mendapati bahawa elemen meter adalah serupa dengannya - kedua-duanya menunjukkan nilai semasa daripada nilai maksimum. Tetapi tidak seperti bar kemajuan, bar meter tidak digunakan untuk menunjukkan kemajuan.

Ia digunakan untuk menunjukkan a nilai statik dalam julat tertentu, sebagai contoh, anda boleh menunjukkan ruang storan yang digunakan dalam storan cakera dengan menunjukkan berapa banyak ruang storan diisi dan berapa banyak yang tidak.

Di samping itu, elemen meter juga boleh digunakan untuk menggambarkan sehingga tiga wilayah dalam julatnya. Menggunakan semula ruang storan, bukan hanya menunjukkan jumlah ruang yang ditempatkan, anda juga boleh menunjukkan secara visual sama ada ruang yang diduduki hanya sedikit diisi (nyatakan di bawah 30%) atau hampir separuh penuh (antara 30 hingga 60%) atau lebih daripada setengah penuh (di atas 60%) menggunakan warna yang berbeza. Ini membantu pengguna mengetahui apabila mereka mencapai had storan.

Dalam siaran ini, kami akan menunjukkan kepada anda bagaimana gaya bar meter bagi kedua-dua tujuan yang dinyatakan iaitu i tolok sederhana (tanpa kawasan yang dinyatakan) dan dua contoh tolok dengan 3 kawasan warna yang ditunjukkan. Bagi yang terakhir, kita akan terus bekerja mewujudkan "tanda" tolok untuk menunjukkan tanda miskin, purata dan baik, dan tolok "pH" untuk menunjukkan nilai pH berasid, saraf dan alkali.

Atribut

Sebelum kita memulakan dengan contoh-contoh dan pergi mendalam, marilah kita melihat dengan cepat senarai yang ada di bawah ini, lebih lanjut mengenai sifat-sifat seperti mungkir mereka, dll. Akan dicakup dalam contoh-contoh.

nilai - Nilai meter elemen
min - Nilai minimum julat meter
maks - Nilai maksima julat meter
rendah - Menunjukkan nilai sempadan yang rendah
tinggi - Menunjukkan nilai sempadan yang tinggi
optimum - Titik optimum dalam julat

1. Styling A Gauge Mudah

Berikut adalah contoh yang sangat mudah menggunakan hanya satu atribut, yang nilai. Sebelum kita meneruskan, kita perlu tahu tiga perkara dahulu:

(1) Terdapat lalai min dan maks nilai yang menentukan julat meter, iaitu 0 dan 1 masing-masing. (2) Sekiranya pengguna ditentukan nilai tidak termasuk dalam meter julat, ia akan mengambil nilai sama ada min atau maks, mana yang paling dekat dengannya. (3) Tag akhir adalah wajib.

Inilah sintaksnya:

0.5

Sebagai alternatif, kita juga boleh menambah min dan maks atribut-atribut dengan itu menyediakan julat didefinisikan pengguna seperti:

2. Styling The "Marks" Gauge

Pertama, kita perlu membahagikan jajaran tersebut kepada tiga wilayah (kiri / rendah, tengah, kanan / tinggi). Ini adalah rendah dan tinggi sifat-sifat yang dimainkan. Inilah bagaimana tiga wilayah dibahagikan.

Tiga rantau dibentuk di antara min & rendah , rendah & tinggi dan tinggi & maks.

Kini jelas bahawa ada syarat-syarat tertentu rendah dan tinggi nilai-nilai sepatutnya diikuti untuk tiga wilayah yang akan dibentuk:

rendah tidak boleh kurang daripada min dan lebih besar daripada tinggi & maks
tinggi tidak boleh lebih besar daripada maks dan kurang daripada rendah & min.
Dan apabila kriteria dipecahkan keduanya rendah dan tinggi akan mengambil nilai pembolehubah lain dalam kriteria yang tidak puas, iaitu jika rendah nilai didapati lebih rendah daripada min yang tidak sepatutnya, rendah akan mendapat min nilai.

Dalam contoh ini, kami akan mempertimbangkan tiga wilayah kami dari kiri ke kanan untuk menjadi:

Miskin: (0-33)
Purata: (34-60)
Baik: (61-100)

Oleh itu, berikut adalah nilai untuk sifat; min = "0" rendah = "34" tinggi = "60" max = "100".

Berikut adalah imej yang menggambarkan kawasan.

Walaupun terdapat tiga wilayah dalam meter yang kami buat sekarang, ia akan menunjukkan hanya dua "jenis" kawasan dalam hanya dua warna pada masa ini. Mengapa? Kerana optimum berada di rantau tengah.

Titik Optimum

Dalam mana-mana rantau (ketiga) optimum Titik jatuh, ia dianggap sebagai "rantau optimum" berwarna hijau secara lalai. Rantau ini segera di sebelahnya dipanggil "rantau sub-optimal" dan ia berwarna oren. Yang paling jauh adalah "rantau yang tidak banyak-yang-optimum", berwarna merah.

Setakat dalam contoh kami, kami tidak memberikan nilai untuk optimum. Oleh itu, nilai lalai menjadi 50, menjadikan rantau tengah "rantau optimum" dan yang betul-betul di sebelahnya (kedua-dua di sebelah kiri dan kanan) sebagai "kawasan sub-optimum".

Pendek kata dalam kes di atas, apa-apa nilai kepada meter unsur yang jatuh ke rantau pertengahan ditunjukkan oleh hijau; selebihnya oren.

Itulah yang kita mahu. Kami mahu ia berwarna seperti ini: Miskin (merah), Purata (oren), Baik (hijau)

Oleh kerana rantau yang tepat perlu dipertimbangkan wilayah optimum kami, kami akan memberikan optimum nilai yang akan jatuh ke wilayah kanan (sebarang nilai antara 61-100, termasuk 61 & 100).

Kami mengambil 90 untuk contoh ini. Ini akan membuat wilayah yang betul "optimum", bahagian tengah (kawasan terdekatnya) "sub-optimal" dan jauh meninggalkan rantau "tidak banyak-optimum".

Ini adalah apa yang kita akan dapat diukur.

2. Styling The "pH" Gauge

Pertama, berehat dengan nilai pH. Larutan berasid mempunyai pH kurang daripada 7, penyelesaian alkali mempunyai pH lebih besar daripada 7 dan jika anda mendarat pada 7, itu adalah penyelesaian neutral.

Oleh itu, kita akan menggunakan nilai dan atribut berikut:

rendah = "7" , tinggi = "7", max = "14", dan juga min akan mengambil nilai lalai sifar.

Sebelum kita menambah baki atribut untuk melengkapkan kod, mari kita tentukan warna: Acidic (merah), Neutral (putih) dan Alkali (biru). Marilah kita juga mempertimbangkan kawasan berasid (rantau kiri di bawah 7) sebagai "optimum"

Ini adalah elemen CSS CSS yang akan kami sasarkan untuk mendapatkan visual yang dikehendaki firefox. (Untuk unsur pseudo meter web dan banyak lagi, rujuk pautan yang disenaraikan di bawah "rujukan".)

 .ph_meter latar belakang: lightgrey; lebar: 300px;  .ph_meter: -moz-meter-optimum :: - moz-meter-bar latar belakang: indianred;  .ph_meter: -moz-meter-suboptimum :: - moz-meter-bar latar belakang: antiquewhite;  .ph_meter: -moz-meter-sub-suboptimum :: - moz-meter-bar latar belakang: steelblue;

Berikut adalah kod html lengkap dan hasil akhir pengukuran pH.

Rujukan

HTML5 Meter W3C spec
Senarai elemen & kelas pseudo webkit
Senarai vendor elemen pseudo tertentu

Lebih lanjut mengenai Hongkiat: Membuat & Memperbaiki Bar Kemajuan Dengan HTML5