IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Ajouter un next et un prev a mon script


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2007
    Messages
    228
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 228
    Par défaut Ajouter un next et un prev a mon script
    Bonjour a tous je suis en train de réaliser en js un système de présentation de projets.

    Voici le résultat d’où j'en suis actuellement.

    http://notre-monde.com/decapsuleuses.com/test

    l'idée est de cliquer sur une miniature et d'afficher sous la ligne de miniature le projet en question.
    Cela fonctionne comme je le souhaite pour le moment mise a part une chose.

    J'aimerai avoir la possibilité d'avoir un lien suivant et un lien précédent qui me permettrait de switcher d'un projet en avant ou d'un projet en arrière.

    Pouvez vous m'aider a réaliser cela ??

    Ça fait quelque jours que j'essaye en vain.

    Merci par avance.

    Voici mon code html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
     
    <div id="test">
        	<div class="liens-ref">
            	<div>
                	<a href="" class="nom1">projet 1</a>
     
                	<a href="" class="nom2">projet 2</a>
     
                	<a href="" class="nom3">projet 3</a>
                </div>
                <div>
                	<a href="" class="nom4">projet 4</a>
     
                	<a href="" class="nom5">projet 5</a>
     
                	<a href="" class="nom6">projet 6</a>
                </div>
                <div>
                	<a href="" class="nom7">projet 7</a>
     
                	<a href="" class="nom8">projet 8</a>
     
                	<a href="" class="nom9">projet 9</a>
                </div>
            </div>
     
            <div class="content-ref">
            	<div class="ref" id="nom1">
                	reference 1
                </div>
     
                <div class="ref" id="nom2">
                	reference 2
                </div>
     
                <div class="ref" id="nom3">
                	reference 3
                </div>
     
                <div class="ref" id="nom4">
                	reference 4
                </div>
     
                <div class="ref" id="nom5">
                	reference 5
                </div>
     
                <div class="ref" id="nom6">
                	reference 6
                </div>
     
                <div class="ref" id="nom7">
                	reference 7
                </div>
     
                <div class="ref" id="nom8">
                	reference 8
                </div>
     
                <div class="ref" id="nom9">
                	reference 9
                </div>
            </div>
    	</div>
    et mon code javascript

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    $('document').ready(function(){
     
    	$('#test .liens-ref a').live('click',function(e){
    		e.preventDefault();
    		var dataLink = $(this).attr('class');
    		$('.prout').remove();	
     
    		if($('#'+dataLink).size()){
    			var copyRef = $('#'+dataLink).clone();
    			$this = $(this).parent();
    			copyRef.appendTo($this).addClass('prout').slideDown(500);
    		}
    	});
     
    });
    je vou pose egalment le css pour ceux qui veulent tester en local

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
     
    /*test*/
     
    #test .liens-ref div{
    	overflow:hidden;
    }
     
    #test .liens-ref a{
    	display:block;
    	float:left;
    	background-color:#CCC;
    	width:278px;
    	height:200px;
    	margin:0 15px 20px 0;
    }
     
    #test .ref{
    	display:none;
    	clear:both;
    	background-color:#fff;
    	height:400px;
    	width:864px;
    	margin-bottom:20px;
    }

  2. #2
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2007
    Messages
    228
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 228
    Par défaut
    J'ai peut être une idée pour gérer mes liens next et prev même si je n'arrive pas a l'appliquer.

    Au clique sur la miniature je creer mes bouton next et prev qui ont pour class la class de la miniature cliquée + 1 sur le bouton suivant et la class de la miniature cliquée -1 sur la class précédente.

    Comme ça au clique sur mon liens suivant ou précédent mon script devrai appeler la bonne div.

    Qu'en pensez vous?

    Pouvez vous m'aider a l'appliquer?

    Voici illustrer un exemple illustré

    http://notre-monde.com//decapsuleuses.com/test

    - je clique sur la miniature projet 5

    - je stock la class du lien cliquer soit: nom5

    - Je créer mes lien next et prev avec les class nom6 et nom4.

    Merci par avance de votre aide

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2007
    Messages
    228
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 228
    Par défaut
    Re bonjour après une journée de test j'ai réussi a avancer.

    http://notre-monde.com/decapsuleuses.com/test

    Maintenant lorsque l'ont clique sur une miniature un lien next et prev apparait dans la div.
    Ces liens possèdent comme class les class de la miniature suivante et précédente.

    Malheuruesement au clique sur ces liens au lieu de fermer le projet en cours et d'ouvrir le projet suivant ou précédent rien ne se passe..

    Pouvez vous me dire ce qui cloche?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
     
    $('#test .liens-ref a').live('click',function(e){
    		e.preventDefault();
    		var dataLink = $(this).attr('class');
    		var dataLinkSplit = dataLink.split('nom');
    		var dataLinkNext = parseInt(dataLinkSplit[1]) + 1;
    		var dataLinkPrev = parseInt(dataLinkSplit[1]) - 1;
    		var switchP = '<ul class="switchProject"><li class="prev"><a href="" class="nom'+dataLinkPrev+'">prev</a></li><li class="next"><a href="" class="nom'+dataLinkNext+'">next</a></li></ul>'
    		$('.prout').remove();	
     
    		if($('#'+dataLink).size()){
    			var copyRef = $('#'+dataLink).clone();
    			$this = $(this).parent();
    			copyRef.appendTo($this).addClass('prout').slideDown(500,function(){
    				$(this).append(switchP);
    			});	
    		}
    	});
    Pour info ma console javascript ne me remonte aucun bug.

    Merci au gens qui essayerons éventuellement de m'aider

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2007
    Messages
    228
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 228
    Par défaut
    Personne ne peux donc m'aider?

    peut être ai-je mal exposé mon soucis?

  5. #5
    Membre émérite
    Avatar de dkmix
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    619
    Détails du profil
    Informations personnelles :
    Localisation : Jamaïque

    Informations forums :
    Inscription : Septembre 2007
    Messages : 619
    Par défaut
    Bonjour,
    jquery pocède une fonction prev() et next() surement utile dans votre cas

  6. #6
    Membre chevronné
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Avril 2011
    Messages
    271
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Italie

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Avril 2011
    Messages : 271
    Par défaut
    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()
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    #test ul.switchProject {display : none;}
    reste a definir les fonctions precedent et suivant
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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;
    		}

Discussions similaires

  1. Comment ajouter du contenu dans les cadres de mon portfolio
    Par rednekk dans le forum ActionScript 1 & ActionScript 2
    Réponses: 1
    Dernier message: 10/03/2009, 11h57
  2. Ajouter une case à cocher par ligne dans mon tableau
    Par beegees dans le forum Langage
    Réponses: 4
    Dernier message: 02/11/2008, 10h30
  3. Réponses: 5
    Dernier message: 02/07/2008, 13h26
  4. Réponses: 2
    Dernier message: 25/06/2007, 20h31
  5. [JavaScript] [FAQ] Pourquoi mon script JS ajouté à ma page avec innerHTML ne marche-t-il pas ?
    Par FremyCompany dans le forum Contribuez
    Réponses: 6
    Dernier message: 05/03/2007, 20h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo