Χρήση και στυλ HTML5 μετρητής [Οδηγός]

Εάν είστε εξοικειωμένοι με τη γραμμή προόδου HTML, η οποία δείχνει πόσο μια δραστηριότητα έχει εκτελεστεί, θα διαπιστώσετε ότι το στοιχείο του μετρητή είναι παρόμοιο με αυτό - και τα δύο δείχνουν μια τρέχουσα τιμή από μια μέγιστη τιμή. Όμως, σε αντίθεση με τη γραμμή προόδου, η γραμμή μέτρησης δεν πρέπει να χρησιμοποιείται για την εμφάνιση της προόδου.

Χρησιμοποιείται για την εμφάνιση ενός στατική τιμή σε συγκεκριμένη περιοχή, για παράδειγμα, μπορείτε να υποδείξετε τον αποθηκευτικό χώρο που χρησιμοποιείται σε ένα χώρο αποθήκευσης δίσκου, δείχνοντας πόσο μέρος του χώρου αποθήκευσης έχει πληρωθεί και πόσο δεν είναι.

Επιπλέον, το στοιχείο μετρητή μπορεί επίσης να χρησιμοποιηθεί για την απεικόνιση έως και τριών περιοχών εντός του εύρους του. Επαναχρησιμοποιώντας το παράδειγμα του χώρου αποθήκευσης, αντί να δείχνετε μόνο το μέγεθος του χώρου, μπορείτε επίσης να δηλώσετε οπτικά εάν ο κατειλημμένος χώρος είναι αραιοκατευθυνόμενος (κάτω από 30%) ή σχεδόν μισός πλήρης (από 30 έως 60%) ή περισσότερο μισή πλήρη (πάνω από 60%) χρησιμοποιώντας διαφορετικά χρώματα. Αυτό βοηθά τους χρήστες να γνωρίζουν πότε φτάνουν στο όριο αποθήκευσης.

Σε αυτή τη θέση, θα σας δείξουμε πώς να σχεδιάσετε τη γραμμή μετρητών για αμφότερους τους σκοπούς, δηλ. α απλό μετρητή (χωρίς αναφερόμενες περιοχές) και δύο παραδείγματα μετρητών με 3 περιοχές που υποδεικνύονται χρώματα. Για τους τελευταίους, θα εργαστούμε δημιουργώντας ένα μετρητή "σημείων" για την εμφάνιση φτωχών, μέσων και καλών σημείων και ένα δείκτη "ρΗ" για την εμφάνιση όξινων, νευρικών και αλκαλικών τιμών ρΗ.

Γνωρίσματα

Πριν να ξεκινήσουμε με τα παραδείγματα και να πάμε σε βάθος, ας ρίξουμε μια γρήγορη ματιά στη λίστα των χαρακτηριστικών της παρακάτω, περισσότερα για αυτά τα χαρακτηριστικά όπως οι προεπιλογές τους κ.λπ. θα καλυφθούν στα παραδείγματα.

• αξία - Η αξία του μετρητής στοιχείο
• min - Η ελάχιστη τιμή της περιοχής του μετρητή
• Μέγιστη - Η μέγιστη τιμή του εύρους του μετρητή
• χαμηλός - Υποδεικνύει την τιμή χαμηλού ορίου
• υψηλός - Υποδεικνύει την υψηλή τιμή ορίου
• βέλτιστος - Το βέλτιστο σημείο στην περιοχή

1. Σχεδιασμός ενός απλού μετρητή

Εδώ είναι ένα πολύ απλό παράδειγμα που χρησιμοποιεί μόνο ένα χαρακτηριστικό, το αξία. Πριν προχωρήσουμε, πρέπει πρώτα να γνωρίζουμε τρία πράγματα:

(1) Υπάρχει προεπιλογή min και Μέγιστη τιμή που καθορίζει το εύρος του μετρητής, που είναι 0 και 1 αντίστοιχα. (2) Εάν ο χρήστης έχει καθοριστεί αξία δεν εμπίπτει στο πεδίο εφαρμογής μετρητής περιοχή, θα πάρει την αξία του καθενός min ή Μέγιστη, όποιο από τα δύο είναι πιο κοντά στο. (3) Η ετικέτα τερματισμού είναι υποχρεωτική.

Εδώ είναι η σύνταξη:

 0,5 

Εναλλακτικά, μπορούμε επίσης να προσθέσουμε min και Μέγιστη τα χαρακτηριστικά που παρέχουν μια καθορισμένη από το χρήστη περιοχή όπως αυτή:

2. Σχεδίαση Ο μετρητής "Marks"

Πρώτον, πρέπει να διαιρέσουμε την περιοχή σε τρεις περιοχές (αριστερά / χαμηλά, μεσαία, δεξιά / υψηλή). Αυτό ήταν χαμηλός και υψηλός χαρακτηριστικά. Έτσι κατανέμονται οι τρεις περιοχές.

Οι τρεις περιοχές σχηματίζονται μεταξύ min & & χαμηλός , χαμηλός & & υψηλός και υψηλός & & Μέγιστη.

Τώρα είναι προφανές ότι υπάρχουν ορισμένες προϋποθέσεις χαμηλός και υψηλός πρέπει να ακολουθηθούν οι τιμές για τις τρεις περιοχές που θα διαμορφωθούν:

• χαμηλός δεν μπορεί να είναι μικρότερη από min και μεγαλύτερη από υψηλός & & Μέγιστη
• υψηλός δεν μπορεί να είναι μεγαλύτερη από Μέγιστη και λιγότερο από χαμηλός & & min.
• Και όταν αμφισβητηθεί ένα κριτήριο χαμηλός και υψηλός θα πάρει την αξία της άλλης μεταβλητής στα κριτήρια που δεν ικανοποιούνται, δηλαδή εάν χαμηλός τιμή βρέθηκε χαμηλότερη από min που δεν πρέπει να είναι, χαμηλός θα πάρει το min αξία.

