Penggunaan dan Styling HTML5 Meter [Panduan]

Jika Anda terbiasa dengan bilah kemajuan HTML, yang menunjukkan seberapa banyak aktivitas telah dilakukan, Anda akan menemukan bahwa elemen meter mirip dengan itu - keduanya menunjukkan nilai saat ini dari nilai maksimum. Tetapi tidak seperti bilah kemajuan, bilah meter tidak digunakan untuk menunjukkan kemajuan.

Digunakan untuk menunjukkan a nilai statis dalam rentang tertentu, misalnya Anda dapat menunjukkan ruang penyimpanan yang digunakan dalam penyimpanan disk dengan menunjukkan berapa banyak ruang penyimpanan yang diisi dan berapa banyak yang tidak.

Selain itu, elemen meter juga dapat digunakan untuk memvisualisasikan hingga tiga wilayah dalam jangkauannya. Menggunakan kembali contoh ruang penyimpanan, alih-alih hanya menunjukkan berapa banyak ruang yang digunakan, Anda juga dapat secara visual menunjukkan apakah ruang yang ditempati hanya diisi sedikit (misalkan di bawah 30%) atau hampir setengah penuh (antara 30 hingga 60%) atau lebih dari setengah penuh (di atas 60%) menggunakan warna yang berbeda. Ini membantu pengguna mengetahui kapan mereka mencapai batas penyimpanan.

Dalam posting ini, kami akan menunjukkan kepada Anda cara mengatur bilah meter untuk kedua tujuan tersebut yaitu: a pengukur sederhana (tanpa wilayah yang diindikasikan) dan dua contoh pengukur dengan 3 wilayah yang diindikasikan warna. Untuk yang terakhir, kami akan bekerja membuat ukuran "tanda" untuk menunjukkan nilai yang buruk, rata-rata dan bagus, dan pengukur "pH" untuk menunjukkan nilai pH asam, saraf dan alkali.

Atribut

Sebelum kita mulai dengan contoh-contoh dan masuk lebih dalam, mari kita melihat sekilas daftar atribut di bawah ini, lebih lanjut tentang atribut-atribut ini seperti standarnya, dll. Akan dibahas dalam contoh.

nilai - Nilai dari meter elemen
min - Nilai minimum dari rentang meteran
maks - Nilai maksimum dari rentang meteran
rendah - Menunjukkan nilai batas rendah
tinggi - Menunjukkan nilai batas tinggi
optimal - Titik optimal dalam kisaran

1. Styling Alat Ukur Sederhana

Berikut adalah contoh yang sangat sederhana dengan hanya menggunakan satu atribut, yaitu nilai. Sebelum kita melanjutkan, kita perlu mengetahui tiga hal terlebih dahulu:

(1) Ada yang standar min dan maks nilai yang menentukan kisaran meter, yaitu 0 dan 1 masing-masing. (2) Jika ditentukan pengguna nilai tidak termasuk dalam meter rentang, itu akan mengambil nilai baik min atau maks, mana yang paling dekat dengannya. (3) Tag Pengakhiran adalah wajib.

Berikut ini sintaksnya:

0,5

Atau, kita juga bisa menambahkan min dan maks atribut dengan demikian menyediakan rentang yang ditentukan pengguna seperti:

2. Styling Pengukur "Tanda"

Pertama, kita perlu membagi rentang menjadi tiga wilayah (kiri / rendah, tengah, kanan / tinggi). Ini dulu rendah dan tinggi atribut ikut bermain. Beginilah cara ketiga wilayah itu dibagi.

Tiga daerah terbentuk di antaranya min & rendah , rendah & tinggi dan tinggi & maks.

Sekarang jelas bahwa ada kondisi tertentu rendah dan tinggi nilai-nilai harus mengikuti untuk tiga wilayah yang akan dibentuk:

rendah tidak boleh kurang dari min dan lebih besar dari tinggi & maks
tinggi tidak boleh lebih besar dari maks dan kurang dari rendah & min.
Dan ketika kriteria rusak keduanya rendah dan tinggi akan mengambil nilai variabel lain dalam kriteria yang tidak terpenuhi, yaitu jika rendah nilai ditemukan lebih rendah dari min yang seharusnya tidak, rendah akan mendapatkan min nilai.

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

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

Oleh karena itu, berikut ini adalah nilai untuk atribut; min = "0" rendah = "34" tinggi = "60" maks = "100".

Berikut adalah gambar yang memvisualisasikan daerah.

Meskipun ada tiga wilayah dalam meter yang kami buat sekarang, itu akan menunjukkan hanya dua "jenis" daerah hanya dalam dua warna saat ini. Mengapa? Karena optimal berada di wilayah tengah.

Titik optimal

Di wilayah mana pun (dari ketiganya) optimal titik jatuh, itu dianggap sebagai "wilayah optimal" berwarna hijau secara default. Wilayah tepat di sebelahnya disebut "wilayah sub-optimal" dan berwarna oranye. Yang paling jauh adalah "daerah yang tidak terlalu optimal", berwarna merah.

Sejauh ini dalam contoh kami, kami belum menetapkan nilai untuk optimal. Oleh karena itu, nilai default menjadi 50, menjadikan mid-region sebagai "region optimal" dan yang berada di sebelahnya (baik di kiri dan kanan) sebagai "sub-optimal region".

Singkatnya dalam kasus di atas, nilai apa pun untuk meter elemen yang jatuh ke wilayah tengah ditandai dengan warna hijau; sisanya berwarna oranye.

Bukan itu yang kita inginkan. Kami ingin diwarnai dengan cara ini: Miskin (merah), Rata-rata (Jeruk), Baik (hijau)

Karena wilayah kanan akan dianggap sebagai wilayah optimal kami, kami akan memberikan optimal nilai yang akan jatuh ke wilayah kanan (nilai antara 61-100, termasuk 61 & 100).

Kami mengambil 90 untuk contoh ini. Ini akan membuat daerah kanan "optimal", tengah (daerah berikutnya langsung) "sub-optimal" dan paling kiri wilayah "tidak-jauh-dari-optimal".

Inilah yang akan kita dapatkan pada ukuran kita.

2. Styling Pengukur "pH"

Pertama, menghirup nilai-nilai pH. Larutan asam memiliki pH kurang dari 7, larutan alkali memiliki pH lebih besar dari 7 dan jika Anda mendarat di 7, itu adalah larutan netral.

Dengan demikian, kami akan menggunakan nilai dan atribut berikut:

rendah = "7" , tinggi = "7", maks = "14", dan min akan mengambil nilai default nol.

Sebelum kita menambahkan sisa atribut untuk menyelesaikan kode, mari kita tentukan warna: Bersifat asam (merah), Netral (putih) dan Basa (biru). Mari kita juga menganggap daerah asam (daerah kiri di bawah 7) sebagai "optimal"

Berikut adalah elemen pseudo CSS yang akan kami targetkan untuk mendapatkan visual yang diinginkan firefox. (Untuk elemen pseudo meteran webkit dan lainnya, lihat tautan yang tercantum di bawah "referensi".)

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

Berikut ini adalah kode html lengkap dan hasil akhir dari pengukur pH.

Referensi

HTML5 Meter W3C spec
Daftar elemen pseudo & kelas webkit
Daftar elemen pseudo khusus vendor

Lebih lanjut tentang Hongkiat: Membuat & Memajukan Progress Bar Dengan HTML5