[Javascript] Petit problème de fonction

Petit problème de fonction [Javascript] - HTML/CSS - Programmation

Marsh Posté le 13-07-2005 à 20:24:33    

J'ai un joli code ci-dessous
 
bon le but de ce code est de faire un menu basé sur des listes à puces et des sous-listes.
Le JS est intrusif, donc du coup un visiteur sans javascript verrai le menu. Pour le moment c'est juste un truc pour ma yeule, juste pour voir comment ca marche tout ce joli monde.
 
Les sous-listes doivent s'afficher lors d'un clic de souris (Me dites pas que JS c'est pas bien ca je le sais)
 
Mon problème se situe à cette ligne là :

Code :
  1. li[i].getElementsByTagName('A')[0].onclick = function() {
  2.     ShowHideMenu("sousmenu" + i);
  3.   }


 
dans ce code je veux que le onclick de mon lien (qui correspond à un noeud du menu, contienne la fonction :  
ShowHideMenu("sousmenu" + i);
 
Je pensais que lors de la génération du code j'aurai mon onclick égal à :  

Code :
  1. ShowHideMenu("sousmenu5" )


 
ce qui signifie par là qu'il y aurait eu concaténation de I avec la string "sousmenu".
 
Mais il en est tout autrement, la fonction onclick comporte le code :  

Code :
  1. ShowHideMenu("sousmenu" + i);


 
J'ai essayé avec un eval et tout le tralala, et ca ne marche pas.
bien évidement, il était plus simple de faire :  

Code :
  1. monlienA.href="javascript:ShowHideMenu('sousmenu'" + i + " );";


 
Mais moi j'aime pas, et si on veut un autre évènement que le click, ca ne passe pas, par exemple :onmouseover
 
Donc si quelqu'un a une idée je suis ouvert (des oreilles pas ailleur les gars).
 
 
Voici le code, je sais ya pas de doctype, mais là le but du jeu, c'est juste faire du JS propre.

Code :
  1. <html>
  2. <head>
  3. <title></title>
  4. <style>
  5. #menu{/*Le menu global*/
  6.  margin:0;/*j'enlève les marges externe du Menu (sous IE)*/
  7.  padding:0; /*j'enlève les marges internes du menu sous les autres navigateurs*/
  8. }
  10. #menu li{/*Les blocs LI sont stylés, cette syntaxe comprend tous les blocs LI, même les sous menus*/
  11.  background-color:silver;
  12.  float:left;
  13.  list-style: none; /*on supprime les puces*/
  14. }
  15. #menu li a{/*On style tous les liens du menu, y compris les sous-menus*/
  16.  display: block;/*on met les liens en bloc afin de les traiter pour la largeur*/
  17.  color:black;
  18.  text-decoration: none;/*pas de souligné*/
  19.  text-align:center;/*texte centré*/
  20.  width:100px;
  21. }
  22. #menu li A:hover{/*on traite les liens lors du survol. Donc pour cela il faut que le A prenne toute la largeur du LI*/
  23.  background-color:gray;
  24.  color:white;
  25. }
  27. /*Les sous Menus*/
  28. #menu li ul{/*les blocs de sous menu*/
  29.  margin:0;
  30.  padding:0;
  31.  border:1px solid black;
  32. }
  34. #menu li ul li{/*les blocs lu de sous menu*/
  35.  float:none; /*on retire le flottement pour les sousbloc LI*/
  36. }
  37. #menu li ul li a{/*on traite les liens cette fois-ci*/
  38.  background-color: White;/*on met une couleur blanche en fond*/
  39.  width:98px;
  40. }
  41. #menu li ul li a:hover{
  42.  background-color: silver;/*on met une couleur argent au survol*/
  44. }
  45. </style>
  46. <script>
  47. function DynamMenu(){
  48.  if(!document.getElementsByTagName) //On teste si on a le droit de faire mumuse avec le DOM sur les TAGNAME
  49.   return;
  50.  var Menu = document.getElementById('menu'); //On récupère le menu
  51.  var li = Menu.getElementsByTagName('LI'); //On récupère tous les LI du menu
  52.       for(var i=0; i<li.length-1; ++i) { //On scanne tous les LI
  53.    var sousUL = li[i].getElementsByTagName('UL'); //Pour chaque LI on recupère le UL dessous
  54.    if (sousUL[0]) { //On vérifié qu'il y a un UL dans le LI
  55.     sousUL[0].id = 'sousmenu' + i; //On met un ID à ce UL
  56.     sousUL[0].style.display = "none";//On cache le sous menu
  57.     //var FonctionOver = "function() {\n";
  58.     var FonctionOver = "";
  59.     li[i].getElementsByTagName('A')[0].onclick = function() {
  60.      ShowHideMenu("sousmenu" + i);
  61.     }
  63.    } 
  64.   }
  65. }
  66. window.onload = DynamMenu;
  70. function ShowHideMenu(MenuId){
  71.  var SousMenu = document.getElementById(MenuId);
  72.  if (SousMenu.style.display=='block' || SousMenu.style.display == null) {
  73.   SousMenu.style.display = 'none'; //ON cache le sous menu
  74.  }
  75.  else{
  76.   SousMenu.style.display = 'block'; //On affiche le sous menu
  77.  }
  79. }
  80. </script>
  81. </head>
  83. <body>
  84. <ul id="menu">
  85. <li><a href="#">Truc a cliquer</a>
  86.  <ul id="test">
  87.   <li><a href="#">lien</a></li>
  88.   <li><a href="#">infos 12</a></li>
  89.  </ul>
  90. <li><a href="#">lien</a>
  91.  <ul id="test">
  92.   <li><a href="#">lien</a></li>
  93.   <li><a href="#">infos 12</a></li>
  94.  </ul>
  95. </li>
  96. <li><a href="#">clic là aussi</a>
  97.  <ul>
  98.   <li><a href="#">lien</a></li>
  99.   <li><a href="#">lien</a></li>
  100.   <li><a href="#">lien</a></li>
  101.  </ul>
  102. </li>
  103. </ul>
  104. </body>
  105. </html>

