Jquery Selected text searcher – Plugin jQuery

Je reviens de nouveau avec jQuery, cette fois-ci avec un plugin nommé « Selected text searcher« . C’est un plugin qui va permettre de rajouter une sorte de tooltip lors de la sélection d’un texte que vous aurez préalablement déterminé.

Jquery-Selected-text-searcher-plugin

En fait, vous allez pouvoir y mettre des liens dans la tooltip, des liens avec favicon du site si vous le souhaitez. Vous pourrez y mettre un titre, du contenu et des éléments de recherche ou d’envoi.

Par exemple pour ajouter des éléments de partage :
code js :

$('.demo1').selectedTextSharer({
        lists:"Twitter,http://twitter.com/home?status=%ts ,favicon|Facebook,http://www.facebook.com/sharer.php?t=%s&u=http://google.com,favicon|Wikipedia (en),http://en.wikipedia.org/w/index.php?title=Special:Search&search=%s,favicon|Google Maps,http://maps.google.com/?q=%s,favicon",
        extraClass: 'dark',
        title: 'Share this text ...',
        borderColor: '#00ccff',
        hoverColor: '#FFFFCC'
    });

et le html :

<div class="demo1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</div>

On peut remarquer l’attribut favicon, pour ajouter automatiquement le favicon du site en question.

Pour effectuer des recherches sur un lieu, via googlemaps ou wikipédia par exemple :
code js :

$('.demo4').selectedTextSharer({
        lists:"Wikipedia (en),http://en.wikipedia.org/w/index.php?title=Special:Search&search=%s,favicon|Google Maps,http://maps.google.com/?q=%s,favicon",
        title: 'Search this text ...',
        borderColor: '#009900',
        hoverColor: '#FFFFCC'
    });

code html :

<input class="demo4" type="text" />

Pour plus d’informations :
Le site du plugin
La démo

Articles qui peuvent vous intéresser :

Partager

No Responses

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*