การใช้และจัดแต่งทรงผมเครื่องมือวัด HTML5 [คำแนะนำ]

หากคุณคุ้นเคยกับแถบความคืบหน้าของ HTML ซึ่งแสดงให้เห็นว่ามีการดำเนินกิจกรรมมากน้อยเพียงใดคุณจะพบว่าองค์ประกอบตัววัดนั้นคล้ายกับ - แสดงค่าปัจจุบันจากค่าสูงสุด. แต่ไม่เหมือนกับแถบความคืบหน้าแถบมาตรวัดจะไม่ถูกใช้เพื่อแสดงความคืบหน้า.

มันถูกใช้เพื่อแสดง ค่าคงที่ในช่วงที่ระบุ, ตัวอย่างเช่นคุณสามารถระบุพื้นที่เก็บข้อมูลที่ใช้ในที่เก็บข้อมูลดิสก์โดยแสดงจำนวนพื้นที่เก็บข้อมูลที่เต็มไปและจำนวนเท่าไร.

ยิ่งไปกว่านั้นองค์ประกอบมิเตอร์ยังสามารถใช้ในการมองเห็นได้ถึงสามภูมิภาคภายในช่วงของมัน ตัวอย่างการนำพื้นที่เก็บข้อมูลมาใช้ใหม่แทนที่จะแสดงว่ามีพื้นที่ว่างเหลืออยู่เท่าไหร่คุณยังสามารถระบุด้วยสายตาว่าพื้นที่ว่างถูกเติมเต็มเพียงเบาบาง (ให้พูดต่ำกว่า 30%) หรือใกล้เต็มครึ่ง (ระหว่าง 30 ถึง 60%) หรือมากกว่า ครึ่งหนึ่ง (มากกว่า 60%) ใช้สีที่ต่างกัน. สิ่งนี้จะช่วยให้ผู้ใช้ทราบเมื่อถึงขีด จำกัด การจัดเก็บ.

ในโพสต์นี้เราจะแสดงให้คุณเห็น วิธีการออกแบบแถบมิเตอร์ สำหรับวัตถุประสงค์ทั้งสองที่กล่าวถึงเช่น วัดง่าย (โดยไม่มีภูมิภาคที่ระบุ) และตัวอย่างของมาตรวัดที่มี 3 ภูมิภาคที่ระบุสี สำหรับหลังเราจะทำงานต่อไป สร้างมาตรวัด "เครื่องหมาย" สำหรับการแสดงคะแนนที่ไม่ดีโดยเฉลี่ยและที่ดีและ มาตรวัด "pH" สำหรับการแสดงค่า pH ที่เป็นกรด, ประสาทและอัลคาไลน์.

แอตทริบิวต์

ก่อนที่เราจะเริ่มต้นด้วยตัวอย่างและดำเนินการเชิงลึกให้เราพิจารณารายการคุณลักษณะด้านล่างอย่างรวดเร็วเพิ่มเติมเกี่ยวกับคุณลักษณะเหล่านี้เช่นค่าเริ่มต้น ฯลฯ จะครอบคลุมในตัวอย่าง.

• ราคา - ค่าของ เมตร ธาตุ
• นาที - ค่าต่ำสุดของช่วงของมิเตอร์
• สูงสุด - ค่าสูงสุดของช่วงของมิเตอร์
• ต่ำ - ระบุค่าขอบเขตต่ำ
• สูง - บ่งชี้ถึงค่าขอบเขตสูง
• สูงสุด - จุดที่เหมาะสมที่สุดในช่วง

1. จัดแต่งทรงผม A Simple Gauge

นี่เป็นตัวอย่างที่ง่ายมากโดยใช้แอตทริบิวต์เดียวเท่านั้น ราคา. ก่อนที่เราจะดำเนินการต่อเราต้องรู้สามสิ่งแรก:

(1) มีค่าเริ่มต้นคือ นาที และ สูงสุด ค่ากำหนดช่วงของ เมตร, ซึ่งคือ 0 และ 1 ตามลำดับ. (2) หากผู้ใช้ระบุ ราคา ไม่ตกอยู่ภายใน เมตร ช่วงมันจะใช้ค่าของทั้ง นาที หรือ สูงสุด, แล้วแต่จำนวนใดจะใกล้เคียงที่สุด. (3) แท็กสิ้นสุดเป็นสิ่งจำเป็น.

นี่คือไวยากรณ์:

 0.5 

นอกจากนี้เรายังสามารถเพิ่ม นาที และ สูงสุด คุณลักษณะจึงให้ช่วงที่ผู้ใช้กำหนดเช่น:

2. จัดแต่งทรงผมมาตรวัด "Marks"

อันดับแรกเราต้องแบ่งช่วงออกเป็นสามภูมิภาค (ซ้าย / ต่ำกลางขวา / สูง) นี่คือ ต่ำ และ สูง คุณลักษณะเข้ามาเล่น นี่คือวิธีแบ่งพื้นที่ทั้งสามออก.

ทั้งสามภูมิภาคเกิดขึ้นระหว่าง นาที & ต่ำ , ต่ำ & สูง และ สูง & สูงสุด.

ตอนนี้เห็นได้ชัดว่ามีเงื่อนไขบางอย่าง ต่ำ และ สูง ค่าควรปฏิบัติตามเพื่อให้เกิดสามภูมิภาค:

• ต่ำ ต้องไม่น้อยกว่า นาที และยิ่งกว่า สูง & สูงสุด
• สูง ไม่สามารถมากกว่าได้ สูงสุด และน้อยกว่า ต่ำ & นาที.
• และเมื่อเกณฑ์ถูกทำลายทั้งคู่ ต่ำ และ สูง จะใช้ค่าของตัวแปรอื่น ๆ ในเกณฑ์ที่ไม่พอใจเช่นหาก ต่ำ พบค่าต่ำกว่า นาที ซึ่งมันไม่ควรจะเป็น, ต่ำ จะได้รับ นาที ราคา.

