Zurbs Foundation 'Joyride': Wie starte ich/programmatisch

Question

Ich benutze Foundation Joyride Plugin, aber ich brauche es zu starten (und neu starten), sobald ein Benutzer auf eine bestimmte Schaltfläche auf meiner Benutzeroberfläche klickt, aber ich bin nicht dazu in der Lage sein. Indem ich dem auf der Seite von Zurb dargestellten Code folge, kann ich ihn nur ausführen, wenn die Site zum ersten Mal ausgeführt wird.

Die Dokumentation für Joyride sind hier:

http://foundation.zurb.com/docs/components/joyride.html

und mein init-Code ist hier

$(document).foundation().foundation('joyride', 'start', {template : { // HTML segments for tip layout 
    link : '<a href="#close" class="joyride-close-tip " style="background: url(../img/bp_sprite.png) no-repeat 0px -940px; margin-top: -4px; ">&nbsp;&nbsp;</a>', 
    timer : '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>', 
    tip  : '<div class="joyride-tip-guide" style="background: white; color: black; margin-top: -27px; margin-left: 2px; border-top: 1px dashed #c1c1c1; width: 100%; max-width: 457px;"></div>', 
    wrapper : '<div class="joyride-content-wrapper" style="background-color: white; color: black; padding: 4px; "></div>', 
    button : '<a href="#" class="small button joyride-next-tip" style="display: none;"></a>' 
    }}); 

Answer 1

ich dagegen auch gestoßen. Sie müssen das Tag innerhalb von a mit einer ID umbrechen und dann den Joyside-Startbefehl aufrufen.

Zum Beispiel könnte das Markup wie folgt aussehen:

<div id="joyrideDiv"> 
<ol class="joyride-list" data-joyride> 
    <li data-id="joyridedElement"><p>Here's the explanation</p></li> 
</ol> 
</div> 

Und dann kann man genau das Spritztour starten, indem Gründung Aufruf (dies ist der Schlüssel) dagegen div nur. Der Anruf würde wie folgt aussehen:

$("#joyrideDiv").foundation('joyride', 'start'); 

Beachten Sie, dass die ID des Wrapper div vorbei sind, nicht die ID des Elements. Ich musste in der Quelle herumstochern, um das herauszufinden.

Answer 2

Sie können joyride auch starten, wenn Sie die Autostart-Eigenschaft auf true setzen. Um sicherzustellen, dass Sie alle vorherigen Spritztouren löschen, können Sie, wenn Sie zwischen ein paar Touren wechseln, die vorherigen Touren löschen, indem Sie die Zerstörungsfunktion aufrufen.

jQuery(window).joyride("destroy"); 
jQuery("#ot-introduction").joyride({autoStart: true});