J'utilise Bootstrap de Twitter et j'ai implémenté des onglets de base pour certains écrans d'aide utilisant Bootstrap-Tab.js. J'ai été surpris que je ne puisse trouver aucune documentation sur la manière de créer un bouton "Suivant". J'aimerais créer un bouton "Suivant" séparé pour boucler tous les onglets (E.g: $ ('# Next_tour') ci-dessous). Toutes les idées sur la manière de mettre en œuvre le JavaScript pour cela?
Mis à part / Commentaire: J'ai également remarqué que les identificateurs de fragments ne sont pas ajoutés à l'URL avec la solution de bootstrap - ce qui pourrait aussi être agréable d'avoir aussi. (Pour cette fonctionnalité, cela me fait prendre en compte ceci: http://flowplayer.org/tools /demos/tabs/ajax-history.html à la place, mais je suis indécis maintenant en ce moment.)
3 Réponses :
La réponse est ici
http://twitter.github.com/bootstrap/javascript.html#tabs
mais essayez le code ci-dessous
@Averen Le code que vous avez suggéré ne fonctionne pas. Si je change ce que vous avez suggéré, la portée des variables change. Donc, par exemple, lorsque je clique sur le bouton Suivant, aucun tabnext existe donc il y a une erreur. Essayez les deux codes et vous le verrez.
J'ai ajouté une réponse séparée avec ma prise.
Voici ce que je suis venu, vous pouvez modifier les deux seuls sélecteurs ( marquage pour les boutons, seule la classe Exemple de travail:
http://jsfiddle.net/gen8f/2/ ._ tics_navigation ) pour spécifier quels boutons Basculer quels onglets si vous avez plus d'un ensemble: _tabs_navigation est important:
Ma variante pour bootstrap 3.0 (seulement ensuite):
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#base" data-toggle="tab">Base tab</a></li>
<li><a href="#step2" data-toggle="tab">tab2</a></li>
<li><a href="#step3" data-toggle="tab">tab3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="base">
<p>This is content of Tab 1</p>
<a href="#step2" onclick="javascript:tabNext(this);">Next →</a>
</div>
<div class="tab-pane fade" id="tab2">
<p>This is content of Tab 2</p>
<a href="#step3" onclick="javascript:tabNext(this);">Next →</a>
</div>
<div class="tab-pane fade" id="tab3">
<p>This is content of Tab 3</p>
</div>
</div>
<script>
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
tabNext = function(e) {
var nextTab = $(e).attr('href');
$('#myTab a[href="' + nextTab + '"]').tab('show');
}
})
</script>