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

私もこれに取り組みました。コードの最後の行をこれに変更してください

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

または、複数のページでジョイライドを使用している場合は、これをレイアウトに入れます。

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

私は同じ問題を抱えていました。上記の他の人が言及した「開始」も私にとってはうまくいきました。

後で、ボタンでジョイライドを開始したいと思いました。その場合、ファンデーションをロードする必要があり、その後、joyride を「開始」する関数を作成する必要があります。したがって、私のコードは次のようになります。「activateJoyride」は明らかにジョイライドを開始する関数です。

<script type="text/javascript">

    $(document).foundation();

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