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
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
A voir également:
- Javascript : Menu dynamique Mootools
- Telecharger javascript - Télécharger - Langages
- Javascript echo ✓ - Forum PHP
- Table de multiplication javascript ✓ - Forum Javascript
- Erreur #125 javascript - Forum Mozilla Firefox
- Xxwxx dll virus javascript - Forum Virus
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
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.)
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)
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)
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
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 :)
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 :)