Zurb Foundation 'Joyride'：如何开始/以编程方式

Posted 2023-05-09

【中文标题】Zurb Foundation \'Joyride\'：如何开始/以编程方式

【英文标题】：Zurb's Foundation 'Joyride': how to start/programmaticallyZurb Foundation 'Joyride'：如何开始/以编程方式

【发布时间】：2013-10-20 01:59:02

【问题描述】：

我正在使用 Foundation 4 Joyride 插件，但一旦用户单击我的 UI 上的某个按钮，我需要它启动（并重新启动），但我无法这样做。按照 Zurb 网站上提供的代码，我只能在网站首次运行时运行它。

Joyride 的文档在这里：

http://foundation.zurb.com/docs/components/joyride.html

我的初始化代码在这里

  $(document).foundation().foundation('joyride', 'start', template :  // HTML segments for tip layout
    link    : '<a href="#close" class="joyride-close-tip " style="background: url(../img/bp_sprite.png) no-repeat 0px -940px; margin-top: -4px; ">&nbsp;&nbsp;</a>',
    timer   : '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>',
    tip     : '<div class="joyride-tip-guide" style="background: white; color: black; margin-top: -27px; margin-left: 2px; border-top: 1px dashed #c1c1c1; width: 100%; max-width: 457px;"></div>',
    wrapper : '<div class="joyride-content-wrapper" style="background-color: white; color: black; padding: 4px;  "></div>',
    button  : '<a href="#" class="small button joyride-next-tip" style="display: none;"></a>'
  );

【参考方案1】：

我也遇到了这个问题。您需要做的是用 ID 将标签包装在 a 中，然后针对它调用 joyride start 命令。

例如，标记可能如下所示：

<div id="joyrideDiv">
<ol class="joyride-list" data-joyride>
  <li data-id="joyridedElement"><p>Here's the explanation</p></li>
</ol>
</div>

然后您可以通过调用foundation（这是关键）仅针对该div。调用将如下所示：

$("#joyrideDiv").foundation('joyride', 'start');

请注意，您传递的是包装器 div 的 ID，而不是元素的 ID。我不得不在源代码中四处寻找才能弄清楚。

【讨论】：

谢谢，你救了我！这确实应该包含在 Foundation 的文档中。

【参考方案2】：

如果您将 autostart 属性设置为 true，您也可以只启动 Joyride。为确保您清除了之前所有的兜风之旅，如果您在几个旅行之间切换，您可以通过调用销毁函数来清除之前的旅行。

jQuery(window).joyride("destroy");
jQuery("#ot-introduction").joyride(autoStart: true);