استخدام وتصميم HTML5 متر [الدليل]

إذا كنت معتادًا على شريط تقدم HTML ، والذي يوضح مقدار النشاط الذي تم تنفيذه ، فستجد أن عنصر المقياس مشابه لذلك - كلاهما إظهار القيمة الحالية من الحد الأقصى للقيمة. ولكن على عكس شريط التقدم ، لا يجب استخدام شريط العدادات لإظهار التقدم.

يتم استخدامه لإظهار قيمة ثابتة في نطاق معين, على سبيل المثال ، يمكنك الإشارة إلى مساحة التخزين المستخدمة في تخزين القرص من خلال إظهار مقدار مساحة التخزين المملوءة ومقدار مساحة التخزين.

علاوة على ذلك ، يمكن أيضًا استخدام عنصر القياس لتصور ما يصل إلى ثلاث مناطق داخل مداها. عند إعادة استخدام مثال مساحة التخزين ، بدلاً من إظهار مقدار المساحة المشغولة فقط ، يمكنك أيضًا الإشارة بصريًا إلى ما إذا كانت المساحة المشغولة قليلة المساحة فقط (دعنا نقول أقل من 30٪) أو بالقرب من نصف ممتلئة (بين 30 إلى 60٪) أو أكثر نصف ممتلئة (أعلى من 60 ٪) باستخدام ألوان مختلفة. هذا يساعد المستخدمين على معرفة متى يصلون إلى الحد الأقصى للتخزين.

في هذا المنشور ، سنريك كيفية نمط شريط متر لكل من الأغراض المذكورة أي مقياس بسيط (مع عدم وجود المناطق المشار إليها) ومثالين من أجهزة القياس مع 3 مناطق اللون المشار إليها. لهذا الأخير ، سوف نعمل على إنشاء مقياس "علامات" لإظهار علامات سيئة ، متوسطة وجيدة ، و مقياس "الرقم الهيدروجيني" لإظهار القيم الحمضية الحمضية والعصبية والقلوية.

سمات

قبل أن نبدأ بالأمثلة والتعمق ، دعنا نلقي نظرة سريعة على قائمة السمات أدناه ، وسيتم تغطية المزيد عن هذه السمات مثل الإعدادات الافتراضية ، وما إلى ذلك في الأمثلة.

القيمة - قيمة متر جزء
دقيقة - الحد الأدنى لقيمة مدى العداد
ماكس - القيمة القصوى لنطاق العداد
منخفض - يشير إلى قيمة الحدود المنخفضة
متوسط - يشير إلى قيمة الحدود العالية
الأمثل - النقطة المثلى في النطاق

1. تصميم مقياس بسيط

إليك مثال بسيط للغاية باستخدام سمة واحدة فقط ، هي القيمة. قبل المتابعة ، نحتاج إلى معرفة ثلاثة أشياء أولاً:

(1) هناك الافتراضي دقيقة و ماكس قيمة تحديد نطاق متر, وهو 0 و 1 على التوالي. (2) إذا كان المستخدم المحدد القيمة لا تقع داخل متر مجموعة ، وسوف يستغرق قيمة إما دقيقة أو ماكس, أيهما أقرب إلى. (3) علامة إنهاء إلزامي.

هنا هو بناء الجملة:

0.5

بدلا من ذلك ، يمكننا أن نضيف أيضا دقيقة و ماكس السمات وبالتالي توفير نطاق يحدده المستخدم مثل ذلك:

2. تصميم مقياس "العلامات"

أولاً ، نحتاج إلى تقسيم النطاق إلى ثلاث مناطق (يسار / منخفض ، متوسط ، يمين / مرتفع). هذا كان منخفض و متوسط سمات تدخل في الاعتبار. هكذا تنقسم المناطق الثلاث.

المناطق الثلاث تتشكل بين دقيقة و منخفض , منخفض و متوسط و متوسط و ماكس.

الآن من الواضح أن هناك بعض الشروط منخفض و متوسط يجب أن تتبع القيم المناطق الثلاثة التي سيتم تشكيلها:

منخفض لا يمكن أن يكون أقل من دقيقة وأكبر من متوسط و ماكس
متوسط لا يمكن أن يكون أكبر من ماكس وأقل من منخفض و دقيقة.
وعندما يتم كسر المعايير على حد سواء منخفض و متوسط سيأخذ قيمة المتغير الآخر في المعايير التي لم يتم الوفاء بها ، أي إذا كان منخفض تم العثور على قيمة أقل من دقيقة الذي لا ينبغي أن يكون, منخفض سوف تحصل على دقيقة القيمة.

