Foundation Joyride

Joyride est un effet JavaScript pour les guides de fonctionnalités. Un exemple de création est le suivant :

Exemple

<!-- Éléments qui contrôlent les arrêts de la visite -->
<h3 id="first">Premier arrêt !</h3>
<h3 id="second">Deuxième arrêt !</h3>

<!-- La Joyride : doit être placée en bas de votre page, mais à l'intérieur de <body> -->
<ol class="joyride-list" data-joyride>
  <li data-id="first">
    <p>Premier arrêt. La visite a commencé !</p>
  </li>
  <li data-id="second">
    <h4>Deuxième arrêt</h4>
    <p>Tout HTML valide fonctionnera à l'intérieur du Joyride.</p>
  </li>
  <li data-button="Fin">
    <h4>Arrêt final</h4>
    <p>La visite est terminée. Vous pouvez soit revenir à l'arrêt précédent, soit la fermer.</p>
  </li>
</ol>

<!-- Démarrer Joyride lors de l'initialisation -->
<script>
$(document).ready(function() {
    $(document).foundation('joyride', 'start');
})
</script>
Essayez-le vous-même »

Analyse de l'exemple

Dans l'exemple ci-dessus, nous avons créé deux éléments, chacun avec son propre ID unique. Les deux éléments définissent les positions de début et de fin du joyride.

Nous sommes<ol>ou<ul>ajouter à l'élémentdata-joyrideattribut et.joyride-listclass pour créer le joyride. Vous devez le définir dans l'en-tête du document (dans<body>l'en-tête à l'intérieur). Sur chaque liste, utilisez<li>élément, ajoutez à chaque élémentdata-id="value"Attribut. Lavaleurde l'attribut doit être identique à l'id de l'élément précédent. Ainsi, la première fonctionnalité de navigation<h3>L'élément utilisant id="first" doit être cohérent avec la valeur data-id="first" de l'élément <li>.

Si vous ne gérez pas l'id d'arrêt, une boîte modale s'affichera.

Enfin, Joyride doit être initialisé avec JavaScript, avec le code :$(document).foundation('joyride', 'start');

autres extensions