Προσθέστε ετικέτες ετικέτας ετικέτας απλής εικόνας με Taggd

Ξέρετε πώς σας επιτρέπει το Facebook ετικέτες σε φωτογραφίες; Καλά, Taggd είναι κάπως σαν το ισοδύναμο CSS / JS χρησιμοποιώντας κουκκίδες για να σημειώσετε όπου θα πρέπει να εμφανίζονται τα σύμβολα εργαλείων σε μια εικόνα.

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

Μπορείτε να μάθετε λίγο περισσότερο από την αρχική σελίδα Taggd που περιλαμβάνει ένα demo και μερικά βασικά βήματα για να ξεκινήσετε.

Υπάρχει επίσης ένας σύνδεσμος προς το ηλεκτρονική τεκμηρίωση χρησιμοποιώντας το Doclets, μια όμορφη μικρή εφαρμογή ιστού που έγινε για τεκμηρίωση JS. Μπορείς αναζητήστε τις εκδόσεις Taggd, ή περιηγηθείτε στην τρέχουσα έκδοση στον κύριο κλάδο.

Από εκεί, θα πάρετε ένα τεράστια λίστα ιδιοτήτων μπορείς να χρησιμοποιήσεις. Κάθε έγγραφο χωρίζεται από λειτουργίες που λειτουργούν στην εικόνα (όπως addTag () ή getTag ()) ακολουθούμενη από λειτουργίες που σας βοηθούν χειριστείτε συγκεκριμένες ετικέτες (όπως setPosition ()).

Και πάλι, τα πάντα τρέχει με βανίλια JavaScript έτσι δεν χρειάζεται να ανησυχείτε για θέματα σύνταξης.

Για να ξεκινήσετε δείτε το repo του GitHub, και ακολουθήστε τις οδηγίες εγκατάστασης.

Προσθέστε μόνο τα αρχεία Taggd CSS και JS σε σας Ενότητα , και μετά δημιουργήστε μια νέα παρουσία των στοιχείων Taggd. Αυτά μπορούν να καθοριστούν ένα ένα ή σε μια συστοιχία.

Επειτα τις προσαρτήσετε σε μια εικόνα, και presto! Όλοι είστε έτοιμοι να πάτε.

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

Μέχρι στιγμής αυτή η βιβλιοθήκη έχει δημιουργηθεί μόνο για σύγχρονα προγράμματα περιήγησης, και δεν υποστηρίζει τη χαλαρή υποβάθμιση. Ωστόσο, μπορείτε πάντα να ανοίξετε ένα πρόβλημα στη σελίδα repos ή να προσπαθήσετε να επιλύσετε άλλα προβλήματα αν δείτε απλά αυτά. Παρ 'όλα αυτά, το Taggd εξακολουθεί να είναι ένα heck ενός plugin, και είναι πρακτικό να το χρησιμοποιήσετε για οποιοδήποτε έργο.

Ελέγξτε την αρχική σελίδα του συγγραφέα για δείγμα κώδικα και DL συνδέσεις μαζί με ένα σύνδεσμο στη σελίδα τεκμηρίωσης.

Και εάν έχετε οποιεσδήποτε ερωτήσεις ή υποδείξεις μην διστάσετε να στείλετε μήνυμα στον δημιουργό Tim Severien στο Twitter @ TimSeverien του.