في هذا المثال ، سنرى أن مناطقنا الثلاث من اليسار إلى اليمين هي:

فقير: (0-33)
معدل: (34-60)
حسن: (61-100)

وبالتالي ، فيما يلي قيم السمات ؛ دقيقة = "0" منخفضة = "34" عالية = "60" حد أقصى = "100".

هنا صورة تصور المناطق.

على الرغم من وجود ثلاث مناطق في العداد التي أنشأناها للتو ، إلا أنها ستشير فقط إلى "نوعين" من المناطق بلونين فقط في الوقت الحالي. لماذا ا؟ لان الأمثل في منتصف المنطقة.

النقطة المثلى

في أي منطقة (من الثلاثة) الأمثل تقع النقطة في ، وتعتبر "المنطقة الأمثل" باللون الأخضر بشكل افتراضي. المنطقة (المناطق) المجاورة لها تسمى "المنطقة دون المثالية" وهي برتقالية اللون. المنطقة البعيدة هي "منطقة ليست مثالية للغاية" ، حمراء اللون.

حتى الآن في مثالنا لم نخصص قيمة له الأمثل. وبالتالي ، تصبح القيمة الافتراضية هي 50 ، مما يجعل المنطقة الوسطى "المنطقة المثالية" والمناطق المجاورة لها (على اليمين واليسار على حد سواء) كـ "مناطق دون المستوى الأمثل".

باختصار في الحالة المذكورة أعلاه ، أي قيمة ل متر يشار إلى العنصر الذي يقع في المنطقة الوسطى باللون الأخضر ؛ بقية البرتقال.

هذا ليس ما نريد. نريد أن يكون اللون بهذه الطريقة: فقير (أحمر), معدل (البرتقالي), حسن (أخضر)

نظرًا لأن المنطقة الصحيحة ستعتبر منطقتنا المثلى ، فسوف نقدم لك الأمثل القيمة التي ستقع في المنطقة اليمنى (أي قيمة بين 61-100 ، بما في ذلك 61 و 100).

نحن نأخذ 90 في هذا المثال. سيؤدي ذلك إلى جعل المنطقة اليمنى "الأمثل" ، والوسط (منطقتها المجاورة المباشرة) "دون المستوى الأمثل" والجهة البعيدة اليسرى "المنطقة غير المثلى".

هذا هو ما سنحصل على مقياس لدينا.

2. تصميم مقياس "الرقم الهيدروجيني"

أولا ، استراحة على قيم الرقم الهيدروجيني. يحتوي المحلول الحمضي على درجة الحموضة أقل من 7 ، والمحلول القلوي له درجة الحموضة أكبر من 7 وإذا هبطت في 7 ، فهذا حل محايد.

وبالتالي ، سوف نستخدم القيم والسمات التالية:

انخفاض = "7" , ارتفاع = "7", الحد الأقصى = "14", و ال دقيقة سوف تأخذ القيمة الافتراضية للصفر.

قبل أن نضيف بقية السمات لاستكمال الكود ، دعونا نقرر الألوان: حمضي (أحمر), محايد (أبيض) و قلوي (أزرق). دعونا أيضًا نعتبر المنطقة الحمضية (المنطقة اليسرى دون 7) "مثالية"

فيما يلي عناصر CSS الزائفة التي سنستهدفها للحصول على العناصر المرئية المطلوبة ثعلب النار. (للاطلاع على العناصر الزائفة لمقياس الويب ، والمزيد ، راجع الروابط المدرجة تحت "مرجع".)

 .ph_meter background: lightgrey؛ العرض: 300 بكسل ؛  .ph_meter: -moz-meter-opt :: :: - moz-meter-bar background: indianred؛  .ph_meter: -moz-meter-sub-optimum :: - moz-meter-bar background: antiquewhite؛  .ph_meter: -moz-meter-sub-optimum :: - moz-meter-bar background: steelblue؛

هنا هو رمز HTML الكامل والنتيجة النهائية لقياس درجة الحموضة.

المراجع

HTML5 متر W3C المواصفات
قائمة عناصر الزائفة webkit والفصول
قائمة عناصر محددة البائع الزائفة

المزيد عن Hongkiat: إنشاء وتصميم شريط التقدم مع HTML5