recuperer valeur html -> javascript

recuperer valeur html -> javascript - HTML/CSS - Programmation

Marsh Posté le 24-04-2006 à 16:29:08    

Bonjour tout le monde!
 
Voila ca fait un moment que je m'acharne sur un menu dynamique extensible.
 
Je veux dans le code html suivant:
 

Citation :

<ul id="menu">
  <li>Menu :</li>
 
   <li id='statique.htm'>Pesage statique
      <ul>
    <li onMouseDown="javascript:lien_a_recup='melange.htm'">Composition de melanges
            <ul>
      <li><a href="javascript:charger('#','essai.htm')">essai</a></li>
   </ul>
  </li>
   </ul>
   </li>


 
récupérer la valeur du lien correspondant à chaque partie. Ici pour essai pas de prob on appelle directement la fonction charger mais pour les parties qui ouvrent un lien mais qui doivent aussi ouvrir les sous menus correspondant je fais appel a des autres fonctions (dans menu.js). J'aimerai donc avoir la valeur du lien à pointer dans une variable pour l'utiliser.  
 
Je ne sais pas si j'ai été assez clair.. :pt1cable:  
 
J'ai essayé de mettre un ID au tag <li> mais je ne sais pas comment le récuperer. (machin.firstChild.id ca marche pas apparemment.  
J'ai aussi essayé avec onMouseOver je stocke le lien dans une variable mais dans mes autres fonctions après j'ai aussi un OnMouseDown donc il y a conflit des fois il trouve pas la valeur de lien_a_recup.
 
Merci si vous avez compris   :jap:
 
Pour préciser, bout de code javascript:

Code :
  1. if(L.getElementsByTagName('ul')[0]){ // sous-menu éxistant
  2.     titre=L.firstChild.data;
  3. L.removeChild(L.firstChild);
  4.     L.innerHTML='<a href="#" title="développer" onkeydown="af(this,page2)"
  5. onmousedown="af(this,page2);return false">'+titre+'<\/a>'+L.innerHTML;
  6. ef(L.firstChild); // réduit les sous_menus
  7.   }


