Zurb 基金会不止一次兜风

Posted 2023-05-09

【中文标题】Zurb 基金会不止一次兜风

【英文标题】：Zurb foundation more than one joyride

【发布时间】：2014-04-09 15:55:45

【问题描述】：

是否可以在一页上有两个兜风？例如：运行一次兜风，然后，一旦用户选择了某些东西，就开始第二次兜风？

【参考方案1】：

我相信您所寻找的内容源于answer to this question。您可以使用回调，然后通过执行诸如触发按钮单击隐藏按钮之类的操作来初始化 2nd 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');
);

【讨论】：

我正在考虑做这样的事情，但我认为.foundation() 函数中的第一个参数是预定义的。请参阅the docs 了解我的意思。

【参考方案2】：

您只需将您的兜风包裹在一个 div 中，然后在您想要的时候开始兜风。

例如：

<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>