L'idée de base c'est d'avoir des boutons suivant et precedent qui agissent de la meme facon que le clic sur le projet suivant ou precedent, commencons par decouper le code et laisser la partie creation des boutons a la fonction creer_link()
1 2 3 4 5 6 7 8 9 10 11
| $(document).ready(function(){
$('#test .liens-ref a').live('click',function(e){
e.preventDefault();
var dataLink = $(this).attr('class');
if($('#'+dataLink).size()){
var ligne = $(this).parents('.ligne-ref');
var switchP = creer_link(dataLink);
afficher_contenu(ligne, dataLink, switchP);
}
});
}); |
La fonction qui s'occupe d'afficher le contenu aura comme parametre la ligne ou se trouve le projet, son nom et les boutons suivant/precedent générés
1 2 3 4 5 6 7
| function afficher_contenu(ligne, nom, switchP){
$('.prout').remove();
var copyRef = $('#'+nom).clone();
copyRef.appendTo(ligne).addClass('prout').slideDown(500,function(){
$(copyRef).append(switchP);
});
} |
Pour generer des boutons de navigations, clonons un modele
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| function creer_link(nom){
var switchP = $('#test ul.switchProject').clone();
$(switchP).removeClass('switchProject');
var next_elt = $('.nom'+suivant(nom));
var prev_elt = $('.nom'+precedent(nom));
$(switchP).find('.next').click(function(e){
if (next_elt) $(next_elt).click();
return false;
});
$(switchP).find('.prev').click(function(e){
if (prev_elt) $(prev_elt).click();
return false;
});
return switchP;
} |
Ajoutons a la fin la classe lien-ref un modele de boutons
1 2 3 4 5 6 7 8 9
| <div id="test">
<div class="liens-ref">
....
<ul class="switchProject">
<li><a href="" class="prev">prev</a></li>
<li><a href="" class="next">next</a></li>
</ul>
</div>
</div> |
sans oublier de cacher le modele
#test ul.switchProject {display : none;}
reste a definir les fonctions precedent et suivant
1 2 3 4 5 6 7 8 9 10
| function precedent(nom) {
var tab = nom.split('nom');
var result = parseInt(tab[1]) - 1;
return result;
}
function suivant(nom){
var tab = nom.split('nom');
var result = parseInt(tab[1]) + 1;
return result;
} |
Partager