Zurb Foundation'Joyride':如何开始/编程

时间:2013-10-11 21:20:06

标签: javascript jquery css zurb-foundation zurb-joyride

我正在使用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>'
  }});

2 个答案:

答案 0 :(得分:6)

我也反对这一点。你需要做的是用一个ID将标签包装在一个内部,然后针对它调用joyride start命令。

例如,标记可能如下所示:

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

然后你可以通过调用基础(这是关键)来对抗那个div来启动那个兜风。这个调用看起来像这样:

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

请注意,您传递的是包装器div的ID,而不是元素的ID。我不得不在消息来源中找到答案。

答案 1 :(得分:3)

如果将autostart属性设置为true,也可以启动joyride。为了确保清除所有以前的兜风之旅,如果你在几个巡回演出之间切换,你可以通过调用摧毁功能来清除之前的巡演。

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