ในตัวอย่างนี้เราจะพิจารณาจากสามภูมิภาคจากซ้ายไปขวา:

• น่าสงสาร: (0-33)
• เฉลี่ย: (34-60)
• ดี: (61-100)

ดังนั้นต่อไปนี้เป็นค่าสำหรับแอตทริบิวต์; ต่ำสุด = "0" low = "34" high = "60" max = "100".

นี่คือภาพแสดงภาพภูมิภาค.

แม้ว่าจะมีสามภูมิภาคในมิเตอร์ที่เราสร้างขึ้นในขณะนี้ แต่จะระบุเพียงสอง "ชนิด" ของพื้นที่ในสองสีเท่านั้นในขณะนี้ ทำไม? เพราะ สูงสุด อยู่ในช่วงกลาง.

จุดที่เหมาะสม

ในภูมิภาคใด (ของสาม) สูงสุด จุดตกอยู่ในนั้นถือเป็นสีเขียว "ภูมิภาคที่ดีที่สุด" สีโดยค่าเริ่มต้น ภูมิภาคที่อยู่ถัดจากเรียกว่า "ภูมิภาคย่อยที่เหมาะสมที่สุด" และเป็นสีส้ม ส่วนที่ไกลที่สุดคือ "ภูมิภาคที่ไม่เหมาะที่สุด" ซึ่งเป็นสีแดง.

ในตัวอย่างของเราเรายังไม่ได้กำหนดค่าสำหรับ สูงสุด. ดังนั้นค่าเริ่มต้นจะกลายเป็น 50 ทำให้ภูมิภาคกลางเป็น "ภูมิภาคที่ดีที่สุด" และอยู่ถัดจากมัน (ทั้งด้านซ้ายและขวา) เป็น "ภูมิภาคย่อยที่ดีที่สุด".

ในระยะสั้นในกรณีข้างต้นค่าใด ๆ ที่จะ เมตร องค์ประกอบที่ตกลงสู่พื้นที่กลางจะถูกระบุด้วยสีเขียว ส้มที่เหลือ.

นั่นไม่ใช่สิ่งที่เราต้องการ เราต้องการให้สีเป็นแบบนี้: น่าสงสาร (สีแดง), เฉลี่ย (ส้ม), ดี (สีเขียว)

เนื่องจากภูมิภาคที่เหมาะสมได้รับการพิจารณาให้เป็นภูมิภาคที่ดีที่สุดของเราเราจะให้ สูงสุด ค่าที่จะตกอยู่ในภูมิภาคทางขวา (ค่าใด ๆ ระหว่าง 61-100 รวมถึง 61 & 100).

เราใช้ 90 สำหรับตัวอย่างนี้ สิ่งนี้จะทำให้ภูมิภาค "เหมาะสม" กลาง (ขวาถัดจากภูมิภาคถัดไป) "เหมาะสมที่สุด" และอยู่ทางซ้ายสุดของภูมิภาค "ไม่มากนัก".

นี่คือสิ่งที่เราจะได้รับจากมาตรวัดของเรา.

2. จัดแต่งทรงผมเครื่องวัด "pH"

ครั้งแรกที่มีชีวิตอยู่กับค่า pH สารละลายที่เป็นกรดมีค่าความเป็นกรดเป็นด่างน้อยกว่า 7 ส่วนสารละลายที่เป็นด่างมีค่าความเป็นกรดเป็นด่างมากกว่า 7 และถ้าคุณไปถึง 7 นั่นเป็นวิธีที่เป็นกลาง.

ดังนั้นเราจะใช้ค่าและคุณลักษณะต่อไปนี้:

ต่ำ = "7" , สูง = "7", สูงสุด = "14", และ นาที จะใช้ค่าเริ่มต้นเป็นศูนย์.

ก่อนที่เราจะเพิ่มแอททริบิวต์อื่น ๆ เพื่อให้โค้ดสมบูรณ์ให้เราตัดสินใจเลือกสี: ที่เป็นกรด (สีแดง), เป็นกลาง (สีขาว) และ เป็นด่าง (สีน้ำเงิน). ขอให้เราพิจารณาภูมิภาคที่เป็นกรด (ภาคซ้ายด้านล่าง 7) ว่า "ดีที่สุด"

นี่คือองค์ประกอบหลอก CSS ที่เราจะกำหนดเป้าหมายเพื่อให้ได้ภาพที่ต้องการ Firefox. (สำหรับองค์ประกอบหลอกเมตร webkit และอื่น ๆ อ้างอิงลิงค์ที่ระบุไว้ภายใต้ "อ้างอิง".)

 .ph_meter พื้นหลัง: lightgrey; ความกว้าง: 300px;  .ph_meter: -moz-meter-optim :: - moz-meter-bar background: indianred;  .ph_meter: -moz-meter-sub-optim :: - moz-meter-bar พื้นหลัง: antiquewhite;  .ph_meter: -moz-meter-sub-sub ที่เหมาะสม :: - moz-meter-bar พื้นหลัง: steelblue;  

นี่คือรหัส html ที่สมบูรณ์และผลลัพธ์สุดท้ายของมาตรวัดค่า pH.

อ้างอิง

• ข้อมูลจำเพาะ HTML5 Meter W3C
• รายชื่อองค์ประกอบและคลาสหลอกของ webkit
• รายการองค์ประกอบหลอกเฉพาะของผู้ขาย

เพิ่มเติมเกี่ยวกับ Hongkiat: สร้าง & จัดแต่งทรงผมแถบความคืบหน้าด้วย HTML5