Σε αυτό το παράδειγμα, θα εξετάσουμε τις τρεις περιοχές μας από αριστερά προς τα δεξιά για να είναι:

• Φτωχός: (0-33)
• Μέση τιμή: (34-60)
• Καλός: (61-100)

Επομένως, τα ακόλουθα είναι τιμές για τα χαρακτηριστικά. min = "0" χαμηλή = "34" υψηλή = "60" max = "100".

Εδώ είναι μια εικόνα που απεικονίζει τις περιοχές.

Παρόλο που υπάρχουν τρεις περιοχές στο μετρητή που δημιουργήσαμε μόλις τώρα, θα υποδηλώνουν μόνο δύο "είδη" περιοχών σε δύο μόνο χρώματα προς το παρόν. Γιατί; Επειδή βέλτιστος βρίσκεται στη μεσαία περιοχή.

Βέλτιστο σημείο

Σε οποιαδήποτε περιοχή (από τις τρεις) βέλτιστος το σημείο πέφτει, θεωρείται ως μια "βέλτιστη περιοχή" έγχρωμη πράσινη από προεπιλογή. Η (οι) περιοχή (ες) αμέσως δίπλα της ονομάζεται "υπο-βέλτιστη περιοχή" και έχει χρώμα πορτοκαλί. Το ένα μακρύτερα μακριά είναι μια "όχι πολύ-από-μια-βέλτιστη περιοχή", με κόκκινο χρώμα.

Μέχρι στιγμής στο παράδειγμά μας δεν έχουμε αποδώσει αξία βέλτιστος. Ως εκ τούτου, η προεπιλεγμένη τιμή γίνεται 50, καθιστώντας τη μεσαία περιοχή την "βέλτιστη περιοχή" και τις αμέσως δίπλα της (τόσο αριστερά όσο και δεξιά) ως "υπο-βέλτιστες περιοχές".

Με λίγα λόγια στην παραπάνω περίπτωση, οποιαδήποτε τιμή στο μετρητής στοιχείο που εμπίπτει στην μεσαία περιοχή υποδεικνύεται από πράσινο. το υπόλοιπο πορτοκαλί.

Αυτό δεν θέλουμε. Θέλουμε να χρωματιστεί με αυτόν τον τρόπο: Φτωχός (το κόκκινο), Μέση τιμή (πορτοκάλι), Καλός (πράσινος)

Δεδομένου ότι η δεξιά περιοχή πρέπει να θεωρηθεί η βέλτιστη περιοχή μας, θα δώσουμε βέλτιστος μια τιμή που θα πέσει στην δεξιά περιοχή (οποιαδήποτε τιμή μεταξύ 61-100, συμπεριλαμβανομένων 61 & 100).

Λαμβάνουμε 90 για αυτό το παράδειγμα. Αυτό θα κάνει τη δεξιά περιοχή "βέλτιστη", τη μέση (την αμέσως επόμενη περιοχή της) "υπο-βέλτιστη" και την άκρα αριστερά την περιοχή "που δεν είναι πολύ βέλτιστη".

Αυτό θα φτάσουμε στο μετρητή μας.

2. Σχεδίαση Ο μετρητής "pH"

Αρχικά, αναπνέετε τις τιμές του pH. Ένα όξινο διάλυμα έχει pH μικρότερο από 7, ένα αλκαλικό διάλυμα έχει ένα pH μεγαλύτερο από 7 και εάν προσγειωθείτε στις 7, αυτό είναι μια ουδέτερη λύση.

Έτσι, θα χρησιμοποιήσουμε τις ακόλουθες τιμές και χαρακτηριστικά:

χαμηλή = "7" , υψηλή = "7", max = "14", και το min θα πάρει την προεπιλεγμένη τιμή μηδέν.

Προτού προσθέσουμε τα υπόλοιπα χαρακτηριστικά για να συμπληρώσουμε τον κώδικα, ας αποφασίσουμε για τα χρώματα: Οξικό (το κόκκινο), Ουδέτερος (λευκό) και Αλκαλική (μπλε). Ας εξετάσουμε επίσης την όξινη περιοχή (αριστερή περιοχή κάτω του 7) ως "βέλτιστη"

Εδώ είναι τα pseudo στοιχεία CSS που θα στοχεύσουμε για να έχουμε το επιθυμητό οπτικό στοιχείο firefox. (Για τα pseudo στοιχεία του μετρητή webkit και άλλα, ανατρέξτε στους συνδέσμους που παρατίθενται στην ενότητα "αναφορά".)

 .ph_meter φόντο: lightgrey; πλάτος: 300px;  .ph_meter: -moz-meter-optimum :: - moz-meter-bar φόντο: indianred; . ph_meter: -moz-meter-sub-optimum :: - moz-meter-bar φόντο: αντίκες;  .ph_meter: -moz-meter-sub-sub-optimum :: - moz-meter-bar φόντο: steelblue;  

Εδώ είναι ο πλήρης κώδικας html και το τελικό αποτέλεσμα του μετρητή pH.

βιβλιογραφικές αναφορές

• HTML5 Meter W3C spec
• Κατάλογος ψευδών στοιχείων και κατηγοριών webkit
• Λίστα ψευδών στοιχείων συγκεκριμένου πωλητή

Περισσότερες πληροφορίες για το Hongkiat: Δημιουργία και εμφάνιση της γραμμής προόδου με το HTML5