Βλαντ Μέρζεβιτς

Η HTML 4 δεν είχε τη δυνατότητα να δημιουργήσει τα δικά σας χαρακτηριστικά για την αποθήκευση τιμών. Γιατί είναι απαραίτητο; Ακολουθούν μερικές εργασίες όπου μπορεί να χρειαστεί.

  • Δημιουργήστε συμβουλές εργαλείων χωρίς να χρησιμοποιήσετε σενάρια.
  • Προσδιορισμός του στυλ ενός στοιχείου με βάση την τιμή ενός χαρακτηριστικού.
  • Λήψη και αλλαγή τιμών μέσω σεναρίων.

Η HTML5 έχει ένα νέο γενικό χαρακτηριστικό που μπορεί να προστεθεί σε οποιαδήποτε ετικέτα. Οι κανόνες για τη σύνταξη ενός χαρακτηριστικού είναι απλοί:

  • ξεκινάτε πάντα με δεδομένα-?
  • Χρησιμοποιούμε μόνο λατινικά γράμματα, παύλα (-), άνω και κάτω τελεία (:) και κάτω παύλα (_).

Το CSS και η JavaScript χειρίζονται αυτά τα χαρακτηριστικά λίγο διαφορετικά, οπότε ας δούμε παραδείγματα για αυτά ξεχωριστά.

css

Στο CSS, υπάρχουν χαρακτηριστικά tag, αν υπάρχει κάποιο χαρακτηριστικό ή μια δεδομένη τιμή, ορίζουμε το απαραίτητο στυλ.

Περιεχόμενο

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

Περιεχόμενο

Στο CSS μετά από αυτό μπορούμε να ορίσουμε διαφορετικό στυλμε διαφορετικές τιμές του χαρακτηριστικού data-columns.

Div (πλάτος: 480 px; ) div (πλάτος: 720 px; )

Και πάλι, αυτό είναι σε κάποιο βαθμό αντικατάσταση των κλάσεων, επειδή τίποτα δεν μας εμποδίζει να δημιουργήσουμε κλάσεις με το όνομα στήλη-2, στήλη-3 και να τις προσθέσουμε εάν είναι απαραίτητο.

Μια πιο κομψή περίπτωση χρήσης είναι να συμπεριλάβετε τη συνάρτηση attr(). Λαμβάνει την τιμή του δεδομένου χαρακτηριστικού και την εισάγει στο στυλ. Αυτό είναι χρήσιμο για τη δημιουργία συμβουλών εργαλείων. Γράφουμε το κείμενο ακριβώς μέσα στο στοιχείο και υλοποιούμε την εμφάνιση και τη σχεδίαση της επεξήγησης εργαλείου χρησιμοποιώντας CSS.

Επεξήγηση εργαλείου

Θερμοκρασία νερού

ΣΤΟ αυτό το παράδειγμασε στοιχείο προστίθεται το χαρακτηριστικό data-description που περιέχει το απαιτούμενο κείμενο για έξοδο. Η ίδια η εμφάνιση πραγματοποιείται χρησιμοποιώντας το ψευδοστοιχείο ::after και την ιδιότητα περιεχομένου, η τιμή της οποίας είναι η συνάρτηση attr().

JavaScript

Εάν στο CSS αναφερόμαστε απευθείας στο όνομα του χαρακτηριστικού, προσδιορίζοντάς το πλήρως, τότε στο JavaScript αυτό γίνεται μέσω της μεθόδου δεδομένων. Το ίδιο το όνομα του χαρακτηριστικού μετατρέπεται σε μεταβλητή σύμφωνα με τους ακόλουθους κανόνες:

  • δεδομένα- απορρίφθηκαν.
  • Κάθε παύλα πριν από το γράμμα απορρίπτεται και το γράμμα που ακολουθεί γράφεται με κεφαλαία.

Στην πράξη, μοιάζει με αυτό.

Η περιγραφή των δεδομένων γίνεται περιγραφή.
Η πλήρης περιγραφή δεδομένων γίνεται πλήρης περιγραφή.
data-description-of-tag γίνεται descriptionOfTag.

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

σύνολο δεδομένων

Χρήστης

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

Πριν από τη δημιουργία HTML5, εργαστείτε με χαρακτηριστικά μέσα στοιχεία HTMLήταν, για να το θέσω ήπια, όχι ευχάριστο. Έπρεπε να χρησιμοποιήσετε χαρακτηριστικά όπως rel ή class . Και ορισμένοι προγραμματιστές δημιούργησαν ακόμη και τα δικά τους χαρακτηριστικά.

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

Πώς λειτουργούν τα χαρακτηριστικά ημερομηνίας;

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