Code :
  1. function af(el,pagedeux) { // développe un sous-menu .
  2. L.firstChild.href=charger('#',pagedeux);

Message cité 1 fois
Message édité par bnas le 24-04-2006 à 17:02:06
Reply

Marsh Posté le 24-04-2006 à 16:29:08   

Reply

Marsh Posté le 24-04-2006 à 16:42:57    

bnas a écrit :

Ici pour essai pas de prob on appelle directement la fonction charger mais pour les parties qui ouvrent un lien mais qui doivent aussi ouvrir les sous menus correspondant je fais appel a des autres fonctions (dans menu.js).


Tu voudrais des item qui "déployent" les sous-menus associés et en même temps ouvrent un lien ( dans une autre frame ou un popup j'imagine), c'est bien ça?

Reply

Marsh Posté le 24-04-2006 à 17:00:19    

tout a fait.  
 
voici index.htm:
 

Citation :


<FRAMESET COLS="230,*">
 <FRAME NAME="left" SRC="menu.htm">
 <FRAME NAME="right" SRC="">
</FRAMESET>


 
 
Le problème est que je ne peux pas utiliser la balise <a></a> comme pour la partie essai car lorsqu'il s'agit d'un menu ouvrant un sous menu je fais déjà un L.innerHTML='<a href.....


Message édité par bnas le 24-04-2006 à 17:08:13
Reply

Marsh Posté le 24-04-2006 à 17:09:38    

bon j'avais fait un arbre y'a pas longtemps dans le même genre ( http://forum.hardware.fr/forum2.ph [...] w=0&nojs=0 )
En le modifiant a peine ça doit faire ce que tu veux:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Test</title>
  7.   <script type="text/javascript">
  8.   /*** param is a node which has been clicked ***/
  9.   function show(lnkNode){
  10.     var sonsNode = lnkNode.parentNode.getElementsByTagName('*');
  11.     if ( sonsNode.length >= 1 && sonsNode[1].tagName == 'UL' && sonsNode[1].className == "disp" ){
  12.       sonsNode[1].className = "";
  13.       lnkNode.parentNode.className = "";
  14.     } else {
  15.       sonsNode[1].className = "disp";
  16.       lnkNode.parentNode.className = "disp";
  17.     }
  18.     return true;
  19.   }
  20.   </script>
  21.   <style type="text/css">
  22.   ul{
  23.     display: none;
  24.   }
  25.   ul.disp{
  26.     display: block;
  27.   }
  28.   li{
  29.     display : list-item;
  30.     list-style-image : url(plus.png);
  31.     list-style-position: outside;
  32.   }
  33.   li.disp{
  34.     list-style-image : url(minus.png);
  35.   }
  36.   </style>
  37. </head>
  38. <body >
  39.    <ul class="disp">
  41.      <li>
  42.        <a href="truc.html" target="right" onclick="return show(this)">Truc 1:</a>
  43.        <ul>
  44.          <li>Truc 1_1</li>
  45.          <li>Truc 1_2</li>
  46.          <li>
  47.    <a href="truc.html" target="right" onclick="return show(this)">Truc 1_3:</a>
  49.    <ul>
  50.              <li>Truc 1_3_1</li>
  51.              <li>Truc 1_3_2</li>
  52.              <li>Truc 1_3_3</li>
  53.              <li>Truc 1_3_4</li>
  54.      <li>
  55.                <a href="truc.html" target="right" onclick="return show(this)">Truc 1_3_5:</a>
  57.        <ul>
  58.                  <li>Truc 1_3_5_1</li>
  59.                  <li>Truc 1_3_5_2</li>
  60.                  <li>Truc 1_3_5_3</li>
  61.                  <li>Truc 1_3_5_4</li>
  62.        </ul>
  63.      </li>
  65.    </ul>
  66.  </li>
  67.        </ul>
  68.      </li>
  69.      <li>
  70.        <a href="truc.html" target="right" onclick="return show(this)">Truc 2:</a>
  71.        <ul>
  72.          <li>Truc 2_1</li>
  74.          <li>Truc 2_2</li>
  75.          <li>
  76.    <a href="truc.html" target="right" onclick="return show(this)">Truc 2_2_3</a>
  77.    <ul>
  78.              <li>Truc 2_2_3_1</li>
  79.              <li>Truc 2_2_3_2</li>
  80.              <li>Truc 2_2_3_3</li>
  82.    </ul>
  83.  </li>
  84.        </ul>
  85.      </li>
  86.    </ul>
  87. </body>
  88. </html>


et si ça te va pas, détailles un peu plus le fonctionnement de ton menu :)

Reply

Marsh Posté le 24-04-2006 à 17:17:55    

merci je vais voir ce que je peux faire

Reply

Marsh Posté le 25-04-2006 à 08:48:30    

Est-ce qu'il n'y aurait pas un moyen de récupérer dans la balise <li> une variable qui contiendrait l'adresse du lien vers lequel elle pointe pour l'utiliser dans le code javascript?
 
par exemple:

Code :
  1. <li>< PAGE2= 'statique.htm'> Pesage statique
  2. <ul>...
  3.    </ul>
  4.   </li>


Code :
  1. ...     
  2. if(L.getElementsByTagName('ul')[0]){ // sous-menu éxistant
  3.          titre=L.firstChild.data;
  4.           L.removeChild(L.firstChild);
  5.          L.innerHTML='<a href="#" title="développer" onkeydown="af(this,PAGE2)"
  6.       onmousedown="af(this,PAGE2);return false">'+titre+'<\/a>'+L.innerHTML;
  7.           ef(L.firstChild); // réduit les sous_menus
  8.        }


 
mais pour chaque lien la variable PAGE2 va changer. JE sais plus comment faire la. Anajpari ton menu est bien mais celui que j'ai la permet d'avoir un lien ouvert par défaut ou encore de n'avoir qu'un seul sous menu ouvert par niveau.
 
Peut être avez vous une solution (meme en PHP..)


Message édité par bnas le 25-04-2006 à 09:09:06
Reply

Marsh Posté le 25-04-2006 à 11:23:57    

youhou j'ai trouvé comment faire! c'est pas terrible au niveau du code mais c'est le seul moyen que j'ai trouvé
 
j'ai remplacé ceci:

Code :
  1. //ajoute un titre cliquable
  2.    if(L.getElementsByTagName('ul')[0]){ // sous-menu éxistant
  3.    titre=L.firstChild.data;
  4.    L.removeChild(L.firstChild);
  5.    L.innerHTML='<a href="#" title="développer" onmousedown="af(this,page2,1);return false">'+titre+'<\/a>'+L.innerHTML;
  6.    ef(L.firstChild); // réduit les sous_menus
  7.    }


par:

Code :
  1. //ajoute un titre cliquable
  2.    if(L.getElementsByTagName('ul')[0]){ // sous-menu éxistant
  3.    titre=L.firstChild.data;
  4.    L.removeChild(L.firstChild);
  5.    lier(L);
  6.    ef(L.firstChild); // réduit les sous_menus
Code :
  1. function lier(el){
  2.  switch (el.id) {
  3.          case "statique" : el.innerHTML='<a href="#" title="développer"
  4. onmousedown="af(this,\'statique.htm\',1);return false">'+titre+'<\/a>'+el.innerHTML;break;
  5.          case "melange"  : el.innerHTML='<a href="#" title="développer"
  6. onmousedown="af(this,\'melange.htm\',1);return false">'+titre+'<\/a>'+el.innerHTML;break;
  7.          case "dynamique": el.innerHTML='<a href="#" title="développer"
  8. onmousedown="af(this,\'dynamique.htm\',1);return false">'+titre+'<\/a>'+el.innerHTML;break;
  9. ...
  10. }}


tout simplement!!
en rajoutant un ID à chaque tag <li> suivi d'un <ul> (càd suivi de sous menu)


Message édité par bnas le 25-04-2006 à 11:26:29
Reply

Sujets relatifs:

Leave a Replay

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