Ειναι γεγονος οτι αν μαθαινεις μεσα απο την εργασια. Και εγω εχω μια ταση να μαθαινω με τον δυσκολο τροπο. Ή τουλαχιστον να με δυσκολευω αρκετα. Ετσι πιστευω οτι τα οφέλη ειναι περισσοτερα. Με αυτο που ασχοληθηκα τελευταία ειναι με την κατασκευη progress bar για ενα "προτζεκτάκι". Το "προτζεκτάκι" αφορουσε ψηφοφοριες και αυτο που θελαμε ηταν να υπαρχουν μπαρες που να δειχνουν το progress καθε μιας.
Προσπερνώντας διαφορες λεπτομεριες η επιλογη ειναι html5 και λιγο css. Η html5 λοιπον ειναι εδω με πολλα καλουδια και απλοποιεί τη ζωή μας. Ναι? Δηλαδη στο απλο σεναριο που θελουμε να εμφανίσουμε μια progress bar γραφουμε
<progress></progress>
Αυτο θα δημιουργησει κατευθειαν μια progress bar στη σελιδα.
Οι επιλογες που εχετε για να δωσετε ειναι
Με το αν βαλουμε attributes ή οχι το progress χωριζετε σε δυο κατηγορίες: Indeterminate και Determinate.
Αυτο ήταν ολο για το progress. Και τα ιδια ισχυουν για το meter. Το meter εχει καποια extra attributes. min, low, high, optimum.
Ο λογος ειναι η μικρη του διαφορα στην λειτουργια. Το πρωτο θα το χρησιμοποιησετε για να εμφανισετε την προοδο μια διεργασιας ενω με το meter θελετε να μετρήσετε τις αποδοσεις της για παραδειγμα.
Αναλογα τις τιμες και το value που θα δωσετε θα δημιουργηθει μια μπαρα με προεπιλεγμενα χρωματα: πρασινο, κιτρινο, κοκκινο.
<meter max="0.7" value=".5"></meter>
<meter min="0.3" max="0.7" value=".5"></meter>
<meter min="0.3" max="0.7" value=".2"></meter>
Για τα low high πρεπει να θυμόμαστε:
Για το optimum:
<meter min=".2" low=".4" high="0.6" max="0.8" value=".7"></meter>
<meter min=".2" low=".4" high="0.6" max="0.8" value=".7" optimum=".25"></meter>
<meter min=".2" low=".4" high="0.6" max="0.8" value=".7" optimum=".75"></meter>
Τελευταια και προεριτικη επιλογη το title το οποιο ειναι readonly, απλα για να δηλωσουμε μοναδα μετρησης.
<meter min=".2" low=".4" high="0.6" max="0.8" value=".7" optimum=".75" title="GB"></meter>
CSS
Το style ειναι προκαθορισμενο οπως βλεπετε. Το προβλημα ειναι να ειναι cross combatibility με τους browsers. Το html5 ειναι φτιαγμενο γιά αυτο το λογο αλλα οι browsers δεν δινουν πληρη υποστηριξη. Σε συνδιασμο του browser και του λειτουργικου θα υπαρχουν διαφορες στην εμφανοση και αν θελετε να κανετε customization θα πρεπει να ορισετε για καθε browser χωριστα το style. Και παλι μπορει να δουλεψει οπως το meter στον IE!!!!!!!!!
Για meter στο chrome, safari, opera υπαρχουν οι pseudo-classes:
Για meter στο firefox:
πχ. για τις webkit ειναι καπως ετσι:
ενω για mozilla:
Υπαρχουν μια δυο διαφορες ακομα αλλα αυτα ειναι αρκετα για να κανετε οτι θελετε.
Για meter στον ΙΕ:
Απλα φτιαχνουμε σε bar σε html4:
<div class="bar"><span class="progress" style="width: 80%;"></span</div> και φτιαχνουμε το css. Επισης αυτο που παρατηρησα ειναι οτι στον ΙΕ επισης οτι οσο το value στο width μεγαλωνει η τιμη αυτο συνεχιζει. Αυτο ισως να μη φανει με το default μονοχρωμο style αλλα χρειαστηκε και ενα script να ελεγχει ποτε ξεπεραστηκε το 100% της μπαρας και να το ρυθμίζει. Και σχετικα αυτο ειναι ευκολο, αν εχεις περισσοτερα απο ενα meter πρεπει να φιλτραρεις το attr('style') και με μια loop να παρεις την τιμη που θα ελεγξεις. btw.
Παρομοια για το progress element ισχυει meter::-webkit-progress-bar και meter::-webkit-progress-val ακομα και για ΙΕ και meter::-moz-progress-bar για firefox.
Προσπερνώντας διαφορες λεπτομεριες η επιλογη ειναι html5 και λιγο css. Η html5 λοιπον ειναι εδω με πολλα καλουδια και απλοποιεί τη ζωή μας. Ναι? Δηλαδη στο απλο σεναριο που θελουμε να εμφανίσουμε μια progress bar γραφουμε
<progress></progress>
Αυτο θα δημιουργησει κατευθειαν μια progress bar στη σελιδα.
Οι επιλογες που εχετε για να δωσετε ειναι
- max
- value
Με το αν βαλουμε attributes ή οχι το progress χωριζετε σε δυο κατηγορίες: Indeterminate και Determinate.
Αυτο ήταν ολο για το progress. Και τα ιδια ισχυουν για το meter. Το meter εχει καποια extra attributes. min, low, high, optimum.
Ο λογος ειναι η μικρη του διαφορα στην λειτουργια. Το πρωτο θα το χρησιμοποιησετε για να εμφανισετε την προοδο μια διεργασιας ενω με το meter θελετε να μετρήσετε τις αποδοσεις της για παραδειγμα.
Αναλογα τις τιμες και το value που θα δωσετε θα δημιουργηθει μια μπαρα με προεπιλεγμενα χρωματα: πρασινο, κιτρινο, κοκκινο.
<meter max="0.7" value=".5"></meter>
<meter min="0.3" max="0.7" value=".5"></meter>
<meter min="0.3" max="0.7" value=".2"></meter>
Για τα low high πρεπει να θυμόμαστε:
- min<low<high<max
- min=low
- high=max
Για το optimum:
-
min ≤ optimum ≤ low high ≤ optimum ≤ max
<meter min=".2" low=".4" high="0.6" max="0.8" value=".3"></meter> <meter min=".2" low=".4" high="0.6" max="0.8" value=".7"></meter>
<meter min=".2" low=".4" high="0.6" max="0.8" value=".7" optimum=".25"></meter>
<meter min=".2" low=".4" high="0.6" max="0.8" value=".7" optimum=".75"></meter>
Τελευταια και προεριτικη επιλογη το title το οποιο ειναι readonly, απλα για να δηλωσουμε μοναδα μετρησης.
<meter min=".2" low=".4" high="0.6" max="0.8" value=".7" optimum=".75" title="GB"></meter>
CSS
Το style ειναι προκαθορισμενο οπως βλεπετε. Το προβλημα ειναι να ειναι cross combatibility με τους browsers. Το html5 ειναι φτιαγμενο γιά αυτο το λογο αλλα οι browsers δεν δινουν πληρη υποστηριξη. Σε συνδιασμο του browser και του λειτουργικου θα υπαρχουν διαφορες στην εμφανοση και αν θελετε να κανετε customization θα πρεπει να ορισετε για καθε browser χωριστα το style. Και παλι μπορει να δουλεψει οπως το meter στον IE!!!!!!!!!
Για meter στο chrome, safari, opera υπαρχουν οι pseudo-classes:
-web-meter-inner-element
-web-meter-bar
-web-meter-optimum-value
-web-meter-subotimum-value
-web-meter-even-less-good-value
Για meter στο firefox:
-moz-meter-barΑυτα αφου πρωτα δηλωσουμε στο element το appearance 'μηδενικο':
-moz-meter-optimum
-moz-meter-sub-optimum
-moz-meter-sub-sub-optimum
meter {Οι pseudo-classes εχουν μια διαφορα στην δηλωση
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
πχ. για τις webkit ειναι καπως ετσι:
meter::-webkit-meter-bar {
-webkit-appearance: meter;
} --->για την μπαρα
meter::-webkit-meter-value {} ---->ΞΕΧΩΡΙΣΤΑ για το progress
ενω για mozilla:
meter:-moz-meter-optimum::-moz-meter-bar {
-moz-appearance: meterchunk;
} -----> δεν χωριζει bar και value;
Υπαρχουν μια δυο διαφορες ακομα αλλα αυτα ειναι αρκετα για να κανετε οτι θελετε.
Για meter στον ΙΕ:
Απλα φτιαχνουμε σε bar σε html4:
<div class="bar"><span class="progress" style="width: 80%;"></span</div> και φτιαχνουμε το css. Επισης αυτο που παρατηρησα ειναι οτι στον ΙΕ επισης οτι οσο το value στο width μεγαλωνει η τιμη αυτο συνεχιζει. Αυτο ισως να μη φανει με το default μονοχρωμο style αλλα χρειαστηκε και ενα script να ελεγχει ποτε ξεπεραστηκε το 100% της μπαρας και να το ρυθμίζει. Και σχετικα αυτο ειναι ευκολο, αν εχεις περισσοτερα απο ενα meter πρεπει να φιλτραρεις το attr('style') και με μια loop να παρεις την τιμη που θα ελεγξεις. btw.
Παρομοια για το progress element ισχυει meter::-webkit-progress-bar και meter::-webkit-progress-val ακομα και για ΙΕ και meter::-moz-progress-bar για firefox.
