TabNav jQuery UI
Les blocs avec des onglets sont sympas, mais quand vous commencez à arriver à plus de 3 ou 4 onglets différents, ils commencent à devenir un peu encombré et il est logique de prévoir des moyens de navigation autres. En voici un avec des boutons Suivant / Précédent, bien utiles.
A l’aide de jQuery UI nous pouvons lier des liens de texte pour réaliser la commutation des onglets:
$('#my-text-link').click(function() { // bind click event to link $tabs.tabs('select', 2); // switch to third tab return false; });Mais nous voulons en plus :
- Ajouter les liens dynamiquement à chaque panneau.Si un groupe est ajouté ou enlevé, le suivant / précédent boutons pour ajuster automatiquement le nouveau débit.De plus, les liens ne seront pas là maladroitement avec JavaScript désactivé
- Assurez-vous qu’il n’y a pas de « Prev » sur le premier panneau
- Vérifiez qu’il n’ya pas de bouton « Next » sur le dernier panneau
ce qui nous donne :
$(function() { var $tabs = $('#tabs').tabs(); $(".ui-tabs-panel").each(function(i){ var totalSize = $(".ui-tabs-panel").size() - 1; if (i != totalSize) { next = i + 2; $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>"); } if (i != 0) { prev = i; $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>"); } }); $('.next-tab, .prev-tab').click(function() { $tabs.tabs('select', $(this).attr("rel")); return false; }); });
Loading ...