Reply

Marsh Posté le 13-07-2005 à 20:24:33   

Reply

Marsh Posté le 13-07-2005 à 20:25:49    

Pas d'interêt à mettre un id, suffit de récupérer le sub-ul à chaque fois, et de le planquer ou non

Reply

Marsh Posté le 13-07-2005 à 20:30:43    

heu, plutot récuperer l'élément suivant
 
car là dans l'arbre du DOM j'ai

Code :
  1. UL
  2. --LI
  3.    |-A
  4.    |-UL
  5.    |  |-LI

Reply

Marsh Posté le 13-07-2005 à 20:31:36    

Ouais voilà ;)

Reply

Marsh Posté le 13-07-2005 à 20:40:28    

Salaud à cause de toi j'ai simplifié encore plus mon code.
 
au passage le code précédent comportait des id sur les sous-menu parce que c'etait un code de test, merci de votre comprehension
 

Code :
  1. <html>
  2. <head>
  3. <title></title>
  4. <style>
  5. #menu{/*Le menu global*/
  6.  margin:0;/*j'enlève les marges externe du Menu (sous IE)*/
  7.  padding:0; /*j'enlève les marges internes du menu sous les autres navigateurs*/
  8. }
  10. #menu li{/*Les blocs LI sont stylés, cette syntaxe comprend tous les blocs LI, même les sous menus*/
  11.  background-color:silver;
  12.  float:left;
  13.  list-style: none; /*on supprime les puces*/
  14. }
  15. #menu li a{/*On style tous les liens du menu, y compris les sous-menus*/
  16.  display: block;/*on met les liens en bloc afin de les traiter pour la largeur*/
  17.  color:black;
  18.  text-decoration: none;/*pas de souligné*/
  19.  text-align:center;/*texte centré*/
  20.  width:100px;
  21. }
  22. #menu li A:hover{/*on traite les liens lors du survol. Donc pour cela il faut que le A prenne toute la largeur du LI*/
  23.  background-color:gray;
  24.  color:white;
  25. }
  27. /*Les sous Menus*/
  28. #menu li ul{/*les blocs de sous menu*/
  29.  margin:0;
  30.  padding:0;
  31.  border:1px solid black;
  32. }
  34. #menu li ul li{/*les blocs lu de sous menu*/
  35.  float:none; /*on retire le flottement pour les sousbloc LI*/
  36. }
  37. #menu li ul li a{/*on traite les liens cette fois-ci*/
  38.  background-color: White;/*on met une couleur blanche en fond*/
  39.  width:98px;
  40. }
  41. #menu li ul li a:hover{
  42.  background-color: silver;/*on met une couleur argent au survol*/
  44. }
  45. </style>
  46. <script>
  47. function DynamMenu(){
  48.  if(!document.getElementsByTagName) //On teste si on a le droit de faire mumuse avec le DOM sur les TAGNAME
  49.   return;
  50.  var Menu = document.getElementById('menu'); //On récupère le menu
  51.  var li = Menu.getElementsByTagName('LI'); //On récupère tous les LI du menu
  52.       for(var i=0; i<li.length-1; ++i) { //On scanne tous les LI
  53.    var sousUL = li[i].getElementsByTagName('UL'); //Pour chaque LI on recupère le UL dessous
  54.    if (sousUL[0]) { //On vérifié qu'il y a un UL dans le LI
  55.     sousUL[0].style.display = "none";//On cache le sous menu
  56.     li[i].getElementsByTagName('A')[0].onclick = function() {
  57.       var monUL = this.parentNode.getElementsByTagName('UL')[0];
  58.       if (monUL.style.display=='block' || monUL.style.display == null) {
  59.        monUL.style.display = 'none'; //ON cache le sous menu
  60.       }
  61.       else{
  62.        monUL.style.display = 'block'; //On affiche le sous menu
  63.       }
  64.     }
  65.    }
  66.   }
  67. }
  68. window.onload = DynamMenu;
  69. </script>
  70. </head>
  72. <body>
  73. <ul id="menu">
  74. <li><a href="#">Truc a cliquer</a>
  75.  <ul>
  76.   <li><a href="#">lien</a></li>
  77.   <li><a href="#">infos 12</a></li>
  78.  </ul>
  79. <li><a href="#">lien</a>
  80.  <ul>
  81.   <li><a href="#">lien</a></li>
  82.   <li><a href="#">infos 12</a></li>
  83.  </ul>
  84. </li>
  85. <li><a href="#">clic là aussi</a>
  86.  <ul>
  87.   <li><a href="#">lien</a></li>
  88.   <li><a href="#">lien</a></li>
  89.   <li><a href="#">lien</a></li>
  90.  </ul>
  91. </li>
  92. </ul>
  93. </body>
  94. </html>

Reply

Marsh Posté le 14-07-2005 à 08:19:25    

C'est que ca marche bien en plus :)
 
Je vais m'y mettre peut-etre aussi finalement ^^


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 19-07-2005 à 18:11:56    

PS : au passage, j'ai recréé un menu encore plus dynamique et plus souple sur certaines choses, avec la possibilité de styler certaines classes CSS pour donner une meilleure gueule au menu.
 
j'ai reussi a refaire une arborescence ressemblant à l'explorateur windows rien qu'en style, et avec le JS ca le rend plus fonctionnel. Bon on verra dans une semaine kan je serai revenu

Reply

Marsh Posté le 19-07-2005 à 18:33:55    

J'attends ça avec impatience :)


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 19-07-2005 à 18:46:36    

ben oué faut attendre un peu.
 
en gros, le but du jeu, c'est qu'avec du JS on a un joli menu, et sans JS on a le menu totalement développé. et avec un peu de CSS on fait un joli menu, aussi bien horizontal que vertical

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed