Zurb's Foundation 'Joyride'：開始方法/プログラム方法

Question

私はFoundation 4 Joyrideプラグインを使用していますが、ユーザーがUI上の特定のボタンをクリックすると起動（そして再起動）する必要がありますそうすることができます。 Zurbのサイトに表示されたコードに従うことで、私はサイトが最初に実行されたときにしか実行できません。 JOYRIDEため

ドキュメントはここにある：

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

と私の初期化コードは、私もこれに反対格上げ

$(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

ここにあります。あなたがする必要があるのは、IDの中にタグをラップしてから、それに対してjoyride startコマンドを呼び出すことです。例えば

、マークアップは次のようになります。

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

そして、あなたは基礎（これはキーである）ことに対するが唯一のDIVを呼び出すことによって、ちょうどそのJOYRIDEを開始することができます。あなたは、ラッパーのdivではなく、要素のIDのIDを渡している

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

注：呼び出しは次のようになります。私はそれを理解するために情報源を突き止めなければならなかった。

Answer 2

autostartプロパティをtrueに設定すると、joyrideを起動することもできます。以前のすべてのツアーをクリアするには、いくつかのツアーを切り替えると、destroy関数を呼び出すことによって前のツアーをクリアすることができます。

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