mit Joyride der Stiftung 5 mit Tabs - zurb-joyride, zurb-foundation-5

Gibt es eine Möglichkeit, Tabs mit Joyride von Foundation 5 zu wechseln? Ich habe Fundament-Registerkarten auf der Seite und möchte, dass Joyride Elemente auf verschiedene Registerkarten zeigt.

Antworten:

0 für die Antwort № 1

Wie im Kommentar von Steven erwähnt, können Sie den Callback entweder in der Pre- oder Post-Step-Callback-Funktion verwenden, indem Sie die von Ihnen benötigte Registerkarte aktivieren.

post_step_callback     : function (){},    // A method to call after each step
pre_step_callback      : function (){}    // A method to call before each step

Hoffe das hilft...


0 für die Antwort № 2

Hier ist, was für mich funktioniert hat. Ich schaute mich um und konnte nichts Nützliches finden, so schrieb ich das. Der schwierigste Teil war, herauszufinden, wie man die ID des Zielankers bekommt. Diese wurde in dem "This" -Objekt gefunden, das dem Callback zur Verfügung steht.

$(this.$target)[0].id;

Die Klasse "content" wird von foundation to verwendetIdentifizieren Sie den Inhalt, der angezeigt werden soll, wenn auf eine Registerkarte geklickt wird. Wenn Sie also den .parents-Baum durchlaufen und die umschließenden Elemente finden, erhalten Sie die Inhaltsregister, die Ihren Link enthalten. Und dann müssen Sie natürlich eine ID hinzufügen <a> Element der Registerkarte, auf die Sie klicken möchten. Wenn Sie das gleiche wie Ihr Inhalts-div mit "-a" anhängen, sollten Sie gut gehen.

html:

<dl class="tabs radius" data-tab id="my_tabs">
<dd class="active"><a href="#tab1" id="tab1-a">Tab 1</a></dd>
<dd class="active"><a href="#tab2" id="tab2-a">Tab 2</a></dd>
</dl>
<div class="tabs-content">
<div class="content" id="tab1">
<article id="joyride_stop1">...</article>
</div>
<div class="content" id="tab2">
<article id="joyride_stop2">...</article>
</div>
</div>

js:

$(document).ready(function() {
$(document).foundation("joyride", "start", {
pre_step_callback: function(i, tip) {
var target = $(this.$target)[0].id;
if($("#" + target).parents(".content").length > 0) {
$("#" + target).parents(".content").each(function() {
var id = $(this).attr("id");
if($("#" + id).is(":visible") == false) {
$("#" + id + "-a").click();
}
});
}
}
});
});

Dies funktioniert auf jeder Seite, unabhängig davon, ob sie Tabs enthält oder nicht, so dass sie überall auf einer Site enthalten sein kann.


Am beliebtesten