Foros del Web » Programando para Internet » Javascript »

Listeners y Referencias

 Estas en el tema de Listeners y Referencias en el foro de Javascript en Foros del Web. Saludos corillo, Estoy creando un menú y desplegando otro menus usando "listeners". Lo que he hecho hasta ahora @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original ...
  #1 (permalink)  
Antiguo 02/05/2011, 08:37
Avatar de abimaelrc
Colaborador
  
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 15 años, 5 meses
Puntos: 1517
Listeners y Referencias
Saludos corillo,

Estoy creando un menú y desplegando otro menus usando "listeners". Lo que he hecho hasta ahora
Código Javascript: 
Ver original
  1. <div id="menu">
  2.     <ul class="navigation">
  3.         <li style="border: 1px solid #eee;">
  4.             <a href="#">Foo</a>
  5.             <ul style="display: none;">
  6.                 <li style="border: 1px solid #eee;"><a href="#">fooFoo</a></li>
  7.                 <li style="border: 1px solid #eee;"><a href="#">fooBar</a></li>
  8.                 <li style="border: 1px solid #eee;"><a href="#">fooBaz</a></li>
  9.             </ul>
  10.         </li>
  11.         <li style="border: 1px solid #eee;">
  12.             <a href="#">Bar</a>
  13.             <ul style="display: none;">
  14.                 <li style="border: 1px solid #eee;"><a href="#">barFoo</a></li>
  15.                 <li style="border: 1px solid #eee;"><a href="#">barBar</a></li>
  16.                 <li style="border: 1px solid #eee;"><a href="#">barBaz</a></li>
  17.             </ul>
  18.         </li>
  19.         <li style="border: 1px solid #eee;">
  20.             <a href="#">Baz</a>
  21.             <ul style="display: none;">
  22.                 <li style="border: 1px solid #eee;"><a href="#">bazFoo</a></li>
  23.                 <li style="border: 1px solid #eee;"><a href="#">bazBar</a></li>
  24.                 <li style="border: 1px solid #eee;"><a href="#">bazBaz</a></li>
  25.             </ul>
  26.         </li>
  27.         <li style="border: 1px solid #eee;">
  28.             <a href="#">Candy</a>
  29.             <ul style="display: none;">
  30.                 <li style="border: 1px solid #eee;"><a href="#">candyFoo</a></li>
  31.                 <li style="border: 1px solid #eee;"><a href="#">candyBar</a></li>
  32.                 <li style="border: 1px solid #eee;"><a href="#">candyBaz</a></li>
  33.             </ul>
  34.         </li>
  35.         <li style="border: 1px solid #eee;"><a href="#">Fruits</a></li>
  36.         <li style="border: 1px solid #eee;"><a href="#">Vegetable</a></li>
  37.         <li style="border: 1px solid #eee;"><a href="#">twix</a></li>
  38.         <li style="border: 1px solid #eee;"><a href="#">apple</a></li>
  39.         <li style="border: 1px solid #eee;"><a href="#">fiber</a></li>
  40.         <li style="border: 1px solid #eee;"><a href="#">ice cream</a></li>
  41.         <li style="border: 1px solid #eee;"><a href="#">pizza</a></li>
  42.     </ul>
  43. </div>
  44. <script type="text/javascript">
  45. function addListener(element, type, expression, bubbling)
  46. {
  47.     bubbling = bubbling || false;
  48.  
  49.     if(window.addEventListener) { // Standard
  50.         element.addEventListener(type, expression, bubbling);
  51.         return true;
  52.     } else if(window.attachEvent) { // IE
  53.         element.attachEvent('on' + type, expression);
  54.         return true;
  55.     } else return false;
  56. }
  57.  
  58. elem = document.getElementById('menu').firstChild;
  59. while(true){
  60.     switch(elem.nodeName){
  61.         case 'UL':
  62.             elem = elem.firstChild;
  63.             break;
  64.         case 'LI':
  65.             addListener(elem, 'click', function(){
  66.                 childElem = this.firstChild;
  67.  
  68.                 function setBool(bool){ this.value = bool; }
  69.                 var bool = new setBool(true);
  70.  
  71.                 while(true){
  72.                     if(childElem.nodeName == 'UL'){
  73.                         addListener(childElem, 'click', function(){
  74.                             bool.value = false;
  75.                         });
  76.                         break;
  77.                     }
  78.                     childElem = childElem.nextSibling;
  79.                     if(childElem == null){ break; }
  80.                 }
  81.                 if(bool.value && childElem != null){
  82.                     if(childElem.style.display == 'block'){
  83.                         childElem.style.display = 'none';
  84.                     }else{
  85.                         childElem.style.display = 'block';
  86.                     }
  87.                 }
  88.             });
  89.             break;
  90.     }
  91.     elem = elem.nextSibling;
  92.     if(elem == null){ break; }
  93. }
  94. </script>
