Javascript : Menu dynamique Mootools

Résolu/Fermé
blackgod Messages postés 33 Date d'inscription mardi 4 novembre 2008 Statut Membre Dernière intervention 2 mai 2009 - 4 nov. 2008 à 11:54
blackgod Messages postés 33 Date d'inscription mardi 4 novembre 2008 Statut Membre Dernière intervention 2 mai 2009 - 6 nov. 2008 à 12:17
Bonjour,

Je travail actuellement sur un site web.
Le contenu de ce site est totalement dynamique. Il permet notamment la création d'un menu avec de catégories et rubriques (équivalent menu & sous-menu) récupéré dans la base de donnée.

Je souhaite mettre en forme ces menus avec la librairie mootools : http://demos.mootools.net/Mouseenter (Menu example).

Venons en au fait.
Pour utiliser cette librairie, il faut que chaque partie du menu possède un ID :
Dans l'exemple et de mon test en cours, le nom de cet ID est : "myOtherElement"+i (i correspondant au numéro de la catégorie).

Etant donné que chaque div "myOtherElement"+i possède un nombre de rubrique différent, la taille de la div doit donc varier en fonction.
Problème : avec la librairie de base on a une taille de div équivalente quel que soit la div en question.
J'ai donc essayé de créer une variable de taille en pixel basée sur le nombre de rubrique contenu dans la catégorie.
Mais a chaque fois la variable ne passe pas.

Trève de blablatage, le code sera plus parlant.

<?php

        //On récupère le nombre de Catégorie
        $nbrCat = mysql_result(mysql_query('SELECT COUNT(*) FROM site_categorie'), 0); 
	$nbrCat = $nbrCat-1;

	for( $i = 0; $i<=$nbrCat; $i++)
	{		
	$idCat = mysql_fetch_array(mysql_query('SELECT cat_id FROM site_categorie WHERE cat_ordre ="'.($i+1).'"')) or die (mysql_error());
		$nbrRub = mysql_result(mysql_query('SELECT COUNT(*) FROM site_rubrique WHERE rub_cat_id = "'.$idCat['cat_id'].'"'),0);
                
                //Je crée un tableau avec en clef, le numéro de la cat, en valeur son nombre de rubrique
		$listeNbrRub[$i] = $nbrRub; 
	}
	?>	
	<script language="javascript" type="text/javascript">
	
        //Petite bidouille pour transformer ma valeur récupérée en PHP en JS
	var nbrCat = <?php echo $nbrCat;?>;
        //On s'assure que la valeur soit bien un int
	nbrCat = parseInt(nbrCat);

        //Fonction permettant de transformer mon tableau PHP en tableau JS, dans mon cas il retourne le tableau qui suit	
	<?php echo php2js($listeNbrRub,'leNbrRub');?>	

        leNbrRub = new Array();
leNbrRub[0] = '3';
leNbrRub[1] = '1';
leNbrRub[2] = '1';
leNbrRub[3] = '0';
leNbrRub[4] = '0';

//On passe ici a la fonction de menu mootools

window.addEvent('domready', function()
{
	
	for(var j = 0; j<nbrCat+1; j++) //Pour chaque catégorie
	{			
	
		$('myOtherElement'+j).addEvents(  //Ici, "myOtherElement"+j = id de chaque div
                {			
		       'mouseenter': function()
                       {
                             //ici je crée la taille de la div. Dans cet exemple, si je met une valeur au tableau "leNbrRub", cela fonctionne mais la taille est alors la mm pour toutes les div. Ce que je voudrais c'est pouvoir remplacer le 1 de "leNbrRub[1]" par la valeur de "j", mais je n'y arrive pas.
		              var size = 20+leNbrRub[1]*20;		

		               // Always sets the duration of the tween to 1000 ms and a bouncing transition
		              // And then tweens the height of the element
		              this.set('tween',
                              {			
		                     duration: 1000,
		                     transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
		               }).tween('height', size+'px'); //Ici on inscrit la taille souhaitée
		       },
		       'mouseleave': function()
                       {
		       // Resets the tween and changes the element back to its original size
		       this.set('tween', {}).tween('height', '20px');
		       }
	        });	
	}
});	


Exemple de div

<div id="myOtherElement1" style="width: 200px;	height: 20px; overflow: hidden;	border: 1px solid black; background-color: #f9f9f9; ">
	<a href="index.php?cat=2">categorie 2</a>
	<div>				
		<span style="display: block;padding: 0 3px;">
                           <a style="display: block;padding: 0 3px;" href="index.php?cat=2&rub=4">2-1 rubrique</a>
                </span>		
	</div>
</div>


Voilà, n'hésitez pas à me demander des informations si necessaire.
Merci par avance pour votre aide.

PS : j'espère que l'indentation n'est pas trop ratée, pas évident sur ce forum d'avoir un rendu propre.

