Comment créer une liste deroulante? [Résolu]

Signaler
Messages postés
41
Date d'inscription
mardi 17 janvier 2006
Statut
Membre
Dernière intervention
14 octobre 2009
-
Messages postés
41
Date d'inscription
mardi 17 janvier 2006
Statut
Membre
Dernière intervention
14 octobre 2009
-
Bonjour,

Voilà, je suis entrain de créer un catalogue pour ma boite, je possède plusieurs produits dont certains ont plusieurs références (produits pour le traitement des eaux, donc plusieurs diamètres entrés/sorties avec des prix différents). Je voudrai savoir comment faire pour créer une sorte de liste comme sur « Notepad ++ » ou « Dreamweaver » qui permet de masquer tout le contenu (les différentes références) avec une petite crois "+" pour développer et "-" pour réduire. Je sais pas si il faut le faire en PHP ou JavaScript.
En espérant avoir été claire,


Merci

AT

12 réponses

Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
10
AaTTENTION : java !=
Javascript
...

Bref, en effet, il y a un problème sur PHPCS, c'est que quand tu met un code entre balise [ code = "qqch" ] [ /code ] tu perds la mise en forme.

Et javascript est très pointilleux la dessus oui...
innerHTML
getElementById

Bien vu
_________________________________
Min iPomme
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
10
Tout ce qui relève de l'interaction coté client seras fais avec du JavaScript, le php étant uniquement destiné au serveur, donc il faudra se tourner en effet vers le JavaScript...

Pour réaliser ton menu, tu auras besoin d'afficher/masquer un élément de ta page :

Récupérer un élément d'une page par son ID :

document.getElementById()

Changer la visibilité d'un élément :

element.style.display (block/none)

Ensuite, tu voudras certainement changer l'image de ton plus par une image de moins et inversement... Dans ce cas tu auras besoin encore une fois de document.getElementById() et de element.src...


