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 >
嘗試一下» < 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');