2 réponses

blackgod Messages postés 33 Date d'inscription mardi 4 novembre 2008 Statut Membre Dernière intervention 2 mai 2009 4
6 nov. 2008 à 12:17
C'est bon en fait, j'ai réglé le problème.
Je ne m'y prenais pas du tout comme il fallait. Ou presque.

Je place le code pour ceux que ça intéresserait à l'avenir. (vous remarquerez que c'était bcp plus simple que ce que je faisais, c'est juste que je n'utilisais pas le bon outil, à savoir "event" au lieu de "accordion". En l'occurence j'associe les deux. En effet, un Event est ajouté à l' accordion, permettant ainsi le hover.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="demo.css" type="text/css" />
	<script type="text/javascript" src="../mootools.js"></script>
	
<script type="text/javascript" >
<!--
window.addEvent('domready', function() {		
	//create our Accordion instance
	var myAccordion = new Accordion($('accordion'), 'h1.toggler', 'div.element', {
		opacity: false,
		onActive: function(toggler, element){
			toggler.setStyle('color', '#41464D');
		},
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#528CE0');
		}	
	});	
	//make it open on hover  
	$$('.toggler').addEvent('mouseenter', function() { this.fireEvent('click'); });  
});
	
//-->
</script>
<?php
	$adresse='localhost';
	$nom='root';
	$mdp='';
	$database='jpp_20';
	mysql_connect($adresse, $nom, $mdp);
	mysql_select_db($database);
?>
</head>
<body>
	<div id="accordion">
        //Rubrique créé manuellement
	<a href="index.php"><h1 class="toggler">Index</h1></a>
	<div class="element"></div>
<?php
	//On récupère toutes les catégories et leur titre
	$datacat = mysql_query ('SELECT cat_id, cat_titre FROM site_categorie ORDER BY cat_ordre') or die (mysql_error());
	
	//On lance une boucle while qui affiche toutes les catégories
	while($requetecat = mysql_fetch_array($datacat))
	{
	?>
	<a href="index.php?cat=<?php echo $requetecat['cat_id'] ;?>"><h1 class="toggler"><?php echo $requetecat['cat_titre'] ;?></h1></a>
	<?php
		//On récupère les rubriques appartenants au catégories respectives
               //Rubrique créé dynamiquement
		$datarub = mysql_query('SELECT rub_titre, rub_id
		FROM site_categorie
		LEFT JOIN  site_rubrique ON site_categorie.cat_id = site_rubrique.rub_cat_id
		WHERE site_categorie.cat_id = "'.$requetecat['cat_id'].'"
		ORDER BY site_rubrique.rub_ordre') or die (mysql_error());
		?>
		<div class="element">
		<?php
		//On lance une boucle while qui affiches toutes les rubriques appartenant à la catégorie
		while($requeterub = mysql_fetch_array($datarub))
		{
		?>
		<h2><a href="index.php?cat=<?php echo $requetecat['cat_id'] ;?>&rub=<?php echo $requeterub['rub_id'] ;?>"><?php echo $requeterub['rub_titre'] ;?></a></h2>				
		<?php
		}
		?>
		</div>
		<?php
	}	
?>
	</div>
</body>
</html>


En gras, les lignes de codes correspondant à l'utilisation de mootools.
NB : même si une catégorie ne contient rien, il est obligatoire de créer la div avec class "element", sinon mootools rapporte une erreur.

J'ai le rendu que je souhaitais :
Chaque catégorie est développée sous forme d'accordéon.
Quand je passe la sourie par dessus une catégorie, l'accordéon se déplie présentant par la même occasion mes rubriques. Si je souhaite accéder à une page, il ne reste plus qu'à cliquer ou sur la catégorie, ou sur une rubrique.

Pour plus de détail, se référer aux liens suivant :
http://demos.mootools.net/Accordion //Code source de l'accordion
https://davidwalsh.name/mootools-accordion-hover-event#comment-3709 //Ajout de l'Event sur l'accordion (au lieu du click)
3
blackgod Messages postés 33 Date d'inscription mardi 4 novembre 2008 Statut Membre Dernière intervention 2 mai 2009 4
4 nov. 2008 à 18:30
Bon et bien c'est un début, je viens de me rendre compte de ma bourde.
A la base j'avais testé le code avec une boucle for afin de voir s'il était possible d'adapter 1 code pour plusieurs menu. Ce qui en l'occurence fonctionne.

Mais étant donné que dans mon cas, ce qui m'intéresse c'est plus de fonctionner à base de cas particulier, la boucle for ne sert plus à grand chose.

En fait j'aimerais savoir si vous avez une idée de comment transférer une variable correspondant à "j" depuis (par exemple) un "mouseover" jusqu'à la "fonction mootools" ?

Merci :)
0