Ένα παράδειγμα χρήσης χαρακτηριστικών για την αποθήκευση δεδομένων χρήστη:

  • Calvin

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

    Ακολουθεί ένα παράδειγμα κουμπιού για να διαγράψετε κάτι στη σελίδα σας:

    Όλες οι απαραίτητες παράμετροι είναι στη διάθεσή σας και έτοιμες να σταλούν στο σενάριο του backend. Δεν υπάρχουν άλλα χαρακτηριστικά rel ή χειρισμός αναγνωριστικού ή απαιτούμενη ενέργεια από άλλα χαρακτηριστικά.

    Τι μπορεί να αποθηκευτεί;

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

    Χαρακτηριστικά ανάγνωσης/εγγραφής με χρήση javascript

    Ας επιστρέψουμε στο παράδειγμα του κουμπιού και ας δούμε πώς μπορούμε να έχουμε πρόσβαση στα απαιτούμενα χαρακτηριστικά.

    // Αυτό είναι ένα κουμπί var button = document.getElementById("your-button-id"); // Λάβετε την τιμή var cmd = button.getAttribute("data-cmd"); var id = button.getAttribute("data-id"); // Αλλάξτε το κουμπί τιμής setAttribute("data-cmd", yourNewCmd); button.setAttribute("data-id", yourNewId);

    Πολύ απλό, σωστά; Τώρα απλώς περάστε τις παραμέτρους cmd και id στην εφαρμογή σας και κάντε το απαραίτητο αίτημα ajax.

    Ανάγνωση/εγγραφή χαρακτηριστικών ημερομηνίας με το jQuery.

    Εδώ είναι ένα ισοδύναμο jQuery:

    // Λάβετε την τιμή var cmd = $("#your-button-id").attr("data-cmd"); var id = $("#your-button-id").attr("data-id"); // Αλλάξτε την τιμή $("#your-button-id") .attr("data-cmd", yourNewCmd) .attr("data-id", yourNewId);

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

    Χρησιμοποιώντας το API δεδομένων

    Το HTML5 μας προσφέρει ακόμη και ένα API για εργασία με χαρακτηριστικά δεδομένων, αν και το IE10 και το νεότερο δεν το υποστηρίζουν.

    Και πάλι το παράδειγμα κουμπιού, αλλά αυτή τη φορά χρησιμοποιώντας το API δεδομένων:

    // Αυτό είναι ένα κουμπί var button = document.getElementById("your-button-id"); // Λήψη τιμής var cmd = button.dataset.cmd; var id = button.dataset.id; // Αλλάξτε την τιμή button.dataset.cmd = yourNewCmd; button.dataset.id = yourNewId;

    Σημειώστε την απουσία του προθέματος δεδομένων και των παύλων. Ακριβώς όπως όταν εργάζεστε με ιδιότητες CSS σε JavaScript, πρέπει να χρησιμοποιείτε καμπούρα. Το API συνόλου δεδομένων μεταφράζει ονόματα χαρακτηριστικών έτσι ώστε το data-some-attribute-name σε HTML να γίνεται database.someAttributeName στο JavaScript.

    Τι μπορεί να γίνει με τα χαρακτηριστικά ημερομηνίας

    Τα παραδείγματα που δίνονται είναι απλώς η βάση. Μπορείτε να εκτελέσετε πολύ πιο σύνθετες λειτουργίες με χαρακτηριστικά ημερομηνίας. Ας δούμε μερικά παραδείγματα.

    Διήθηση

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

    • Πέρασμα
    • Chevrolet
      • ...

    Παράδειγμα "στο γόνατο":

    $("#filter").on("keyup", function() ( var λέξη = $(this).val().toLowerCase(); $(".cars > li").each(function() ( $(this).toggle(keyword.length< 1 || $(this).attr("data-models").indexOf(keyword) > -1); } ); } );

    Λογοτεχνική συμμόρφωση

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

    Και τώρα το CSS:

    (φόντο: κόκκινο;)

    Πώς όμως να ληφθεί υπόψη η τιμή του χαρακτηριστικού; Έτσι μπορείτε να διαμορφώσετε όλα τα στοιχεία με ένα χαρακτηριστικό προειδοποίησης δεδομένων του οποίου η τιμή περιέχει τη λέξη σφάλμα:

    (χρώμα: κόκκινο;)

    Σύνθεση

    Το διάσημο πλαίσιο Bootstrap χρησιμοποιεί χαρακτηριστικά δεδομένων για να προσαρμόσει τα πρόσθετα JavaScript του. Παράδειγμα αναδυόμενου παραθύρου:

    Ο καλύτερος τρόπος αποθήκευσης δεδομένων

    Τα χαρακτηριστικά ημερομηνίας είναι πολύ κοινά στις τεχνολογίες Ιστού. Αλλά το πιο σημαντικό είναι ότι υποστηρίζονται πλήρως από παλαιότερα προγράμματα περιήγησης και εμβαθύνουν όλο και περισσότερο στα πρότυπα ιστού. Και επειδή το πρότυπο HTML έχει ήδη εγκριθεί, τότε μπορείτε να εργαστείτε μαζί τους σήμερα και να μην φοβάστε ότι θα εξαφανιστούν ξαφνικά αύριο.