# Foundation Joyride
Joyride 是一個功能向導的 JavaScript 效果,創建實例如下:
### 實例
```
<!-- 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>
```
### 實例解析
以上實例中,我們創建了兩個元素,每個元素都有獨立的 ID。 兩個元素設置了 joyride 開始和結束的位置。
我們在 `<ol>` 或 `<ul>` 元素上添加 `data-joyride` 屬性和 `.joyride-list` 類來創建 joyride。你需要在文檔頭部定義它 (在 `<body>` 內的頭部)。在每個列表上使用 `<li>` 元素,每個元素添加 `data-id="_value_"` 屬性。屬性的 _value_ 必須與之前元素的 id 相同。所以第一個功能導航 `<h3>` 元素使用 id="first" 必須與 <li> 元素的 data-id="first" 值一致。
如果你沒有管理停止的 id,將顯示一個模態框。
最后,Joyride 需要使用 JavaScript 初始化它,代碼為: `$(document).foundation('joyride', 'start');`
- Foundation 入門
- Foundation 5 簡介
- Foundation 起步
- Foundation 文本
- Foundation 表格
- Foundation 按鈕
- Foundation 按鈕組
- Foundation 圖標
- Foundation 標簽
- Foundation 提醒框
- Foundation 進度條
- Foundation 面板
- Foundation 圖片
- Foundation 下拉菜單
- Foundation 折疊列表
- Foundation 列表
- Foundation 選項卡
- Foundation 分頁
- Foundation 價格表
- Foundation 頂部導航欄
- Foundation 側邊欄
- Foundation 滑動導航(Off-Canvas)
- Foundation 麥哲倫(Magellan)導航
- Foundation 表單
- Foundation 輸入框尺寸
- Foundation 開關
- Foundation 滑塊
- Foundation 提示框
- Foundation 模態框
- Foundation Joyride
- Foundation 均衡器(Equalizer)
- Foundation 網格
- Foundation 網格系統
- Foundation 網格 - 水平堆疊
- Foundation 網格 - 小型設備
- Foundation 網格 - 中型設備
- Foundation 網格 - 大型設備
- Foundation 塊狀網格
- Foundation 網格實例
- Foundation 參考手冊
- Foundation 圖標參考手冊
- Foundation CSS 參考手冊
- Foundation CSS 可見性