Joyride is the JavaScript effect of a feature wizard. An example is created as follows: 尝试一下 » In the above example, we created two elements, each with a separate ID. The two elements set the start and end positions of the joyride. We’re here If you do not manage the stopped id, a modal box will be displayed. Finally, Joyride needs to initialize it with JavaScript, with the code: 8.29.1. Example ¶
<!-- Elements that control the tour stops -->
<h3 id="first">First stop!</h3>
<h3 id="second">Second stop!</h3>
<!-- The joyride: must be placed at the bottom of your page, but inside
<body> -->
<ol class="joyride-list" data-joyride>
<li data-id="first">
<p>First stop. The ride has begun!</p>
</li>
<li data-id="second">
<h4>Second Stop</h4>
<p>Any valid HTML will work inside the Joyride.</p>
</li>
<li data-button="End">
<h4>End Stop</h4>
<p>The tour is over. You can either go back to the previous stop or
close it.</p>
</li>
</ol>
<!-- Start Joyride Upon Initialization -->
<script>
$(document).ready(function() {
$(document).foundation('joyride', 'start');
})
</script>
Case analysis ¶
<ol>
Or
<ul>
Add on the element
data-joyride
Properties and
.joyride-list
Class to create a joyride. You need to define it in the head of the document (in
<body>
The head inside). Use on each list
<li>
Element, each element is added
data-id="value"
Property. Attribute of value Must be the same as the id of the previous element. So the first function navigation
<h3>
The element using id= “first” must be consistent with the data-id= “first” value of the < li > element.
$(document).foundation('joyride',
'start');