Marge toevoegen Tekst naar willekeurige websites eenvoudig verplaatsen met marginotes

Inline tooltips zijn fantastisch, maar soms passen ze gewoon niet goed bij bepaalde inhoud. De meeste websites laten ruimte in de marge langs de paginolichaam en dit is perfect om toe te voegen inhoud in de tooltip-stijl zonder de tooltips.

invoeren Marginotes, een gratis open source jQuery-invoegtoepassing voegt aangepaste notities toe aan de marges van uw webpagina. U kunt deze notities instellen op basis van koppelingen of bepaalde elementen op de pagina, zoals afbeeldingen.

Deze plug-in is verrassend eenvoudig in te stellen en wordt geleverd met een standaard stylesheet voor uw margenota's. Deze verschijnen aan de zijkant van uw inhoud en ze sluiten direct naast het alinea-element op uw webpagina.

De hover notes zijn handmatig toegevoegd naar uw HTML-elementen, met behulp van een desc attribuut. Ik heb dit nog nooit in HTML5 gezien, dus ik kan niet zeggen of het volledig compliant is. Maar het wordt wel opgepikt door JavaScript, dat is alles wat je echt nodig hebt.

Je kan ook verander dit kenmerk wanneer u de marginotes () functie, dus je zou het kunnen veranderen in iets als data-desc als je meer compliant wilt zijn.

Hier is de een regel van jQuery nodig om deze plug-in te laten werken:

 $ ( "Selector"). Marginotes () 

Je zou moeten vervangen "Selector" met welke elementen u ook target. Dus, als ze zich binnen de lichaamspagina van je pagina bevinden die je zou kunnen gebruiken ".body span". Je zou ook kunnen doel anker links of door bepaalde klassen toegevoegd aan deze elementen.

Binnen in de marginotes () functie, kunt u toevoegen twee optionele parameters om de notatie van de marge te wijzigen:

1. breedte - stelt de breedte van de notitie in (standaard ingesteld op 100px)
2. veld- - stelt het kenmerk HTML-inhoud in (standaard naar "Desc")

Als je jQuery niet leuk vindt, kun je het ook proberen vanilla Marginotes-plug-in. Het draait op vanilla JS, dus dat heb je nul afhankelijkheden om dezelfde functies te krijgen.

Je kunt dit ook bekijken live demonstratie als je het in actie wilt zien. Dit is absoluut een unieke plug-in en het is een geweldige manier om dit te doen voeg extra content toe naar uw site.