Con eso puedo mostrar el sub-menu, pero me gustaría que si pulso en el sub-menu no se esconda, sino que de la única forma como puedo esconder el submenu es pulsando en el menu.

Por ejemplo si pulso cualquier parte de foo, o sea en el elemento li muestra el sub-menú. Si vuelvo a pulsar en cualquier parte del elemento li de foo se esconda, pero no se puede esconder si he pulsado dentro del elemento ul dentro de foo.

No puedo crear otros elementos, porque el framework que uso para crearlo lo hace así, tengo que lidiar con ese tipo de menú. Tampoco quiero usar el elemento a porque deseo que se pueda mostrar y esconder el menu cuando pulse en el elemento li.

Traté de crear una variable y que dentro del segundo addListener volver a cambiarla, pero no hubo nada. Entonces pensé que pasando por referencia podía y no se me dió (¿o será que no estoy usando correctamente la referencia?).

Bueno espero a ver si me podrían indicar la mejor forma de hacerlo. Si el código requiere de regaños, adelante que ya tomé un relajante muscular para soportar el dolor de los golpes
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #2 (permalink)  
Antiguo 02/05/2011, 09:34
Avatar de masterpuppet
Software Craftsman
  
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 10 meses
Puntos: 845
Respuesta: Listeners y Referencias
Que tal abimael,

Podrias evaluar el target y si es distinto del li o del a, simplemente hacer un return, creo que era algo así(los efectos de las librerias ),

Código Javascript: 
Ver original
  1. ...
  2. addListener(elem, 'click', function(e) {
  3.  
  4.     var event = e || window.event;
  5.     if(!event.target) {
  6.       event.target = event.srcElement;
  7.     }
  8.     
  9.     childElem = this.firstChild;
  10.  
  11.     if(this != event.target 
  12.             && childElem.nextSibling != event.target) {
  13.         return false;
  14.      }
  15.     
  16.     ...
  17. }

y no seria mejor setear clases a los elementos para despues asignar los eventos ?, esos breaks no estan en el Zend Coding Standard .

Saludos.
__________________
http://es.phptherightway.com/
thats us riders :)
  #3 (permalink)  
Antiguo 02/05/2011, 10:15
Avatar de abimaelrc
Colaborador
  
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 15 años, 5 meses
Puntos: 1517
Respuesta: Listeners y Referencias
Tipo gracias Hasta ahora queda así, pero faltan unos golpes que no he recibido Claro otra forma de hacerlo es así como indicas de lo de asignar la clase, pero mientras, estoy experimentando
Código HTML: 
Ver original
  1. <div id="menu">
  2.     <ul class="navigation">
  3.         <li style="border: 1px solid #eee;">
  4.             <a href="#">Foo</a>
  5.             <ul style="display: none;">
  6.                 <li style="border: 1px solid #eee;"><a href="#">fooFoo</a></li>
  7.                 <li style="border: 1px solid #eee;"><a href="#">fooBar</a></li>
  8.                 <li style="border: 1px solid #eee;"><a href="#">fooBaz</a></li>
  9.             </ul>
  10.         </li>
  11.         <li style="border: 1px solid #eee;">
  12.             <a href="#">Bar</a>
  13.             <ul style="display: none;">
  14.                 <li style="border: 1px solid #eee;"><a href="#">barFoo</a></li>
  15.                 <li style="border: 1px solid #eee;"><a href="#">barBar</a></li>
  16.                 <li style="border: 1px solid #eee;"><a href="#">barBaz</a></li>
  17.             </ul>
  18.         </li>
  19.         <li style="border: 1px solid #eee;">
  20.             <a href="#">Baz</a>
  21.             <ul style="display: none;">
  22.                 <li style="border: 1px solid #eee;"><a href="#">bazFoo</a></li>
  23.                 <li style="border: 1px solid #eee;"><a href="#">bazBar</a></li>
  24.                 <li style="border: 1px solid #eee;"><a href="#">bazBaz</a></li>
  25.             </ul>
  26.         </li>
  27.         <li style="border: 1px solid #eee;">
  28.             <a href="#">Candy</a>
  29.             <ul style="display: none;">
  30.                 <li style="border: 1px solid #eee;"><a href="#">candyFoo</a></li>
  31.                 <li style="border: 1px solid #eee;"><a href="#">candyBar</a></li>
  32.                 <li style="border: 1px solid #eee;"><a href="#">candyBaz</a></li>
  33.             </ul>
  34.         </li>
  35.         <li style="border: 1px solid #eee;"><a href="#">Fruits</a></li>
  36.         <li style="border: 1px solid #eee;"><a href="#">Vegetable</a></li>
  37.         <li style="border: 1px solid #eee;"><a href="#">twix</a></li>
  38.         <li style="border: 1px solid #eee;"><a href="#">apple</a></li>
  39.         <li style="border: 1px solid #eee;"><a href="#">fiber</a></li>
  40.         <li style="border: 1px solid #eee;"><a href="#">ice cream</a></li>
  41.         <li style="border: 1px solid #eee;"><a href="#">pizza</a></li>
  42.     </ul>
  43. </div>
  44. <script type="text/javascript">
  45. function addListener(element, type, expression, bubbling)
  46. {
  47.     bubbling = bubbling || false;
  48.  
  49.     if(window.addEventListener) { // Standard
  50.         element.addEventListener(type, expression, bubbling);
  51.         return true;
  52.     } else if(window.attachEvent) { // IE
  53.         element.attachEvent('on' + type, expression);
  54.         return true;
  55.     } else return false;
  56. }
  57.  
  58. elem = document.getElementById('menu').firstChild;
  59. while(true){
  60.     switch(elem.nodeName){
  61.         case 'UL':
  62.             elem = elem.firstChild;
  63.             break;
  64.         case 'LI':
  65.             addListener(elem, 'click', function(e){
  66.                 childElem = this.firstChild;
  67.  
  68.                 var bool = true;
  69.  
  70.                 while(true){
  71.                     if(childElem.nodeName == 'UL'){
  72.                         var event = e || window.event;
  73.                         if(!event.target){ event.target = event.srcElement; }
  74.                         if(this != event.target){
  75.                             bool = false;
  76.                         }
  77.                         break;
  78.                     }
  79.                     childElem = childElem.nextSibling;
  80.                     if(childElem == null){ break; }
  81.                 }
  82.                 if(bool && childElem != null){
  83.                     if(childElem.style.display == 'block'){
  84.                         childElem.style.display = 'none';
  85.                     }else{
  86.                         childElem.style.display = 'block';
  87.                     }
  88.                 }
  89.             });
  90.             break;
  91.     }
  92.     elem = elem.nextSibling;
  93.     if(elem == null){ break; }
  94. }
  95. </script>

