Foundation 基础Foundation 教程Foundation 安装Foundation 按钮Foundation 按钮组Foundation 标签Foundation 表单Foundation 表格Foundation 侧边栏Foundation 顶部导航栏Foundation 分页Foundation 滑动导航Foundation 滑块Foundation 价格表Foundation 进度条Foundation 均衡器(Equalizer)Foundation 开关Foundation 列表Foundation 麦哲伦（Magellan）导航Foundation JoyrideFoundation 面板Foundation 模态框Foundation 输入框 尺寸Foundation 提示框Foundation 提醒框Foundation 图标Foundation 图片Foundation 文本Foundation 下拉菜单Foundation 选项卡Foundation 折叠列表Foundation 手册Foundation CSS 参考手册Foundation CSS 可见性Foundation 图标参考手册Foundation 网格Foundation 块状网格Foundation 网格 - 大型设备Foundation 网格 - 水平堆叠Foundation 网格 - 小型设备Foundation 网格 - 中型设备Foundation 网格实例Foundation 网格系统
©
本文档使用
php.cn手册 发布
文字
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');
关于我们 联系我们 留言板
手册网