Tutoriaux
Les onglets sont de plus en plus répandu et de plus en plus apprécié. Par contre, lorsque ces derniers sont plus de 3 ou 4, il peut devenir vite ennuyant de d'utiliser ce type de navigation. Donc il devient nécessaire d'offrir au utilisateur une alternative afin de doter vos onglets d'une navigation plus facile grâce un bouton Suivant/Précédent fonctionnant à l'aide de jQuery et permettant la navigation entre chaque onglet.
jQuery UI permet la création de boîtes d'onglets très rapidement. Mais le but de ce tutoriel n'est pas de vous montrez la création de ce dernier mais bien l'ajout de la fonctionnalité de navigation. En effet, jQuery UI n'offre pas de solution pré-programmé afin de changer l'onglet actif. Nous allons donc ajouté cette fonctionnalité en insérant un lien suivant et précédent qui s'occupera de la navigation.
jQuery
$('#lienSuivant').click(function() { // Ajout de l'événement sur le clic du lien
$tabs.tabs('select', 2); // Atteindre le 3ème onglet
return false;
});
Nous avons vu ici comment changer l'ongle actif. Voyons comment ajouter un traitement automatique des changements d'onglet. Alors qu'avons nous besoin ?
- Ajouter un liens dynamique sur chaque onglet.
- S'assurer que le lien précédent n'apparaît pas sur la 1ère page.
- S'assurer que le lien suivant n'apparaît pas sur la dernière page.
jQuery
$(function() {
var $tabs = $('#tabs').tabs();
$(".ui-tabs-panel").each(function(i){
var totalSize = $(".ui-tabs-panel").size() - 1;
// Test si nous somme sur la dernière page et ajout du lien suivant
if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Page suivante »</a>");
}
// Test si nous somme sur la première page et ajout du lien précédent
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Page précédente</a>");
}
});
// Changement de l'onglet actif
$('.next-tab, .prev-tab').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
return false;
});
});
Flux RSS pour les commentaires
Navigation
Réseaux sociaux
Connexion
Publicités
MeilleursPrix.ca
|
|
Bien cordialement