Ahora me intriga eso de "esos breaks no estan en el Zend Coding Standard", ¿cuá sería el standard? Porque me dejaste
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #4 (permalink)  
Antiguo 02/05/2011, 10:57
Avatar de abimaelrc
Colaborador
  
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 15 años, 5 meses
Puntos: 1517
Respuesta: Listeners y Referencias
Oh, otra cosa, ¿para que mencionas esta parte?
Código Javascript: 
Ver original
  1. && childElem.nextSibling != event.target
¿Por qué verificas el siguiente sibling?
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #5 (permalink)  
Antiguo 02/05/2011, 12:44
Avatar de masterpuppet
Software Craftsman
  
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 16 años, 10 meses
Puntos: 845
Respuesta: Listeners y Referencias
Lo de Zend es una broma abimael, lo digo porque tenes while + switch + while + break anidados, no queda muy "limpio", con respecto a verificar el sibling, es una forma muy pobre de comprobar el click sobre el a, porque según entiendo, tal cual esta ahora, si clickeas en el a, no hace el open del toggler.
Y el target deberia estar fuera del while, algo asi:

Código Javascript: 
Ver original
  1. ...
  2. addListener(elem, 'click', function(e){
  3.  
  4.     childElem = this.firstChild;
  5.  
  6.     var event = e || window.event;
  7.     if(!event.target){ 
  8.         event.target = event.srcElement; 
  9.     }
  10.     if(this != event.target){
  11.         return false;
  12.     }
  13.  
  14.     while(true){
  15.         if(childElem.nodeName == 'UL'){
  16.             break;
  17.         }
  18.         childElem = childElem.nextSibling;
  19.         if(childElem == null){ break; }
  20.     }
  21.  
  22.     if(childElem != null){
  23.       childElem.style.display = childElem.style.display == 'block'
  24.                               ? 'none'
  25.                               : 'block';
  26.     }
  27.  
  28. });
  29. ...

Saludos.
__________________
http://es.phptherightway.com/
thats us riders :)
  #6 (permalink)  
Antiguo 02/05/2011, 13:17
Avatar de abimaelrc
Colaborador
  
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 15 años, 5 meses
Puntos: 1517
Respuesta: Listeners y Referencias
Me imaginé que era un broma, pero siempre uno se sorprende con alguna respuesta tipo James Bond, Misión Imposible y Fast Five Por eso pregunté por si acaso, se me escapaba algo que no veía.

Y lo de a tienes mucha razón, ya lo había previsto e hice bien similar a lo que hiciste
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos

Etiquetas: listeners, referencias
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 17:16.