Zurb Foundation不止一个Joyride

Question

是否可以在一个页面上有两个joyrides？例如：运行一个Joyride，然后，一旦用户选择某些东西，请开始第二个Joyride？

Answer 1

我相信您想要的是它的根源。您可以使用回调来通过执行诸如触发按钮单击隐藏按钮之类的操作来初始化第二个Joyride。

我尚未测试此代码，但是它应该按照这些行进行操作：

// set up the config for a Callback
var config = {
nubPosition : 'auto',
postRideCallback : function() {
  // Joyride has ended, simulate a click on a hidden button
  $(#hidden_button).click();
}
// When the Hidden button is clicked, call the 2nd Joyride
$( "#hidden_button" ).click(function() {
  $(document).foundation('joyride2', 'start');
});

Answer 2

您只需要在DIV中包装Joyride，然后在您想要的时候开始使用Joyride。

例如：

<div id="Joyryde1">
    <ol class="joyride-list" data-joyride >
        <li data-id="message1" data-text="Next" data-options="tip_location: top">
           <p>Joyride 01</p>
        </li>
    </ol>
</div>
<div id="Joyryde2">
    <ol class="joyride-list" data-joyride >
        <li data-id="message1" data-text="Next" data-options="tip_location: top">
           <p>Joyride 02</p>
        </li>
    </ol>
</div>
<script>
$("#joyride1").foundation('joyride', 'start'); //Start when the page loads
// Add this to your trigger(button or another page load) 
$("#joyride2").foundation('joyride', 'start');
</script>