Foundation Joyride
Joyride ist ein JavaScript-Effekt für Feature-Anleitungen. Ein Beispiel für die Erstellung ist wie folgt:
Beispiel
<h3 id="first">Erster Stopp!</h3>
<h3 id="second">Zweiter Stopp!</h3>
<!-- Die Joyride: muss am unteren Ende deiner Seite platziert werden, aber innerhalb von <body> -->
<ol class="joyride-list" data-joyride>
<li data-id="first">
<p>Erster Halt. Die Fahrt hat begonnen!</p>
</li>
<li data-id="second">
<h4>Zweiter Halt</h4>
<p>Jedes gültige HTML funktioniert innerhalb von Joyride.</p>
</li>
<li data-button="Ende">
<h4>Endstation</h4>
<p>Die Tour ist vorbei. Du kannst entweder zum vorherigen Halt zurückgehen oder sie schließen.</p>
</li>
</ol>
<!-- Joyride bei Initialisierung starten -->
<script>
$(document).ready(function() {
$(document).foundation('joyride', 'start');
})
</script>
Beispielanalyse
Im obigen Beispiel haben wir zwei Elemente erstellt, jedes mit seiner eigenen eindeutigen ID. Die beiden Elemente legen die Start- und Endposition der Joyride fest.
Wir sind<ol>oder<ul>zu Element hinzufügendata-joyrideAttribut und.joyride-listclass, um die Joyride zu erstellen. Du musst sie im Dokumentkopf definieren (im<body>Header darin). Verwende in jeder Liste<li>Element, füge zu jedem Elementdata-id="value"Attribut. DerWertdes Attributs muss mit der id des vorherigen Elements übereinstimmen. Also die erste Feature-Navigation<h3>Das Element mit id="first" muss mit dem data-id="first"-Wert des <li>-Elements übereinstimmen.
Wenn du die Stopp-ID nicht verwaltest, wird ein modales Fenster angezeigt.
Schließlich muss Joyride mit JavaScript initialisiert werden, mit dem Code:$(document).foundation('joyride', 'start');