Joyride de la Fondation


Joyride est un effet JavaScript d'un assistant fonctionnel. Créez une instance comme suit :

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Exemple d'analyse

Dans l'exemple ci-dessus, nous avons créé deux éléments, chaque élément a un ID indépendant. Deux éléments définissent les positions de début et de fin de la balade.

Nous ajoutons l'attribut <ol> et la classe <ul> sur l'élément data-joyride ou .joyride-list pour créer une balade. Vous devez le définir en tête du document (en-tête à l'intérieur de <body>). Utilisez les éléments <li> sur chaque liste et ajoutez l'attribut data-id="value" à chaque élément. La valeur de l'attribut doit être la même que l'identifiant de l'élément précédent. Ainsi, le premier élément de navigation fonctionnel <h3> utilisant id="first" doit être cohérent avec la valeur data-id="first" de l'élément <li>

Si vous ne gérez pas un identifiant arrêté, un modal sera affiché.

Enfin, Joyride doit l'initialiser en utilisant JavaScript, le code est : $(document).foundation('joyride', 'start');