Πώς να δημιουργήσετε ένα καλύτερο UX με χαρακτηριστικά HTML5 Data- *
Έχετε ποτέ θελήσει να προσθέσετε προσαρμοσμένα δεδομένα σε ένα συγκεκριμένο στοιχείο HTML για να το έχετε πρόσβαση αργότερα με το JavaScript; Πριν εμφανιστεί στην αγορά η HTML5, η αποθήκευση προσαρμοσμένων δεδομένων που σχετίζονται με το DOM ήταν μια πραγματική αναστάτωση και οι προγραμματιστές χρειάστηκε να χρησιμοποιήσουν όλα τα είδη των δυσάρεστων hacks, όπως η εισαγωγή μη τυπικών χαρακτηριστικών ή η χρήση της παρωχημένης μεθόδου setUserData ().
Ευτυχώς δεν χρειάζεται να κάνετε κάτι άλλο, καθώς το HTML5 εισήγαγε νέο παγκόσμιο δεδομένα-* χαρακτηριστικά που καθιστούν δυνατή την ενσωμάτωση επιπλέον πληροφοριών σε οποιοδήποτε στοιχείο HTML. Το νέο δεδομένα-* γνωρίσματα κάνει την HTML πιο εκτεταμένη, επομένως σας επιτρέπουν να δημιουργείτε πιο σύνθετες εφαρμογές, και να δημιουργήσετε μια πιο εξελιγμένη εμπειρία χρήστη χωρίς να χρειάζεται να χρησιμοποιήσετε τεχνικές έντασης πόρων, όπως οι κλήσεις Ajax ή οι ερωτήσεις βάσης δεδομένων διακομιστή.
Η υποστήριξη των νέων παγκόσμιων χαρακτηριστικών του προγράμματος περιήγησης είναι σχετικά καλή, καθώς υποστηρίζονται από όλα τα σύγχρονα προγράμματα περιήγησης (ο IE8-10 τους υποστηρίζει εν μέρει).
Σύνταξη του δεδομένα-* Γνωρίσματα
Η σύνταξη του νέου δεδομένα-* χαρακτηριστικά είναι παρόμοια με εκείνη των χαρακτηριστικών aria-prefixed. Μπορείτε να εισαγάγετε οποιαδήποτε πεζά γράμματα στη θέση του * σημάδι. Πρέπει επίσης να ορίσετε μια τιμή σε κάθε ιδιότητα με τη μορφή μιας συμβολοσειράς.
Ας υποθέσουμε ότι θέλετε να δημιουργήσετε ένα Σχετικά με εμάς σελίδα και αποθηκεύστε το όνομα του τμήματος όπου εργάζεται κάθε εργαζόμενος. Δεν χρειάζεται να κάνετε τίποτα άλλο εκτός από την προσθήκη του υπηρεσία δεδομένων προσαρμοσμένο χαρακτηριστικό στο κατάλληλο στοιχείο HTML με τον ακόλουθο τρόπο:
- John Doe
- Jane Doe
Εθιμο δεδομένα-* τα χαρακτηριστικά είναι παγκόσμια, όπως και το τάξη και ταυτότητα χαρακτηριστικά, ώστε να μπορείτε να τα χρησιμοποιήσετε σε κάθε στοιχείο HTML. Μπορείτε επίσης να προσθέσετε τόσα πολλά δεδομένα-* τα χαρακτηριστικά σε μια ετικέτα HTML όπως θέλετε. Στο παραπάνω παράδειγμα, για παράδειγμα, μπορείτε να εισαγάγετε ένα νέο προσαρμοσμένο χαρακτηριστικό που ονομάζεται δεδομένα-χρήστη για να αποθηκεύσετε τα ονόματα χρήστη των εργαζομένων.
- John Doe
- Jane Doe
Κατά γενικό κανόνα, αν θέλετε να προσθέσετε το δικό σας προσαρμοσμένο χαρακτηριστικό σε ένα στοιχείο HTML, πρέπει πάντα να το προσθέσετε με το δεδομένα- σειρά. Ομοίως, όταν βλέπετε ένα χαρακτηριστικό προθέματος δεδομένων σε κάποιον άλλο κώδικα, μπορείτε να ξέρετε με βεβαιότητα ότι είναι ένα προσαρμοσμένο χαρακτηριστικό που εισήγαγε ο δημιουργός.
Πότε να χρησιμοποιείτε και πότε να μην χρησιμοποιείτε προσαρμοσμένες ιδιότητες
Το W3C ορίζει το έθιμο δεδομένα-* Χαρακτηριστικά όπως:
“Τα χαρακτηριστικά προσαρμοσμένων δεδομένων προορίζονται για την αποθήκευση προσαρμοσμένων δεδομένων που είναι ιδιωτικά στη σελίδα ή στην εφαρμογή, για τα οποία δεν υπάρχουν πλέον κατάλληλα χαρακτηριστικά ή στοιχεία.”
Αξίζει να μελετήσετε τη χρήση δεδομένα-* γνωρίσματα όταν δεν μπορείτε να βρείτε άλλα σημασιολογικά χαρακτηριστικά για τα δεδομένα που θέλετε να αποθηκεύσετε.
Δεν είναι η καλύτερη ιδέα να τα χρησιμοποιείτε αποκλειστικά για λόγους styling, όπως μπορείτε να επιλέξετε από το τάξη και το στυλ γνωρίσματα. Αν θέλετε να αποθηκεύσετε έναν τύπο δεδομένων για τον οποίο το HTML5 έχει σημασιολογικό χαρακτηριστικό, όπως το ημερομηνία ώρα χαρακτηριστικό για το στοιχείο, χρησιμοποιήστε το αντί για το χαρακτηριστικό προ-διορθωμένο με δεδομένα.
Είναι σημαντικό να το σημειώσουμε δεδομένα-* τα χαρακτηριστικά διατηρούν τα δεδομένα που είναι ιδιωτικό στη σελίδα ή την εφαρμογή, πράγμα που σημαίνει ότι θα αγνοηθούν από τους πράκτορες χρηστών, όπως οι μηχανές αναζήτησης και οι εξωτερικές εφαρμογές. Τα προ-διορθωμένα δεδομένα μπορούν να έχουν πρόσβαση μόνο από τον κώδικα που εκτελείται στον ιστότοπο που φιλοξενεί το HTML.
Εθιμο δεδομένα-* τα χαρακτηριστικά χρησιμοποιούνται ευρέως από πλαίσια πλαισίου, όπως το Bootstrap και το Zurb Foundation. Τα καλά νέα είναι ότι δεν χρειάζεται απαραίτητα να γνωρίζετε πώς να γράφετε JavaScript αν θέλετε να χρησιμοποιήσετε χαρακτηριστικά προθέματος δεδομένων ως μέρος ενός πλαισίου, καθώς χρειάζεται μόνο να τα προσθέσετε στον κώδικα HTML για να ενεργοποιήσετε μια λειτουργικότητα ενός προεγκατεστημένο plugin JavaScript.
Το απόσπασμα κώδικα παρακάτω προσθέτει μια επεξήγηση εργαλείων στα αριστερά σε ένα κουμπί στο Bootstrap κάνοντας χρήση του εναλλαγή δεδομένων και το την τοποθέτηση δεδομένων προσαρμοσμένα χαρακτηριστικά και την εκχώρηση κατάλληλων τιμών σε αυτά.
Στόχος δεδομένα-* Χαρακτηριστικά με CSS
Παρόλο που δεν συνιστάται η χρήση δεδομένα-* χαρακτηριστικά μόνο για λόγους styling, μπορείτε να επιλέξετε τα στοιχεία HTML στα οποία ανήκουν με τη βοήθεια γενικών επιλογών χαρακτηριστικών. Αν θέλετε να επιλέξετε κάθε στοιχείο που έχει ένα συγκεκριμένο χαρακτηριστικό δεδομένων, χρησιμοποιήστε αυτή τη σύνταξη στο CSS:
li [δεδομένα-χρήστη] χρώμα: μπλε;
Σημειώστε ότι δεν είναι τα ονόματα χρηστών που θα εμφανίζονται με μπλε χρώμα στο απόσπασμα κώδικα παραπάνω - αφού όλα τα δεδομένα που είναι αποθηκευμένα στα προσαρμοσμένα χαρακτηριστικά δεν είναι ορατά - αλλά τα ονόματα των υπαλλήλων που περιέχονται στο στοιχεία (στο παράδειγμα “John Doe” και “Jane Doe”).
Εάν θέλετε να επιλέξετε μόνο στοιχεία στα οποία ένα χαρακτηριστικό προθέματος δεδομένων παίρνει μια συγκεκριμένη τιμή, αυτή είναι η σύνταξη που πρέπει να χρησιμοποιήσετε:
li [data-department = "IT"] σύνορα: στερεό μπλε 1px;
Μπορείτε να χρησιμοποιήσετε όλους τους πιο περίπλοκους επιλογείς χαρακτηριστικών CSS, όπως ο γενικός επιλογέας συνδυασμού αδερφών ([δεδομένα-τιμή ~ = "foo"]) ή τον επιλογέα μπαλαντέρ ([δεδομένα-αξία * = "foo"]), με χαρακτηριστικά που έχουν προκαθορισμένα δεδομένα.
Πρόσβαση δεδομένα-* Χαρακτηριστικά με JavaScript
Μπορείτε να έχετε πρόσβαση στα δεδομένα που είναι αποθηκευμένα στο προσαρμοσμένο δεδομένα-* με τη χρήση είτε της ιδιότητας του συνόλου δεδομένων είτε του jQuery δεδομένα() μέθοδος.
Βανίλια JavaScript
ο σύνολο δεδομένων ιδιοκτησία είναι ιδιοκτησία του HTMLElement interface, αυτό σημαίνει ότι μπορείτε να το χρησιμοποιήσετε σε οποιαδήποτε ετικέτα HTML. ο σύνολο δεδομένων ιδιοκτησίας δίνει πρόσβαση σε όλα τα έθιμα δεδομένα-* ιδιότητες του δεδομένου στοιχείου HTML. Τα χαρακτηριστικά επιστρέφονται ως a DOMStringMap αντικείμενο που περιέχει μία εγγραφή για κάθε μία από αυτές δεδομένα-* Χαρακτηριστικό.
Στο δικό μας Σχετικά με εμάς για παράδειγμα, μπορείτε εύκολα να ελέγξετε τα προσαρμοσμένα χαρακτηριστικά “Jane Doe” έχει χρησιμοποιώντας το σύνολο δεδομένων ακινήτων με τον ακόλουθο τρόπο:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap χρήστη: "janedoe", τμήμα: "IT" Αυτό μπορείτε να δείτε στην επιστροφή DOMStringMap αντικρούσει το δεδομένα- τα προθέματα αφαιρούνται από τα ονόματα των χαρακτηριστικών (χρήστης αντί δεδομένα-χρήστη, και τμήμα αντί υπηρεσία δεδομένων). Πρέπει να χρησιμοποιήσετε τα χαρακτηριστικά με την ίδια μορφή, εάν θέλετε να έχετε πρόσβαση μόνο στην τιμή ενός συγκεκριμένου χαρακτηριστικού δεδομένων (αντί της λίστας όλων των προσαρμοσμένων ιδιοτήτων όπως στο απόσπασμα κώδικα παραπάνω).
Μπορείτε να ανακτήσετε την αξία ενός συγκεκριμένου δεδομένα-* ιδιότητα ως ιδιότητα του σύνολο δεδομένων ιδιοκτησία. Όπως ανέφερα προηγουμένως, πρέπει να παραλείψετε δεδομένα- προθέμα από το όνομα του ακινήτου, οπότε αν θέλετε να αποκτήσετε πρόσβαση στην αξία της Jane's δεδομένα-χρήστη χαρακτηριστικό, μπορείτε να το κάνετε με αυτόν τον τρόπο:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery's δεδομένα() μέθοδος
ο δεδομένα() Η μέθοδος jQuery καθιστά δυνατή την απόκτηση της τιμής ενός χαρακτηριστικού προθέματος δεδομένων. Εδώ πρέπει επίσης να παραλείψετε το δεδομένα- προθέμα από το όνομα του χαρακτηριστικού για να έχει πρόσβαση σε αυτό σωστά. Στο παράδειγμά μας, μπορείτε να εμφανίσετε ένα μήνυμα ειδοποίησης με το όνομα του τμήματος όπου “Ιωάννα” λειτουργεί με τον ακόλουθο κώδικα:
$ ("# jane"). (h) () ()). ο δεδομένα() η μέθοδος πρέπει να χρησιμοποιηθεί με προσοχή, καθώς δεν ενεργεί μόνο ως μέσο για να πάρει την αξία ενός χαρακτηριστικού προθέματος δεδομένων, αλλά και για να επισυνάψει δεδομένα σε ένα στοιχείο DOM με τον ακόλουθο τρόπο:
πόλη var = $ ("# jane") δεδομένα ("πόλη", "Νέα Υόρκη")? Τα επιπλέον δεδομένα που συνδέετε με το jQuery δεδομένα() η μέθοδος προφανώς δεν θα εμφανιστεί στον κώδικα HTML ως νέα δεδομένα-* χαρακτηριστικό, έτσι ώστε αν χρησιμοποιηθούν και οι δύο τεχνικές ταυτόχρονα, το δεδομένο στοιχείο HTML θα αποθηκεύσει δύο σύνολα δεδομένων, το ένα με HTML και το άλλο με το jQuery.
Στο παράδειγμά μας “Ιωάννα” έλαβε νέα προσαρμοσμένα δεδομένα ("πόλη") με το jQuery, αλλά αυτό το νέο ζεύγος κλειδιού-τιμής δεν θα εμφανιστεί στη μορφή HTML ως νέα δεδομένα-πόλη Χαρακτηριστικό. Η αποθήκευση δεδομένων με δύο διαφορετικούς τρόπους δεν είναι η καλύτερη πρακτική για να πούμε το λιγότερο χρησιμοποιήστε μόνο μία από τις δύο μεθόδους ταυτόχρονα.
Προσβασιμότητα και δεδομένα-* Γνωρίσματα
Δεδομένου ότι τα δεδομένα που διατηρούνται στο έθιμο δεδομένα-* τα χαρακτηριστικά είναι ιδιωτικά, οι βοηθητικές τεχνολογίες ενδέχεται να μην έχουν πρόσβαση σε αυτές. Εάν θέλετε να διατηρήσετε το περιεχόμενό σας προσιτό για άτομα με ειδικές ανάγκες, δεν συνιστάται η αποθήκευση περιεχομένου που μπορεί να είναι σημαντικό για τους χρήστες με αυτόν τον τρόπο.
