Πρόσφατα δημοσίευσα ότι είχα αποφασίσει να χρησιμοποιήσω το Opera στις εκδηλώσεις HTML5 για RMOUG Training Days 2011. Όπως ανέφερα σε αυτήν την ανάρτηση, ένας μεγάλος λόγος για την προσθήκη του προγράμματος περιήγησης Opera στο σύνολο που παρουσιάζεται είναι ότι υποστηρίζει ορισμένες από τις δυνατότητες HTML5 καλύτερα από τα άλλα προγράμματα περιήγησης. Αυτή η ανάρτηση θα απεικονίσει μία από αυτές τις περιπτώσεις: το HTML5 Date Pickers.
Ένα από τα μικρά αλλά ωραία πράγματα για τη χρήση του Flex ή μιας βιβλιοθήκης JavaScript όπως το JQuery είναι η διαθεσιμότητα ενσωματωμένων μηχανισμών για φιλικούς προς το χρήστη ελέγχους εισόδου. Συγκεκριμένα, εκτιμάται πάντα μια καλή επιλογή ημερομηνίας.
Το HTML5 έχει προγραμματιστεί να προσφέρει ένα τυπικό widget επιλογής ημερομηνιών που μπορεί να χρησιμοποιηθεί με ετικέτες HTML. Σε αυτήν την ανάρτηση, εξετάζω την κατάσταση των επιλογών ημερομηνίας HTML5 σε πρόσφατες εκδόσεις εκτός beta των πέντε δημοφιλών προγραμμάτων περιήγησης ιστού (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8 και Opera 11).
Η HTML υποστηρίζει διάφορα πεδία εισαγωγής μέσω της ετικέτας εισόδου. Οι διαφορετικοί τύποι πεδίων εισαγωγής καθορίζονται μέσω του εισαγωγή στοιχεία τύπος Χαρακτηριστικό. Το HTML5 αυξάνει δραματικά τον αριθμό των διαθέσιμων τύποςs που μπορεί να καθοριστεί. Αρκετές από τις νέες τιμές για το τύπος Το χαρακτηριστικό περιλαμβάνει αυτά που σχετίζονται με την ημερομηνία / ώρα: ημερομηνία, ημερομηνία ώρα, datetime-τοπική, μήνας, εβδομάδα, και χρόνος. Καθένα από αυτά απεικονίζεται στο ακόλουθο απόσπασμα κώδικα HTML.
Επίδειξη επιλογών ημερομηνίας HTML5 Τύπος εισαγωγής Πεδίο εισαγωγής ημερομηνία ημερομηνία ώρα datetime-τοπική μήνας εβδομάδα χρόνος
Από τα πέντε προγράμματα περιήγησης ιστού που ανέφερα προηγουμένως, το Opera παρέχει μακράν την πιο εξελιγμένη εφαρμογή της ημερομηνίας / ώρας τύποςαπό το εισαγωγή ετικέτα. Ξεκινώντας με το θετικό, τα πρώτα πολλά στιγμιότυπα οθόνης δείχνουν πώς αποδίδεται αυτό το απλό HTML στο Opera 11.
Opera 11 Αρχική απόδοση σελίδας
Χαρακτηριστικό "ημερομηνία" Ετικέτα εισόδου Opera 11
Χαρακτηριστικό "Datetime" Ετικέτα εισαγωγής Opera 11
Χαρακτηριστικό "Datatime-local" Ετικέτα εισαγωγής Opera 11
Χαρακτηριστικό "Μήνας" Είσοδος εισόδου Opera 11
Η εφαρμογή της Opera επισημαίνει ολόκληρο τον μήνα που θα επιλεγεί.
Χαρακτηριστικό "Είσοδος" Ετικέτας εισόδου Opera 11
Η Opera επισημαίνει την εβδομάδα που θα επιλεγεί.
Χαρακτηριστικό "Time" Ετικέτα εισόδου Opera 11
Opera 11 - Επιλέχθηκαν όλα τα πεδία εισαγωγής
Η εφαρμογή των πεδίων εισαγωγής ημερομηνίας / ώρας είναι εντυπωσιακή. Εύχομαι το ίδιο θα μπορούσε να ειπωθεί και για τα άλλα προγράμματα περιήγησης εκτός beta. Δυστυχώς, τα άλλα προγράμματα περιήγησης δεν παρέχουν υποστήριξη για αυτούς τους τύπους πεδίων οπουδήποτε κοντά σε αυτό το κομψό. Στην πραγματικότητα, δεν νομίζω ότι αξίζει να συμπεριλάβουμε όλα τα στιγμιότυπα οθόνης εδώ. Αντ 'αυτού, απλά εμφανίζω ένα στιγμιότυπο οθόνης του καθενός αφού συμπληρώσω όλα τα πεδία. Στις περισσότερες περιπτώσεις, τα προγράμματα περιήγησης απλώς αντιμετώπισαν αυτά τα πεδία ως απλά πεδία τύπου "κειμένου".
Firefox 3.6 Επιλογές ημερομηνίας: Είναι απλώς κείμενο
Επιλογές ημερομηνίας Internet Explorer 8: Είναι απλώς κείμενο
Safari 5 Date Pickers: Είναι απλώς κείμενο με επισήμανση εστίασης
Επιλογές ημερομηνίας Chrome 8: Δεν είναι αρκετά εκεί
Αν και δεν είναι τόσο κομψό όσο ο χειρισμός των πεδίων ημερομηνίας / ώρας της Opera, το πρόγραμμα περιήγησης Chrome αντιμετωπίζει αυτά τα πεδία περισσότερο από κείμενο και περιορίζει ό, τι μπορεί να εισαχθεί στα πεδία. Δυστυχώς, δεν υπάρχουν ωραία αναδυόμενα παράθυρα επιλογής ημερομηνίας / ώρας όπως παρέχει η Opera. Ωστόσο, η εστίαση στο πεδίο εστίασης είναι ωραία και το γεγονός ότι τα επιλεγμένα δεδομένα είναι κάπως ημερομηνία / ώρα όπως σε μορφή βοηθά.
συμπέρασμα
Ανυπομονώ για την ημέρα που τα μεγάλα προγράμματα περιήγησης υποστηρίζουν με συνέπεια τυποποιημένα στοιχεία ελέγχου ημερομηνίας / ώρας, ώστε οι απλές ετικέτες "εισαγωγής" HTML με τα κατάλληλα χαρακτηριστικά να καθιστούν κομψούς και στιλιστικούς επιλογείς ημερομηνίας / ώρας σε οποιοδήποτε πρόγραμμα περιήγησης. Το Opera 11 ηγείται του πακέτου και παρέχει την καλύτερη εικόνα του τι θα μπορούσε να είναι.
Αυτή η ιστορία, "HTML5 Date Picker" δημοσιεύθηκε αρχικά από το JavaWorld.
