Manuel de base en chinois /Foundation Joyride

Foundation Joyride

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

实例

   Foundation 实例       

Joyride 实例

joyride 在页面载入后生效。

第一个停止位置!


第二个停止位置!

  1. 这是一个 Joyride。你可以点击 "x" 按钮关闭它。

    注意以下按钮,你带你倒下一个功能导航。

  2. 第二个停止位置 Stop

    你可以在这使用任何 HTML 代码

  3. 结束位置

    结束位置,你可以从头开始,或者关闭它。


运行实例 »

点击 "运行实例" 按钮查看在线实例

实例解析

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

我们在

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

      元素使用 id="first" 必须与
    • 元素的 data-id="first" 值一致。

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

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