26
MAI

Toolbar.js - Un plugin jQuery pour créer des toolbars en tooltips

Publié le 26/05/15 à 07h35 par DJo

Toolbar.js est un plugin jQuery permettant de créer des toolbar contextuelles sous forme de tooltips.

Toolbar.js est un plugin jQuery permettant de créer des toolbar contextuelles sous forme de tooltips.

Idéal lorsque vous souhaitez proposer à vos visiteurs différentes actions dans un espace restreint ou en mode mobile par exemple, Toolbar.js vous permettra de faire "poper" une tooltip avec une liste d'icônes liées à des actions.

Le plugin est complet et vous permettra de définir facilement:

  • La position de l'affichage de la tooltip
  • Le contenu de la tooltip en référence à une div avec ID
  • Le style à lui appliquer
  • L'animation à l'affichage
  • L'évènement déclencheur de l'affichage: Click, survol ...
  • L'évènement déclencheur pour fermer la tooltip

Voici un exemple de rendu de Toolbar.js:

Toolbar.js - Démo utilisation

Côté code, c'est aussi plutôt simple:

Vous importez les fichiers JS et CSS de la bibliothèque puis vous définissez le markup pour la toolbar (cachée par défaut):

<div id="toolbar-options hidden">
   <a href="#"><i class="fa fa-plane"></i></a>
   <a href="#"><i class="fa fa-car"></i></a>
   <a href="#"><i class="fa fa-bicycle"></i></a>
</div>

Vous créez ensuite le lien, le bouton déclencheur avec un ID spécifique comme #button, et vous lancez le script:

$('#button').toolbar({
  content: '#toolbar-options',
  position: 'bottom',
  style: 'primary',
  event: 'click',
  hideOnClick: true
});

Avec les différentes options souhaitées.

La documentation est bien faite avec des exemples. Il existe des évènements pour l'affichage / disparition de la toolbar.

 

Site Officiel

Baraguiné par KMATH le 27/02/16 à 18h39
KMATH sur La Ferme du Web
je suis un nouveau fermier donc je souhaiterais les du bases du developpement web
Baraguiné par VIDIANI le 06/05/16 à 08h05
VIDIANI sur La Ferme du Web
Tout nouveau fermier 6 5 2016
je remarque une coquille dans l'accueil
En cas d'oublie, n'hésite pas à utiliser le formulaire d'oublie de mot de passe qui t'en fourniras un nouveau.

OUBLI sans e https://fr.wikipedia.org/wiki/Oubli
Baraguiné par VIDIANI le 08/05/16 à 20h59
VIDIANI sur La Ferme du Web
8 5 2016
(1) il y a un problème avec votre dateur de visite qui indique que ma première connexion est le 1 1 1970 (or je ne pratique l'informatique que depuis 1987).....
(2) quand je vais sur "personnalise une carte Google map" en suivant votre exemple (Windows 7 et je n'ai pas l'intention d'en changer) dès l'image page 2 quand je coche sur la case color : non seulement la water mais toute la page devient de la couleur choisie ; de plus pour RGB je n'ai pas les réglettes de réglage comme sur l'image mais elles sont cachées et marchent si je déplace la souris

Pouvez vous m'expliquer et régler ce problème ; Merci d'avance
Baraguiné par le 21/02/17 à 16h47
tnx so so much very very good webiste...
هتل آپارتمان مشهد

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web