Foundation Joyride
Joyride is a JavaScript effect of a functional wizard. The created instance is as follows:
Instance
<!DOCTYPE html>
<html>
<head>
<title>Foundation 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
<script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<h2>Joyride 实例</h2>
<p> joyride 在页面载入后生效。</p>
<h3 id="first">第一个停止位置!</h3><br>
<h3 id="second">第二个停止位置!</h3>
<ol class="joyride-list" data-joyride>
<li data-id="first">
<p>这是一个 Joyride。你可以点击 "x" 按钮关闭它。</p>
<p>注意以下按钮，你带你倒下一个功能导航。</p>
</li>
<li data-id="second">
<h4>第二个停止位置 Stop</h4>
<p>你可以在这使用任何 HTML 代码</p>
</li>
<li data-button="End">
<h4>结束位置</h4>
<p>结束位置，你可以从头开始，或者关闭它。</p>
</li>
</ol>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation('joyride', 'start');
})
</script>
</body>
</html>Run the instance»
Click the "Run Example" button to view the online example
Example analysis
In the above example, we created two elements, each element has an independent ID. Two elements set the start and end positions of the joyride.
We add the data-joyride attribute and .joyride-list on the <ol> or <ul> element Class to create joyride. You need to define it at the head of the document (the header within <body>). Use <li> elements on each list and add the data-id="value" attribute to each element. The attribute's value must be the same as the previous element's id. So the first functional navigation<h3> element using id="first" must be consistent with the <li> element's data-id="first" value.
If you do not manage a stopped id, a modal will be displayed.
Finally, Joyride needs to use JavaScript to initialize it, the code is: $(document).foundation('joyride', 'start');
