Bibliothèque Javascript pour ajouter une bulle avec des messages pointant vers les contrôles d'entrée requis

Question

Lorsque ma page Web se charge, l'utilisateur doit être invité à effectuer quelques sélections dans une séquence.

Je veux que des bulles de message apparaissent avec des messages du genre : "Hé, puisque vous avez sélectionné votre pays, sélectionnez maintenant la province".Ces bulles doivent également pointer vers ce contrôle de sélection particulier.

Notez que ces bulles devraient apparaître lors d'un appel de méthode qui les ferait vivre et non lorsqu'elles sont survolées comme des info-bulles.

Toutes les suggestions sont les bienvenues

Answer 1

Jetez un oeil à ce plugin: http://zurb.com/playground/jquery-joyride-feature-tour-plugin.

Je ne suis pas sûr de votre structure HTML, mais voici ce que vous faites.Dans votre code HTML, à chaque endroit où vous souhaitez que votre « ballon » apparaisse, vous devez spécifier un identifiant d'ancre.

(Exemples tirés de la documentation officielle)

Par exemple, si vous voulez un « ballon » au-dessus du href, alors:

/* Joyride can be attached to any element with a unique ID or class, in any order */
<h3 id="yourHeaderID"></h3>
<p class="your-paragraph-class"></p>
<a id="yourAnchorID" href="#url"></a>

Après avoir installé vos ancres, vous devez définir à quoi doit ressembler votre ballon.Pour chaque anchor id tu devrais préciser data-attribute avec cet identifiant, s'il n'est pas spécifié, le ballon sera attaché à body élément.Exemple d'étude ci-dessous :

/* Each tip is set within this <ol>. */
/* This creates the order the tips are displayed */
<ol id="chooseID">
  /* data-id needs to be the same as the parent it will attach to */
  <li data-id="newHeader">Tip content...</li>

  /* This tip will be display as a modal */
  <li>Tip content...</li>

  /* using 'data-button' lets you have custom button text */
  <li data-class="parent-element-class" data-options="tipLocation:top;tipAnimation:fade" data-button="Second Button">Content...</li>

  /* you can put a class for custom styling */
  <li data-id="parentElementID" class="custom-class">Content...</li>
</ol>

Ensuite, vous devez ajouter un peu de javascript magic start pour que tout fonctionne :

/* Launching joyride when to page is loaded */

<script>
$(window).load(function() {
  $("#chooseID").joyride({
    /* Options will go here */
  });
});
</script>

Il existe quelques options que vous pouvez définir, veuillez consulter le lien ci-dessus.