Javascript-Bibliothek zum Hinzufügen einer Sprechblase mit Meldungen, die auf erforderliche Eingabesteuerelemente verweisen

Question

Wenn meine Webseite geladen wird, sollte der Benutzer aufgefordert werden, nacheinander einige Auswahlmöglichkeiten zu treffen.

Ich möchte, dass Sprechblasen mit Nachrichten wie „Hey, da Sie Ihr Land ausgewählt haben, wählen Sie jetzt die Provinz“ angezeigt werden.Diese Sprechblasen sollten auch auf dieses bestimmte Auswahlsteuerelement verweisen.

Beachten Sie, dass diese Sprechblasen bei einem Methodenaufruf erscheinen sollten, der sie zum Leben erweckt, und nicht beim Bewegen des Mauszeigers wie bei Tooltips

Alle Vorschläge sind willkommen

Answer 1

Schauen Sie sich dieses Plugin an: http://zurb.com/playground/jquery-joyride-feature-tour-plugin.

Ich bin mir über Ihre HTML-Struktur nicht sicher, aber hier ist, was Sie tun.In Ihrem HTML müssen Sie an jeder Stelle, an der Ihr „Ballon“ erscheinen soll, eine Anker-ID angeben.

(Beispiele aus der offiziellen Dokumentation)

Zum Beispiel, wenn Sie einen „Ballon“ über dem haben möchten href, Dann:

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

Nachdem Sie Ihre Anker aufgestellt haben, müssen Sie definieren, wie Ihr Ballon aussehen soll.Für jeden anchor id Sie sollten angeben data-attribute Mit dieser ID wird, falls nicht angegeben, der Ballon angehängt body Element.Studienbeispiel unten:

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

Dann müssen Sie etwas Javascript-Zauberstart hinzufügen, damit alles funktioniert:

/* Launching joyride when to page is loaded */

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

Es gibt eine Handvoll Optionen, die Sie festlegen können. Bitte lesen Sie den Link oben.