Libreria JavaScript per aggiungere palloncino con i messaggi che puntano ai controlli di ingresso richiesti

Question

Quando il mio caricamento della mia pagina Web, l'utente deve essere richiesto di effettuare alcune selezioni in una sequenza.

Voglio messaggi palloncini per saltare con i messaggi come - "Ehi, dal momento che hai selezionato il tuo paese, ora seleziona la provincia".Questi palloncini dovrebbero anche indicare quel particolare controllo della selezione.

Si noti che, questi palloncini dovrebbero apparire su qualche metodo chiamata che li farà vivere e non quando si libra come Tooltips

Qualsiasi suggerimento è il benvenuto

Answer 1

Dai un'occhiata a questo plugin: http://zurb.com/playground/ jquery-joyride-feature-tour-plugin .

Non sono sicuro della tua struttura HTML, ma qui è quello che fai. Nel tuo HTML, ogni posto dove vuoi che il tuo "palloncino" venga dovuto specificare un ID di ancoraggio.

(esempi presi dalla documentazione ufficiale)

Ad esempio se vuoi un "palloncino" sopra il href, quindi:

/* 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>

.

Dopo aver impostato i tuoi ancoraggi, devi definire come sembrare il palloncino.Per ogni anchor id è necessario specificare data-attribute con quell'ID, se non specificato, allora il palloncino sarà collegato all'elemento body.Studio Esempio seguente:

/* 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>

.

Allora devi aggiungere un po 'di inizio magico JavaScript per rendere tutto il lavoro:

/* Launching joyride when to page is loaded */

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

.

Ci sono manciate di opzioni che puoi impostare, consultare il link sopra.