Javascript Library pour ajouter un ballon avec des messages pointant vers les contrôles de saisie requis

Question

Lorsque ma page web se charge, l'utilisateur devrait être invité à faire quelques sélections dans une séquence. Je veux que les messages apparaissent avec des messages comme - "Hey, puisque vous avez sélectionné votre pays, sélectionnez maintenant la province". Ces bulles devraient également pointer vers ce contrôle de sélection particulier.

Notez que, ces ballons doivent apparaître sur certains appels de méthode qui leur faire vivre et non comme plané quand infobulles

Toutes les suggestions sont les bienvenus

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 voulez que votre 'ballon' apparaisse, vous devez spécifier un identifiant d'ancrage.

(exemples tirés de la documentation officielle)

Par exemple, si vous voulez un « ballon » sur le href, puis:

/* 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 défini vos points d'ancrage, vous devez définir comment votre ballon devrait regarder. Pour chaque anchor id, vous devez spécifier data-attribute avec cet identifiant, s'il n'est pas spécifié, alors le ballon sera attaché à l'élément body. Étudiez exemple 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 magie début javascript pour faire fonctionner le tout:

/* Launching joyride when to page is loaded */ 

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

Il y a quelques options que vous pouvez définir, s'il vous plaît en revue le lien ci-dessus.