Foundation Joyride

Joyride 是一个功能向导的 JavaScript 效果，创建实例如下：

          
  
Joyride 实例
 
 joyride 在页面载入后生效。
 
第一个停止位置!

 
第二个停止位置!
 
 
 
这是一个 Joyride。你可以点击 "x" 按钮关闭它。
 
注意以下按钮，你带你倒下一个功能导航。
 
 
 
第二个停止位置 Stop
 
你可以在这使用任何 HTML 代码
 
 
 
结束位置
 
结束位置，你可以从头开始，或者关闭它。
 
 
    

实例解析

以上实例中，我们创建了两个元素，每个元素都有独立的 ID。 两个元素设置了 joyride 开始和结束的位置。

我们在

或
元素上添加data-joyride属性和.joyride-list类来创建 joyride。你需要在文档头部定义它 (在内的头部)。在每个列表上使用
• 元素，每个元素添加data-id="value"属性。属性的value必须与之前元素的 id 相同。所以第一个功能导航

  元素使用 id="first" 必须与

  元素的 data-id="first" 值一致。

  如果你没有管理停止的 id，将显示一个模态框。

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