Zurb Foundation Joyride 根本没有出现
Posted
技术标签:
【中文标题】Zurb Foundation Joyride 根本没有出现【英文标题】：Zurb Foundation Joyride not showing up at all 【发布时间】：2014-06-10 06:50:34 【问题描述】：我试图在我的一个项目中使用 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>放在所有脚本标签下，但没有任何区别。
【问题讨论】：
【参考方案1】：你错过了开始兜风的 javascript 调用
$(document).foundation('joyride', 'start');
【讨论】：
【参考方案2】：这个我也纠结过，把你最后几行代码改成这个
<script>
$(#joyride-list).foundation('foundation', 'start');
</script>
或者，如果您在多个页面中使用 Joyride，请将其放在您的布局中。
<script>
$(document).foundation('joyride', 'start');
</script>
【讨论】：
感谢您回答这个问题！但是如果能给出一个解决方案，最好解释一下为什么OP版本不起作用，以及为什么你的版本起作用。 你的意思是op版本？ OP 表示原始帖子。它是 Stack Overflow 上的常用缩写。 我明白了，通过那个 OP，您指的是 Zurb-Foundation 的原始帖子，还是您的原始帖子？无论哪种方式，我都看不出要解释什么，我只是发布了对我有用的内容。【参考方案3】：我遇到了同样的问题，上面其他人提到的“开始”也对我有用。
后来我想通过一个按钮开始兜风。在这种情况下，您需要加载基础， 之后你需要创建一个函数来“开始”兜风。所以我的代码如下所示，其中 'activateJoyride' 显然是开始兜风的函数：
<script type="text/javascript">
$(document).foundation();
function activateJoyride()
$(document).foundation('joyride', 'start');
</script>
【讨论】：
以上是关于Zurb Foundation Joyride 根本没有出现的主要内容，如果未能解决你的问题，请参考以下文章
Zurb Foundation Joyride 根本没有出现
当 cookie_monster 为真时，Zurb Foundation 5 Joyride 重新启动