Thẻ meter

Thẻ meter được sử dụng để hiển thị một giá trị nào đó một cách đẹp mắt.

Hình thức bên ngoài của thẻ biểu thị bằng một thanh được tô màu một phần hoặc hoàn toàn. Thanh có thể có màu xanh lá, vàng hoặc đỏ (màu của thanh phụ thuộc vào giá trị của các thuộc tính, về điều này sẽ nói bên dưới):

Thẻ meter nên được sử dụng, chẳng hạn như trong tình huống sau: bạn muốn hiển thị lên màn hình giá trị nhiệt độ hiện tại, trong khi đó nhiệt độ có thể thay đổi từ 0 đến 100. Bạn nên chỉ định các thuộc tính sau: thuộc tính value phải chỉ định giá trị nhiệt độ hiện tại, thuộc tính min - giá trị tối thiểu có thể có (trong trường hợp của chúng ta là 0), thuộc tính max - giá trị tối đa có thể có (trong trường hợp của chúng ta là 100).

Tùy thuộc vào giá trị của thuộc tính value thanh sẽ nhỏ hay lớn. Nếu chỉ định value với giá trị 10, thì thanh sẽ nhỏ (vì 10 rất gần với mức tối thiểu - với số không), nếu chỉ định giá trị 90, thì thanh sẽ lớn (vì 90 gần với mức tối đa - với 100). Nếu chỉ định giá trị 100 - thì thanh sẽ chiếm toàn bộ phần tử (vì giá trị đạt tới mức tối đa).

Nếu chỉ định giá trị, lớn hơn 100, thì thanh vẫn sẽ chiếm toàn bộ phần tử. Nếu chỉ định 0 và nhỏ hơn - thì sẽ không có thanh nào cả.

Ví dụ

Giá trị thuộc tính value nhỏ:

:

Ví dụ

Giá trị thuộc tính value lớn:

:

Ví dụ

Giá trị thuộc tính value trung bình:

:

Ví dụ

Giá trị thuộc tính value bằng giá trị tối đa:

:

Ví dụ

Giá trị thuộc tính value bằng giá trị tối thiểu:

:

Ví dụ

Giá trị thuộc tính value lớn hơn giá trị tối đa:

:

Ví dụ

Giá trị thuộc tính value nhỏ hơn giá trị tối thiểu:

:

Thêm các thuộc tính low và high

Trong thẻ meter còn có 2 thuộc tính: low và high.

Hãy xem xét hoạt động của chúng qua ví dụ về nhiệt độ. Nhắc lại rằng nhiệt độ tối thiểu của chúng ta bằng 0, còn nhiệt độ tối đa - 100. Bây giờ giả sử chúng ta muốn tạo các khoảng giá trị sau - "nhiệt độ lạnh" từ 0 đến 20, "bình thường" từ 20 đến 80 và "nóng" từ 80 đến 100.

Để đặt nhiệt độ lạnh, hãy chỉ định giá trị của thuộc tính low là số 20. Sẽ có được rằng từ số không (đây là giá trị của thuộc tính min) đến 20 (giá trị của thuộc tính low) chúng ta có vùng giá trị thấp.

Để đặt nhiệt độ nóng, hãy chỉ định giá trị của thuộc tính high là số 80. Sẽ có được rằng từ 80 (đây là giá trị của thuộc tính high) đến 100 (giá trị của thuộc tính max) chúng ta có vùng giá trị cao .

Nhiệt độ bình thường sẽ từ 20 (đây là giá trị của thuộc tính low) đến 80 (giá trị của thuộc tính high). Vùng này sẽ được gọi là vùng giá trị bình thường.

Bây giờ, tùy thuộc vào việc giá trị thuộc tính value rơi vào vùng nào, thanh sẽ được tô màu xanh lá cây hoặc màu vàng. Màu xanh lá sẽ có, nếu chúng ta rơi vào vùng giá trị bình thường, còn màu vàng - nếu vào vùng giá trị cao hoặc thấp.

Ví dụ

Giá trị thuộc tính value rơi vào vùng giá trị thấp:

:

Ví dụ

Giá trị thuộc tính value rơi vào vùng giá trị bình thường:

:

Ví dụ

Giá trị thuộc tính value rơi vào vùng giá trị cao:

:

Thêm thuộc tính optimum

Thuộc tính optimum xác định giá trị tối ưu. Đối với ví dụ của chúng ta, giá trị tối ưu có thể là nhiệt độ lạnh, bình thường hoặc nóng - tùy theo lựa chọn của bạn. Giả sử, rằng bạn chỉ định rằng nhiệt độ tối ưu là nhiệt độ lạnh. Bây giờ, tùy thuộc vào giá trị của thuộc tính value (tức là nhiệt độ hiện tại) màu của thanh sẽ là xanh lá, vàng hoặc đỏ.

Nếu nhiệt độ hiện tại rơi vào vùng nhiệt độ tối ưu (và chúng ta đã chỉ định rằng nhiệt độ tối ưu là lạnh), thì màu của thanh sẽ là xanh lá. Nếu nhiệt độ hiện tại rơi vào khoảng liền kề với khoảng tối ưu (trong trường hợp của chúng ta đây là nhiệt độ bình thường), thì thanh sẽ chuyển thành màu vàng. Nếu nhiệt độ hiện tại rơi vào khoảng không liền kề với khoảng tối ưu (trong trường hợp của chúng ta đây là nhiệt độ nóng), thì thanh sẽ chuyển thành màu đỏ.

Tương tự như vậy, mọi thứ sẽ diễn ra, nếu chỉ định nhiệt độ nóng là tối ưu. Trong trường hợp này, nếu nhiệt độ hiện tại rơi vào vùng nhiệt độ nóng - thanh sẽ có màu xanh lá, nếu rơi vào vùng nhiệt độ bình thường - vàng, nếu rơi vào vùng nhiệt độ lạnh - đỏ.

Nếu chỉ định nhiệt độ bình thường là tối ưu, thì thanh chỉ có thể có màu xanh lá (nếu nhiệt độ hiện tại rơi vào vùng bình thường) hoặc màu vàng (nếu nhiệt độ hiện tại rơi vào khoảng liền kề với nhiệt độ bình thường, mà đây là nhiệt độ nóng hoặc lạnh).

Để chỉ định, khoảng nào là tối ưu, cần chỉ định trong giá trị của thuộc tính optimum bất kỳ số nào từ khoảng đó.

Trong các ví dụ bên dưới, giá trị thuộc tính optimum rơi vào vùng giá trị thấp (tức là nhiệt độ lạnh).

Ví dụ

Giá trị thuộc tính value rơi vào vùng giá trị thấp:

:

Ví dụ

Giá trị thuộc tính value rơi vào vùng giá trị bình thường:

:

Ví dụ

Giá trị thuộc tính value rơi vào vùng giá trị cao:

:

Trong các ví dụ bên dưới, giá trị thuộc tính optimum rơi vào vùng giá trị cao (tức là nhiệt độ nóng).

Ví dụ

Giá trị thuộc tính value rơi vào vùng giá trị thấp:

:

Ví dụ

Giá trị thuộc tính value rơi vào vùng giá trị bình thường:

:

Ví dụ

Giá trị thuộc tính value rơi vào vùng giá trị cao:

:

---

Trong các ví dụ bên dưới, giá trị thuộc tính optimum rơi vào vùng giá trị bình thường (tức là nhiệt độ bình thường).

Ví dụ

Giá trị thuộc tính value rơi vào vùng giá trị thấp:

:

Ví dụ

Giá trị thuộc tính value rơi vào vùng giá trị bình thường:

:

Ví dụ

Giá trị thuộc tính value rơi vào vùng giá trị cao:

:

Trình duyệt cũ

Các trình duyệt cũ sẽ không thể hiển thị thẻ meter một cách đẹp mắt và sẽ hiển thị thay vào đó nội dung bên trong của chính thẻ:

:

Thuộc tính

Giá trị của các thuộc tính có thể là số thập phân và số âm.

Thuộc tính	Mô tả
value	Thiết lập giá trị hiện tại. Thuộc tính bắt buộc.
min	Chỉ định giá trị tối thiểu có thể có. Giá trị mặc định: 0.
max	Chỉ định giá trị tối đa có thể có. Giá trị mặc định: 1.
low	Chỉ định ranh giới của vùng giá trị thấp. Các giá trị thấp sẽ là từ số trong thuộc tính min đến số trong thuộc tính low.
high	Chỉ định ranh giới của vùng giá trị cao. Các giá trị cao sẽ là từ số trong thuộc tính high đến số trong thuộc tính max.
optimum	Xác định vùng giá trị tối ưu.

Xem thêm