基础 Joyride 小块位置

Posted 2023-05-09

【中文标题】基础 Joyride 小块位置

【英文标题】：Foundation Joyride nub position

【发布时间】：2014-02-26 20:15:58

【问题描述】：

我正在使用Foundation's Joyride plugin，但我找不到将工具提示的小块定位在其左侧的方法。希望以前有人解决过。

【参考方案1】：

nub 的位置可以在标记中的 data-options 属性中设置，也可以在初始化时传入。

数据选项属性示例：

<ol class="joyride-list" data-joyride>
    <li data-id="firstStop" data-text="Next" data-options="nub_position: left;">
        <p>nub_position: left;</p>
    </li>
</ol>

初始化期间示例：

// Set the default nub_position
$(document).foundation(
      joyride : nub_position: 'left'
);

// Start Joyride
$(document).foundation('joyride', 'start');

您可以在以下位置找到有关配置 Joyride 的更多信息：

http://foundation.zurb.com/docs/components/joyride.html 页面底部有一个名为

可选 JavaScript 配置

的部分，可让您大致了解可以配置的内容。 请注意，文档使它看起来可以称为

nubPosition

，但实际上您必须使用

nub_position

。您可以检查 Joyride javascript 文件中的变量名称。 http://foundation.zurb.com/docs/javascript.html 关于如何使用和配置 Foundation 使用的 JavaScript 的一般概述，例如如何在初始化期间设置默认值。 http://zurb.com/playground/jquery-joyride-feature-tour-plugin 一个很好的入门和下载模板的好地方，该模板真正展示了 Joyride 的功能。 http://cdpn.io/eKgIE 我通过一个 CodePen 一起测试小节的定位。

如果您有任何问题，请告诉我。

【讨论】：

我在 Joyride 2.1 上，它要求我使用以下语法：data-options="tipLocation: top; nubPosition: bottom;"