PageGuide.JS - Un guide intéractif en JQuery et CSS3

PageGuide est un guide intéractif en JQuery (et CSS3) pour aider à la navigation sur une page HTML.

Ce plugin va vous servir si vous voulez améliorer l'ergonomie d'une page web: il a été conçu pour accompagner l'utilisateur lorsque celui-ci doit suivre des étapes comme le remplissage d'un formulaire, ou encore pour faire le tour d'horizon des fonctionnalités de la page (Je pense notamment à Facebook qui présente de cette manière les nouvelles fonctions ajoutées à nos timelines).

Fonctionnement

L'utilisateur doit tout d'abord activer le mode "guide" en cliquant sur un bouton flottant en haut à droite de la page:

Les éléments figurant comme une étape sont alors surlignés:

Apparait également un panneau flottant en bas de page qui contient les informations relatives à chaque étape:

Vous pouvez cliquer sur les flèches pour aller à une autre étape: le texte informatif change, et le navigateur se replace à l'élément servant d'étape (à la manière d'une ancre).

Evidemment, si vous cliquez sur le chiffre figurant à côté d'une étape, le texte du panneau affichera la bonne information.

Utilisation

Le plugin est simple d'utilisation: après avoir inclus les scripts JS et CSS, vous ajoutez une liste (<ul>) qui servira pour le panneau informatif:

<ul id="tlyPageGuide" data-tourtitle="Le libellé du bouton (flottant en haut à droite) pour activer le guide">
	<li class="tlypageguide_left" data-tourtarget=".etape1">
	  <div>
		Le texte de ma première étape
	  </div>
	</li>
	<li class="tlypageguide_left" data-tourtarget=".etape2">
	  <div>
		Le texte de ma seconde étape
	  </div>
	</li>
	<li>
		<!-- etc ... ->
	</li>
</ul>

Votre liste doit impérativement avoir l'id #tlyPageGuide, c'est peu flexible mais c'est comme ça (vous pouvez toujours hacker le JS pour remplacer cet id par celui voulu ;) ).

L'attribut "data-tourtitle" de la liste va vous permettre de choisir l'intitulé du bouton pour activer le guide.

Chaque <li> (une étape) possède l'attribut "data-tourtarget" pour savoir à quel élément de la page elle se réfère.

Le code JS pour initialiser le guide tient en une seule ligne:

tl.pg.init();

Pour les styles, il faudra les changer directement dans le fichier CSS fourni avec le plugin !

Simple d'utilisation n'est-ce pas ?

Je pense déjà utiliser ce plugin pour présenter l'un de mes sites aux nouveaux visiteurs :)

Site Officiel