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');