Foundation Joyride
Joyride es un efecto de JavaScript de guía de funciones; a continuación se muestra un ejemplo:
Ejemplo
<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>
Análisis del ejemplo
En el ejemplo anterior, creamos dos elementos, cada uno con un ID independiente. Los dos elementos establecen las posiciones de inicio y fin de joyride.
En el<ol>o<ul>elemento agregamos el atributodata-joyridey la.joyride-listclase para crear joyride. Debe definirlo en la cabecera del documento (en<body>el interior de la cabecera).<li>elemento; a cada elemento agregue eldata-id="value"atributo. El id del atributovaluedebe ser igual al id del elemento anterior. Entonces, el primer elemento de la navegación de funciones<h3>usa id="first", que debe coincidir con el valor data-id="first" del elemento <li>.
Si no gestiona el id de parada, se mostrará una ventana modal.
Por último, Joyride debe inicializarse mediante JavaScript; el código es el siguiente:$(document).foundation('joyride', 'start');