Question

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

Answer 1

您缺少启动兜风的JavaScript调用

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

Answer 2

我也与此搏斗，将最后一行代码更改为此

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

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

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

Answer 3

我有同样的问题，上面其他人提到的'开始'也适用于我。

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

<script type="text/javascript">

    $(document).foundation();

    function activateJoyride() {
        $(document).foundation('joyride', 'start');
    }
</script>

Zurb基金会Joyride根本没有露面

3 个答案: