Foundation Joyride
Joyride is the effect of a JavaScript function wizard, create an instance as follows:
Examples
<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>
Examples of analytical
The example above, we create two elements, each has a separate ID. Two elements sets the start and end positions joyride.
We <ol> or <ul> to add the element data-joyride property and .joyride-list class to create a joyride. You need to define it in the head of the document (in the <body> in the head). Used on each list <li> elements, each adding data-id=" value " attribute. Attribute value must be the same before the id element. So the first navigation function <h3> element using id = "first" must be data-id <li> element = "first" value agreement.
If you do not manage to stop the id, it will display a modal box.
Finally, Joyride requires JavaScript to initialize it, the code is: $(document).foundation('joyride', 'start');