en utilisant fondation 5 joyride avec onglets - zurb-joyride, zurb-foundation-5

Existe-t-il un moyen de changer d’onglet avec Foundation 5 Joyride? J'ai des onglets de base sur la page et je veux que Joyride pointe les éléments sur différents onglets.

Réponses:

0 pour la réponse № 1

Comme mentionné dans le commentaire de Steven, vous pouvez utiliser le rappel soit dans la fonction de rappel avant ou après l'étape d'activation de l'onglet dont vous avez besoin.

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

J'espère que cela t'aides...


0 pour la réponse № 2

Voici ce qui a fonctionné pour moi. J'ai regardé autour de moi et je ne pouvais rien trouver d'utile, alors j'ai écrit ceci. La partie la plus difficile consistait à trouver comment obtenir l'identifiant de la cible.

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

La classe "content" est utilisée par la fondation pouridentifier le contenu à afficher lorsqu'un clic est effectué sur un onglet. Ainsi, en parcourant l'arborescence .parents pour trouver les éléments englobants, vous obtenez le ou les onglets de contenu contenant votre lien. Et puis, bien sûr, vous devez ajouter un identifiant à la <a> élément de l'onglet sur lequel vous souhaitez cliquer. Si vous le nommez comme votre div div, avec "-a" ajouté, vous devriez être prêt à partir.

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

Cela fonctionnera sur n'importe quelle page, qu'elle contienne ou non des onglets, afin qu'elle puisse être universellement incluse sur un site.


Le plus populaire