Zurb Foundation Joyride根本没有出现

我试图在我的一个项目中使用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>放在所有脚本标记下，但没有什么区别。

您缺少启动joyride 的javascript调用

$(document).foundation('joyride', 'start');

我也在努力解决这个问题，将最后一行代码更改为这个

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

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

  <script>
    $(document).foundation('joyride', 'start');
  </script>

我也遇到了同样的问题，上面其他人提到的"开始"也对我有效。

后来，我想通过一个按钮开始游戏。在这种情况下，您需要加载基础，然后你需要创建一个函数来"启动"joyride。因此，我的代码如下所示，其中"activateJoyride"显然是启动joyride的功能：

<script type="text/javascript">
    $(document).foundation();
    function activateJoyride() {
        $(document).foundation('joyride', 'start');
    }
</script>

相关内容

最新更新

热门标签：