Προσθέστε κείμενο περιήγησης με περιθώριο σε οποιουσδήποτε ιστότοπους εύκολα με περιθώρια

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

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

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

Οι σημειώσεις του hover είναι προστέθηκαν με το χέρι στα στοιχεία HTML, χρησιμοποιώντας ένα desc Χαρακτηριστικό. Δεν έχω δει ποτέ αυτό στο HTML5, οπότε δεν μπορώ να πω αν είναι πλήρως συμβατό. Αλλά, παίρνει πήρε από JavaScript, το οποίο είναι το μόνο που πραγματικά χρειάζεστε.

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

Εδώ είναι το μια γραμμή jQuery για να λειτουργήσει αυτό το plugin:

 $ ("επιλογέας"). marginotes () 

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

μεσα στην marginotes () λειτουργία, μπορείτε να προσθέσετε δύο προαιρετικές παραμέτρους για να αλλάξετε τη μορφή σημειώματος περιθωρίου:

1. πλάτος - ορίζει το πλάτος σημείωσης (προεπιλογή σε 100px)
2. πεδίο - ορίζει το χαρακτηριστικό περιεχομένου HTML (προεπιλογή σε "desc")

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

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