Foundation Joyride

Joyride 是一個(gè)功能向?qū)У?JavaScript 效果，創(chuàng)建實(shí)例如下：

實(shí)例

<!-- 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>
嘗試一下 ?

實(shí)例解析

以上實(shí)例中，我們創(chuàng)建了兩個(gè)元素，每個(gè)元素都有獨(dú)立的 ID。 兩個(gè)元素設(shè)置了 joyride 開始和結(jié)束的位置。

我們?cè)?<ol> 或 <ul> 元素上添加 data-joyride 屬性和 .joyride-list 類來創(chuàng)建 joyride。你需要在文檔頭部定義它 (在 <body> 內(nèi)的頭部)。在每個(gè)列表上使用 <li> 元素，每個(gè)元素添加 data-id="value" 屬性。屬性的 value 必須與之前元素的 id 相同。所以第一個(gè)功能導(dǎo)航 <h3> 元素使用 id="first" 必須與 <li> 元素的 data-id="first" 值一致。

如果你沒有管理停止的 id，將顯示一個(gè)模態(tài)框。

最后，Joyride 需要使用 JavaScript 初始化它，代碼為： $(document).foundation('joyride', 'start');