שימוש וסגנונות HTML5 Meter [מדריך]

אם אתה מכיר את סרגל התקדמות ה- HTML, שמראה כמה פעילות בוצעה, תגלה כי רכיב המונה דומה לזה - שניהם להציג ערך נוכחי מתוך ערך מרבי. אבל שלא כמו בר התקדמות, מד מטר לא לשמש כדי להראות התקדמות.

הוא משמש להצגת ערך סטטי בטווח מסוים, לדוגמה, באפשרותך לציין את שטח האחסון המשמש לאחסון בדיסק על-ידי הצגת כמות שטח האחסון ומילוי כמות האחסון.

נוסף על כך, אלמנט מטר יכול לשמש גם כדי לחזות עד שלושה אזורים בטווח שלה. שימוש חוזר בדוגמה של שטח האחסון, במקום להציג רק כמה שטח תפוס, ניתן גם לציין באופן חזותי אם השטח הכבוש מלא רק בדלילות (אפשר לומר מתחת ל -30%) או כמעט חצי מלא (בין 30 ל -60%) או יותר חצי מלא (מעל 60%) באמצעות צבעים שונים. הדבר מסייע למשתמשים לדעת מתי הם מגיעים למגבלת האחסון.

פוסט זה נראה לך איך לסדר את סרגל מטר - - לשתי המטרות שהוזכרו, דהיינו א מד פשוט (ללא אזורים שצוינו) ושתי דוגמאות של מדדים עם 3 אזורים שצוינו בצבע. עבור האחרון, נעבוד על יצירת מד "סימני" להצגת סימני עניים, ממוצעים וטובים, ו מד "pH" עבור הצגת ערכי חומציות pH חומציים, עצביים ובסיסיים.

תכונות

לפני שנתחיל בדוגמאות ונלמד לעומק, נסקור במהירות את רשימת המאפיינים שלהלן, יותר על תכונות אלה כמו ברירות המחדל שלהם וכו 'יכוסו בדוגמאות.

• ערך - הערך של מטר אלמנט
• דקות - הערך המינימלי של טווח המונה
• מקסימום - הערך המרבי של טווח המונה
• נמוך - מציין את ערך הגבול הנמוך
• גבוה - מציין את ערך הגבול הגבוה
• אופטימלי - הנקודה האופטימלית בטווח

1. סטיילינג מד פשוט

הנה דוגמה פשוטה מאוד באמצעות תכונה אחת בלבד, ערך. לפני שנמשיך, עלינו לדעת תחילה שלושה דברים:

(1) יש ברירת מחדל דקות ו מקסימום ערך המגדיר את טווח מטר, אשר 0 ו 1 בהתאמה. (2) אם המשתמש ציין ערך אינו נופל בתוך מטר טווח, זה ייקח את הערך של אחד דקות או מקסימום, לפי המוקדם שבהם. (3) תג הסיום הוא חובה.

הנה התחביר:

 0.5 

לחלופין, אנו יכולים גם להוסיף דקות ו מקסימום תכונות ובכך לספק טווח מוגדר של המשתמש כך:

2. סטיילינג את "מארקס" מד

ראשית, אנחנו צריכים לחלק את הטווח לשלושה אזורים (שמאל / נמוך, באמצע, ימין / גבוה). זה היה נמוך ו גבוה תכונות נכנסות לפעולה. כך מחולקים שלושת האזורים.

שלושת האזורים נוצרים בין דקות & נמוך , נמוך & גבוה ו גבוה & מקסימום.

עכשיו ברור שיש תנאים מסוימים נמוך ו גבוה יש לעקוב אחרי שלושת האזורים שיוקמו:

• נמוך לא יכול להיות פחות מ דקות וגדול מ גבוה & מקסימום
• גבוה לא יכול להיות גדול מ מקסימום ופחות מ נמוך & דקות.
• וכאשר קריטריונים נשברים הן נמוך ו גבוה ייקח על ערכו של המשתנה האחר בקריטריונים שאינם מרוצים, דהיינו אם נמוך הערך נמצא נמוך מ דקות אשר לא צריך להיות, נמוך יקבלו את דקות ערך.

