0

我试图在我的一个项目中使用 Foundation Joyride，但我根本无法让它出现。

有谁知道我可能会错过什么？我到了我制作了一个单独的 html 并剥离它以找出是否有人与之冲突的地步，控制台也没有显示任何内容。

这是代码：

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/foundation-icons.css" />
  </head>
  <body>
  <div class="home-screen">
    <div class="row">
      <div id="headerDiv" class="large-12 columns large-text-center">
        <h1>Welcome!</h1>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">
        <div class="panel">
            <h3 id="subtitle">Subtitle </h3>
            <a id="startButton" class="medium success button radius">Start!</a>
            <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- At the bottom of your page but inside of the body tag -->
  <ol class="joyride-list" data-joyride>
      <li data-id="headerDiv" data-text="Next" data-options="tip_location: top">
          <p>Hello and welcome to the Joyride documentation page.</p>
      </li>
      <li data-id="subtitle" data-class="custom so-awesome" data-text="Next">
          <h4>Stop #1</h4>
          <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
      </li>
      <li data-id="startButton" data-button="Next" data-options="tip_location:top;tip_animation:fade">
          <h4>Stop #2</h4>
          <p>Get the details right by styling Joyride with a custom stylesheet!</p>
      </li>
      <li data-button="End">
          <h4>Stop #3</h4>
          <p>It works as a modal too!</p>
      </li>
  </ol>

  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script src="js/foundation/foundation.joyride.js"></script>
  <script src="js/vendor/jquery.cookie.js"></script>

  <script>
    $(document).foundation();
  </script>

  </body>
</html>

PS：我确实尝试将<ol>所有脚本标签放在下面，但这没有任何区别。

4

3 回答 3

1

你错过了开始兜风的 javascript 调用

$(document).foundation('joyride', 'start');
于 2014-05-01T14:30:38.807 回答
0

我有同样的问题，上面其他人提到的“开始”也对我有用。

后来我想通过一个按钮开始兜风。在这种情况下，您需要加载基础，然后您需要创建一个函数来“开始”兜风。所以我的代码如下所示，其中 'activateJoyride' 显然是开始兜风的函数：

<script type="text/javascript">

    $(document).foundation();

    function activateJoyride() {
        $(document).foundation('joyride', 'start');
    }
</script>
于 2014-07-16T06:47:46.353 回答
0

我也为此苦苦挣扎，将您的最后几行代码更改为此

<script>
    $(#joyride-list).foundation('foundation', 'start');
</script>

或者，如果您在多个页面中使用 Joyride，请将其放在您的布局中。

  <script>
    $(document).foundation('joyride', 'start');
  </script>
于 2014-06-21T21:33:05.277 回答