必要な入力コントロールを指すメッセージでバルーンを追加するJavaScriptライブラリ

Question

私のウェブページのロード時に、ユーザーはシーケンスでいくつかの選択をするように促されるべきです。

メッセージ風船をメッセージでポップアップしたい - "ねえ、あなたがあなたの国を選んだからで、今度は州を選んでください」。これらの風船はその特定の選択管理を指すべきです。

これらの風船は、ツールチップのようにホバリングされたときにそれらを生きるようにする方法の呼び出しに表示されるべきであることに注意してください。

任意の提案は歓迎されています

Answer 1

このプラグインを見てみましょう：> http://zurb.com/playground/ jQuery-Joyride-Feature-Tour-Plugin 。

あなたのHTML構造についてはよくわかりませんが、ここにあなたがすることです。 あなたのHTMLで、あなたが 'Balloon'が表示されるすべての場所はアンカーIDを指定する必要があります。

（公式文書から取得された例）

例えばhrefを介して「バルーン」を望む場合は、

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

.

アンカーをセットアップしたら、バルーンの外観を定義する必要があります。anchor idごとに、指定されていない場合は、そのIDを指定してdata-attributeを指定する必要があります。その後、Balloonはbody要素に接続されます。以下の検討例：

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

.

それ以外の仕事をするためにJavaScript Magic Startをいくつか追加する必要があります。

/* Launching joyride when to page is loaded */

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

.

設定できるオプションの一握りがあります。上記のリンクを確認してください。