בדוגמה זו, נשקול את שלושת האזורים שלנו משמאל לימין כדי להיות:

• עני: (0-33)
• ממוצע: (34-60)
• טוב: (61-100)

לפיכך, להלן ערכים עבור תכונות; min = "0" low = "34" high = "60" max = "100".

הנה תמונה החזות את האזורים.

למרות שיש שלושה אזורים במטר שיצרנו כרגע, הוא יציין רק שני "סוגים" של אזורים בשני צבעים בלבד כרגע. למה? כי אופטימלי הוא באמצע האזור.

נקודת אופטימום

בכל אזור (של שלושת) אופטימלי נקודה נופל, זה נחשב "אזור אופטימלי" צבע ירוק כברירת מחדל. האזור (ים) מיד ליד זה נקרא "תת אופטימלי האזור" וזה בצבע כתום. האחד הרחוק ביותר הוא "אזור לא-הרבה-אופטימלי", בצבע אדום.

עד כה בדוגמה שלנו לא הקצה לנו ערך אופטימלי. לפיכך, ערך ברירת המחדל הופך ל -50, מה שהופך את אמצע לאזור "האזור האופטימלי" ואת אלה ממש ליד זה (הן בצד שמאל והן מימין) כמו "תת אופטימלית אזורים".

בקיצור במקרה הנ"ל, כל ערך מטר אלמנט זה נופל לתוך אמצע האזור מסומן על ידי ירוק; והשאר כתום.

זה לא מה שאנחנו רוצים. אנחנו רוצים שזה צבעוני ככה: עני (אדום), ממוצע (תפוז), טוב (ירוק)

מכיוון שהאזור הימני נחשב לאזור האופטימלי שלנו, אנו נספק אופטימלי ערך שייפול לתוך האזור הימני (כל ערך בין 61-100, כולל 61 ו -100).

אנחנו לוקחים 90 עבור דוגמה זו. זה יהפוך את האזור הימני "האופטימלי", האמצע (האזור הבא המיידי) שלו "תת אופטימלי" ואת השמאל הקיצוני "לא הרבה של אופטימלי" באזור.

זה מה שאנחנו מקבלים על מד שלנו.

2. סטיילינג "pH" מד

ראשית, נשימה על ערכי pH. פתרון חומצי יש pH של פחות מ 7, פתרון אלקליין יש pH של יותר מ 7 ואם אתה נוחת על 7, זה פתרון ניטרלי.

כך נשתמש בערכים ובמאפיינים הבאים:

נמוך = "7" , high = "7", מקסימום = "14", וה דקות ייקח את ערך ברירת המחדל של אפס.

לפני שנוסיף את שאר התכונות כדי להשלים את הקוד, תן לנו להחליט על צבעים: חומצה (אדום), ניטראלי (לבן) ו אלקליין (כחול). תן לנו גם לשקול את האזור החומצי (שמאל באזור מתחת 7) כמו "אופטימלי"

הנה האלמנטים פסאודו CSS אנחנו נמקוד כדי לקבל את החזותי הרצוי אתר. (עבור אלמנטים של מד גובה Webkit ועוד, עיין בקישורים המפורטים תחת "הפניה").

 .ph_meter background: lightgrey; רוחב: 300px;  .ph_meter: -moz-meter-optimimum :: - moz-meter-bar background: indianred;  .ph_meter: -moz-meter-sub-optimimum :: - moz-meter-bar background: antiquewhite;  .phphmeter: -moz-meter-sub-sub-optimimum :: - moz-meter-bar background: steelblue;  

הנה קוד ה- HTML המלא ואת התוצאה הסופית של מד pH.

הפניות

• מפרט HTML5 M3 W3C
• רשימה של webkit pseudo אלמנטים & שיעורים
• רשימה של אלמנטים pseudo הספציפי של הספק

עוד על Hongkiat: יצירת סגנון & בר התקדמות עם HTML5