usando la fondazione 5 joyride con schede - zurb-joyride, zurb-foundation-5

C'è un modo per cambiare scheda con la fondazione 5 Joyride? Ho delle schede di base sulla pagina e voglio che Joyride punti gli elementi su diverse schede.

risposte:

0 per risposta № 1

Come menzionato nel commento di Steven, è possibile utilizzare la funzione di callback nella fase di pre o post step attivando la scheda di cui si ha bisogno.

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

Spero che questo ti aiuti...


0 per risposta № 2

Ecco cosa ha funzionato per me. Mi sono guardato intorno e non ho trovato nulla di utile, quindi ho scritto questo: la parte più difficile è stata capire come ottenere l'id dell'ancoraggio di destinazione, che è stato trovato sepolto nell'oggetto "questo" disponibile per il callback.

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

La classe "content" è usata da foundation aidentificare il contenuto da visualizzare quando si fa clic su una scheda. Quindi, attraversando l'albero .parents trovando gli elementi di chiusura si ottiene la (e) scheda (e) del contenuto che contiene il tuo link. E poi ovviamente devi aggiungere un ID al <a> elemento della scheda che si desidera fare clic. Se lo chiami come il tuo div di contenuto, con "-a" aggiunto, dovresti essere pronto.

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();
}
});
}
}
});
});

Funzionerà su qualsiasi pagina, che contenga o meno schede, in modo che possa essere inclusa universalmente in un sito.


Più popolare