Foundation Joyride

Foundation Joyride

Foundation の Joyride により、ユーザにあなたのサイトやアプリのツアーを提供します：

First stop


Second stop


Third stop


クリックすると Joyride を開始します

Joyride の作成方法

Foundation で Joyride を作成するのは簡単です：

例

<!-- Elements that control the tour stops -->
<h3 id="first">First stop!</h3>
<h3 id="second">Second stop!</h3>

<!-- The joyride: must be placed at the bottom of your page, but inside <body> -->
<ol class="joyride-list" data-joyride>
  <li data-id="first">
    <p>First stop. The ride has begun!</p>
  </li>
  <li data-id="second">
    <h4>Second Stop</h4>
    <p>Any valid HTML will work inside the Joyride.</p>
  </li>
  <li data-button="End">
    <h4>End Stop</h4>
    <p>The tour is over. You can either go back to the previous stop or close it.</p>
  </li>
</ol>

<!-- Start Joyride Upon Initialization -->
<script>
$(document).ready(function() {
    $(document).foundation('joyride', 'start');
})
</script>
Try it Yourself »

例の説明

上の例では、それぞれがユニークな ID を持つ2つの要素を作成しています。これらの要素は、joyride のツアー停止を制御します - それがスタートすべきところと、それが次に行くべきところを；あなたが好きな場所に配置します。

joyride を作成するには、<ol> または <ul> 要素に data-joyride 属性と .joyride-list クラスを追加します。これを、ページの一番下 （しかし、<body> の中）で行うことが重要です。 リスト内で、data-id="value" 属性を持った <li> 要素を使用します。 value は、ツアー停止を制御する要素の id と一致する必要があります。 従って、ツアーの最初の停止のために、id="first" を持つ <h3> 要素は、data-id="first" を持つ <li> 要素 と一致しなければなりません。

id により停止と関連付けない場合（End Stop で行うように）は、モーダルダイアログとして表示されます。

最後に、Joyride は、コンポーネントの残り部分のようなページのロード時に初期化されません。 ロード時にそれを取得するために start を呼び出す必要があります：$(document).foundation('joyride', 'start');


  1. First Stop

    This is a Joyride. You can close it by clicking the "x" icon in the right top corner.

    Notice the buttons below. They will take you to the next (or previous) stop in your ride.

  2. Second Stop

    Any valid HTML will work inside the Joyride. Even images:


  3. Third Stop

    You can also customize it with data-options. We will cover this later.

  4. End Stop

    tour is over. You can either go back to the previous stop(s) or close it by clicking outside of it, clicking the "End" button or clicking the "x" icon.