Je te conseil de mettre le tout dans une fonction (Affichage de l'élément et changement du plus en moins si l'élément est masqué et inversement si celui-ci est affiché.

Enfin pour appeler ta fonction, tu auras un lien sur ton plus/moins. L'appel se fais via le onClickdu lien.

Voilà, poste ton avancement ici si tu veux que je jette un coup de neuil...
_________________________________
Min iPomme
Messages postés
41
Date d'inscription
mardi 17 janvier 2006
Statut
Membre
Dernière intervention
14 octobre 2009

Salut,

Merci pour ton mail, je regarde et je posterai ce que j'ai fais par la suite.

A+

AT
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
10
De rien j'attends ton travail


_________________________________
Min iPomme
Messages postés
41
Date d'inscription
mardi 17 janvier 2006
Statut
Membre
Dernière intervention
14 octobre 2009

Salut,

Alors voici ce que j'ai fais :

<script type= "text/javascript">
function showhide(blocid) {
  var monbloc= document.getElementById(blocid);
  if (!monbloc) return;
  monbloc.style.display = (monbloc.style.display=="none" ) ? "block" : "none";
}
</script>


et code :

<?php
//Requete SQL dans le SGBDR
$reqliste="SELECT * FROM produits ORDER BY num";
$liste = mysql_query($reqliste);
$i=1;
$j=2;
                        //bl est la variable pour definir l'id de chaque bloc
$bl=1;
                             //Lecture de la colomne 'description' dans le SGBDR
while ($boucle = mysql_fetch_array($liste)) 
{
?><?php
echo " ".$boucle['dev']." 

";
//je teste savoir si il y a plusieurs reference (0 =une seule, 1=debut de reference et 2=fin de liste reference
                        if($boucle['bloc']==1)
{?>

[# ')">+]

" style="display:none;"><?php }	
echo ''; //Le $i est impoimportant pour que deux checkboxes n'aient pas le meme nom
//" height="100" width="100" style="margin-right: 10px;"/>
<?php
echo $boucle['description'];?>

[catalogue/<?php echo $boucle['liens']; ?> Plus de détails] 
    
    
<?php
echo "
prix : ".$boucle['prix']." euros HT | Quantité : ";?>" type="text" size="2" maxlength="5" />


//je teste savoir si il s'agit de la derniere reference du produit		
<?php if($boucle['bloc']==2)
{$bl=$bl+1; ?>
 <?php } ?>
<?php	
$i=$i+1;
$j=$j+1;
}
?>
    




Voilà ce que j'ai fais hier, par contre pour le changement du plus en moins, je n'ai pas tros compris, donc si on peut voir à deux.

A+

Arnaud
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
10
Alors et bien comme c'est pas une immage mais juste le texte "+" dans ton lien, rien de plus simple :

<!-- Ici en passant le this en paramètre, tu auras dans ta fonction, directement l'élément cliqué en variable... -->
[# ', this)">+]


Ensuite ya plus cas changer le texte du 2ème élément de ta fonction :

<script type="text/javascript">
function showhide(blocid, ellien) {
  var monbloc= document.getelementbyid(blocid);
  if (!monbloc) return;
  monbloc.style.display = (monbloc.style.display=="none" ) ? "block" : "none";
  ellien.innerHTML = (ellien.innerHTML=="+" ) ? "-" : "+";
}
</script>


innerHTML récupere le texte entre les balises et ...

_________________________________
Min iPomme
Messages postés
41
Date d'inscription
mardi 17 janvier 2006
Statut
Membre
Dernière intervention
14 octobre 2009

Oki, je vais tester tout à l'heure et je te tiens au courant.

Merci

Arnaud
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
10
Au pir si t'as des blem avec le this, tu lui met la même id que ta balise à masquer suivis de _link par exemple...


function showhide(blocid) {
var monbloc= document.getelementbyid(blocid);
if (!monbloc) return;
var monlien= document.getelementbyid(blocid + '_link');
monbloc.style.display = (monbloc.style.display=="none" ) ? "block" : "none";
monlien.innerhtml = (monlien.innerhtml=="+" ) ? "-" : "+";
}
</script></code>

_________________________________
Min iPomme
Messages postés
41
Date d'inscription
mardi 17 janvier 2006
Statut
Membre
Dernière intervention
14 octobre 2009

Re,

J'ai testé la premier solution mais sans effet, par contre la 2 eme j'ai test sans effet aussi, mais je pense que je me suis planté dans l'implémentation du code (avec ton _link, je sais pas ou il faut que je le mette car j'ai pas trop compris)
Messages postés
567
Date d'inscription
mercredi 4 octobre 2006
Statut
Membre
Dernière intervention
30 août 2011
10
// ...

[# ')" id="<?php echo $bl ?>_link">+]

" style="display:none;">
// ....


_________________________________
Min iPomme
Messages postés
41
Date d'inscription
mardi 17 janvier 2006
Statut
Membre
Dernière intervention
14 octobre 2009

Voilà ce que j'ai fais, mais cela ne fonctionne tjs pas :

<script type= "text/javascript">
function showhide(blocid) {
  var monbloc= document.getElementById(blocid);
  if (!monbloc) return;
  var monlien= document.getElementById(blocid + '_link');
  monbloc.style.display = (monbloc.style.display=="none" ) ? "block" : "none";
  monlien.innerhtml = (monlien.innerhtml=="+" ) ? "-" : "+";
}
</script>


et


while ($boucle = mysql_fetch_array($liste)) 
{
?><?php
echo " ".$boucle['dev']." 

";
if($boucle['bloc'] ==1)
{?>

[# ')" id="<?php echo $bl ?>_link">+]

" style="display:none;"><?php }
//Lecture de la colomne 'description' dans le SGBDR



echo ''; //Le $i est impoimportant pour que deux checkboxes n'aient pas le meme nom
//" height="100" width="100" style="margin-right: 10px;"/>
<?php
echo $boucle['description'];?>

[catalogue/<?php echo $boucle['liens']; ?> Plus de détails] 
    
    
<?php
echo "
prix : ".$boucle['prix']." euros HT | Quantité : ";?>" type="text" size="2" maxlength="5" />


<?php if($boucle['bloc']==2)
{$bl=$bl+1; ?>
 <?php } ?>
<?php	
$i=$i+1;
$j=$j+1;
}
?>


Est ce que l'erreur peut venir d'une majuscule qu'on n'a pas mit, vu que java est pointillions la dessus?

Merci pour ton aide
Messages postés
41
Date d'inscription
mardi 17 janvier 2006
Statut
Membre
Dernière intervention
14 octobre 2009

Hello,

Je te confirme que c'est bien ça le problème, maintenant celà fonctionne à merveille.

Encore merci pour ton aide,

A bientot

Arnaud