Sử dụng và tạo kiểu máy đo HTML5 [Hướng dẫn]
Nếu bạn quen thuộc với thanh tiến trình HTML, cho biết mức độ hoạt động đã được thực hiện, bạn sẽ thấy rằng phần tử mét tương tự như vậy - cả hai hiển thị giá trị hiện tại trong số giá trị tối đa. Nhưng không giống như thanh tiến trình, thanh đo không được sử dụng để hiển thị tiến trình.
Nó được sử dụng để hiển thị một giá trị tĩnh trong một phạm vi cụ thể, ví dụ: bạn có thể chỉ ra không gian lưu trữ được sử dụng trong bộ lưu trữ đĩa bằng cách hiển thị bao nhiêu không gian lưu trữ được lấp đầy và bao nhiêu không.
Trên hết, phần tử mét cũng có thể được sử dụng để hiển thị tối đa ba vùng trong phạm vi của nó. Sử dụng lại ví dụ về không gian lưu trữ, thay vì chỉ hiển thị bao nhiêu dung lượng bị chiếm dụng, bạn cũng có thể chỉ ra một cách trực quan xem không gian bị chiếm dụng chỉ được lấp đầy một cách thưa thớt (giả sử dưới 30%) hoặc gần một nửa (từ 30 đến 60%) hoặc hơn một nửa đầy đủ (trên 60%) sử dụng các màu khác nhau. Điều này giúp người dùng biết khi nào họ đạt đến giới hạn lưu trữ.
Trong bài đăng này, chúng tôi sẽ cho bạn thấy làm thế nào để phong cách thanh mét cho cả hai mục đích được đề cập, tức là a máy đo đơn giản (không có vùng được chỉ định) và hai ví dụ về đồng hồ đo có 3 vùng được chỉ định màu. Để sau này, chúng tôi sẽ làm việc trên tạo ra một "đánh dấu" cho thấy điểm kém, trung bình và tốt, và máy đo "pH" để hiển thị giá trị pH axit, thần kinh và kiềm.
Thuộc tính
Trước khi bắt đầu với các ví dụ và đi sâu, chúng ta hãy xem nhanh danh sách các thuộc tính bên dưới, thông tin thêm về các thuộc tính này như mặc định của chúng, v.v. sẽ được đề cập trong các ví dụ.
giá trị- Giá trị củamétthành phầntối thiểu- Giá trị tối thiểu của phạm vi của đồng hồtối đa- Giá trị tối đa của phạm vi của đồng hồthấp- Cho biết giá trị biên thấpcao- Cho biết giá trị biên caotối ưu- Điểm tối ưu trong phạm vi
1. Tạo kiểu tóc đơn giản
Đây là một ví dụ rất đơn giản chỉ sử dụng một thuộc tính, giá trị. Trước khi tiến hành, chúng ta cần biết ba điều trước:
(1) Có một mặc định tối thiểu và tối đa giá trị xác định phạm vi mét, lần lượt là 0 và 1. (2) Nếu người dùng chỉ định giá trị không nằm trong mét phạm vi, nó sẽ lấy giá trị của một trong hai tối thiểu hoặc là tối đa, bất cứ nơi nào gần nhất. (3) Thẻ kết thúc là bắt buộc.
Đây là cú pháp:
0,5
Ngoài ra, chúng tôi cũng có thể thêm tối thiểu và tối đa do đó các thuộc tính cung cấp một phạm vi do người dùng xác định như vậy:
2. Tạo kiểu đo "Marks"
Đầu tiên, chúng ta cần chia phạm vi thành ba vùng (trái / thấp, giữa, phải / cao). Đây là thấp và cao thuộc tính đi vào chơi. Đây là cách chia ba vùng.
Ba vùng được hình thành giữa tối thiểu & thấp , thấp & cao và cao & tối đa.
Bây giờ rõ ràng là có một số điều kiện nhất định thấp và cao các giá trị phải tuân theo cho ba vùng được hình thành:
thấpkhông thể nhỏ hơntối thiểuvà lớn hơncao&tối đacaokhông thể lớn hơntối đavà ít hơnthấp&tối thiểu.- Và khi một tiêu chí bị phá vỡ cả
thấpvàcaosẽ đảm nhận giá trị của biến khác trong các tiêu chí không thỏa mãn, tức là nếuthấpgiá trị được tìm thấy thấp hơntối thiểumà nó không nên,thấpsẽ nhận đượctối thiểugiá trị.
Trong ví dụ này, chúng tôi sẽ xem xét ba khu vực của chúng tôi từ trái sang phải là:
- Nghèo nàn: (0-33)
- Trung bình cộng: (34-60)
- Tốt: (61-100)
Do đó, sau đây là các giá trị cho các thuộc tính; min = "0" thấp = "34" cao = "60" max = "100".
Đây là một hình ảnh trực quan các khu vực.
Mặc dù có ba vùng trong mét mà chúng ta vừa tạo, nhưng nó sẽ chỉ cho biết hai "loại" vùng chỉ có hai màu tại thời điểm này. Tại sao? Bởi vì tối ưu nằm ở giữa.
Điểm tối ưu
Trong khu vực nào (trong ba) tối ưu điểm rơi vào, mặc định nó được coi là "vùng tối ưu" có màu xanh lá cây. (Các) khu vực ngay bên cạnh nó được gọi là "khu vực tối ưu phụ" và nó có màu cam. Nơi xa nhất là một "khu vực không tối ưu", có màu đỏ.
Cho đến nay trong ví dụ của chúng tôi, chúng tôi chưa gán giá trị cho tối ưu. Do đó, giá trị mặc định trở thành 50, biến vùng giữa thành "vùng tối ưu" và vùng bên phải (cả bên trái và bên phải) là "vùng tối ưu phụ".
Tóm lại trong trường hợp trên, bất kỳ giá trị nào cho mét yếu tố rơi vào khu vực giữa được biểu thị bằng màu xanh lá cây; phần còn lại màu cam.
Đó không phải là những gì chúng ta muốn. Chúng tôi muốn nó được tô màu theo cách này: Nghèo nàn (màu đỏ), Trung bình cộng (trái cam), Tốt (màu xanh lá)
Vì khu vực bên phải được coi là khu vực tối ưu của chúng tôi, chúng tôi sẽ cung cấp cho tối ưu một giá trị sẽ rơi vào vùng bên phải (bất kỳ giá trị nào trong khoảng từ 61 đến 100, bao gồm 61 & 100).
Chúng tôi đang lấy 90 cho ví dụ này. Điều này sẽ làm cho khu vực bên phải "tối ưu", giữa (khu vực tiếp theo ngay lập tức) "tối ưu phụ" và xa hơn khu vực "không nhiều của tối ưu".
Đây là những gì chúng ta sẽ nhận được trên thước đo của chúng tôi.
2. Tạo kiểu đo "pH"
Đầu tiên, hít thở về các giá trị pH. Dung dịch axit có độ pH nhỏ hơn 7, dung dịch kiềm có độ pH lớn hơn 7 và nếu bạn hạ cánh trên 7, đó là dung dịch trung tính.
Vì vậy, chúng tôi sẽ sử dụng các giá trị và thuộc tính sau:
thấp = "7" , cao = "7", tối đa = "14", và tối thiểu sẽ lấy giá trị mặc định bằng không.
Trước khi chúng tôi thêm phần còn lại của các thuộc tính để hoàn thành mã, hãy để chúng tôi quyết định về màu sắc: Có tính axit (màu đỏ), Trung tính (trắng) và Kiềm (màu xanh da trời). Chúng ta cũng coi vùng axit (vùng bên trái dưới 7) là "tối ưu"
Dưới đây là các yếu tố giả CSS mà chúng tôi sẽ nhắm mục tiêu để có được hình ảnh mong muốn trong lửa. (Đối với các yếu tố giả máy đo webkit và hơn thế nữa, hãy tham khảo các liên kết được liệt kê trong "tham chiếu".)
.ph_meter nền: lightgrey; chiều rộng: 300px; .ph_meter: -moz-mét-optimum :: - moz-mét-bar nền: Ấn Độ; .ph_meter: -moz-mét-sub-optimum :: - moz-mét-bar nền: antiquewhite; .ph_meter: -moz-mét-sub-sub-optimum :: - moz-mét-bar nền: Steelblue;
Đây là mã html hoàn chỉnh và kết quả cuối cùng của máy đo pH.
Tài liệu tham khảo
- Thông số kỹ thuật HTML5 W3C
- Danh sách các phần tử & lớp giả webkit
- Danh sách các yếu tố giả cụ thể của nhà cung cấp
Thông tin thêm về Hongkiat: Tạo & Tạo kiểu thanh tiến trình với HTML5
