Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Mostrar ocultar paneles jQuerry

Estas en el tema de Mostrar ocultar paneles jQuerry en el foro de Frameworks JS en Foros del Web. Hola! A ver si me podéis echar una mano. Tengo dos páginas. Pag1 y Pag2 En una de las páginas (Pag1) tengo cuatro enlaces. Los ...
  #1 (permalink)  
Antiguo 14/09/2011, 14:08
 
Fecha de Ingreso: febrero-2011
Mensajes: 18
Antigüedad: 13 años, 1 mes
Puntos: 0
Pregunta Mostrar ocultar paneles jQuerry

Hola!

A ver si me podéis echar una mano.

Tengo dos páginas. Pag1 y Pag2
En una de las páginas (Pag1) tengo cuatro enlaces.
Los enlaces van a la misma página (Pag2), esta segunda página tiene un menú desplegable, mediante un id muestra un panel u otro al cargar la página.
Lo que me interesaría es que dependiendo del enlace que clickara en la Pag1 al ir a la Pag2 se abriera el panel correspondiente.

Estoy utilizando esta demo (en concreto la muestra 2): http://www.i-marco.nl/weblog/jquery-accordion-3/

Sabéis alguna manera de hacerlo?

Muchas gracias!
  #2 (permalink)  
Antiguo 14/09/2011, 22:55
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años
Puntos: 192
Respuesta: Mostrar ocultar paneles jQuerry

Si te fijás en el segundo ejemplo en la página que me pasaste, podés asignar la clase expand al elemento que querés que aparezca desplegado.

Opción 1 : PHP

Si estás haciendo el sitio en PHP, yo creo que sería más sólido si pasás variables con PHP. Podrías hacer algo así:

En la página 1, enlazás a la página 2 así:
Código HTML:
Ver original
  1. <a href="pagina2.php?expand=servicios">Servicios</a>

Y en la página 2, tendrías algo así:
Código PHP:
Ver original
  1. <?php ?>
  2. <ul class="menu">
  3.     <li <? echo $_GET['expand']=='inicio' ? "class='expand'" : ""; ?>><a href="#">Inicio</a>
  4.         <ul>
  5.             <li><a href="#">Sub menu</a></li>
  6.             <li><a href="#">Sub menu</a></li>
  7.             <li><a href="#">Sub menu</a></li>
  8.         </ul>
  9.     </li>
  10.     <li <? echo $_GET['expand']=='servicios' ? "class='expand'" : ""; ?>><a href="#">Servicios</a>
  11.         <ul>
  12.             <li><a href="#">Sub menu</a></li>
  13.             <li><a href="#">Sub menu</a></li>
  14.             <li><a href="#">Sub menu</a></li>
  15.         </ul>
  16.     </li>
  17.     <li <? echo $_GET['expand']=='contacto' ? "class='expand'" : ""; ?>><a href="#">Contacto</a>
  18.         <ul>
  19.             <li><a href="#">Sub menu</a></li>
  20.             <li><a href="#">Sub menu</a></li>
  21.             <li><a href="#">Sub menu</a></li>
  22.         </ul>
  23.     </li>
  24. </ul>
  25. <?php ?>

Entonces, si la variable $_GET['expand'] es "servicios", entonces se le asignará la clase expand a ese botón.


Opción 2 : jQuery

La otra opción que se me ocurre (si no estás usando PHP) es pasar un hash.

En la página 1, enlazás a la página 2 así:
Código HTML:
Ver original
  1. <a href="pagina2.html#servicios">Servicios</a>

Y en la página 2, tendrías un HTML algo así:
Código HTML:
Ver original
  1. <ul class="menu">
  2.     <li class="inicio"><a href="#">Inicio</a>
  3.         <ul>
  4.             <li><a href="#">Sub menu</a></li>
  5.             <li><a href="#">Sub menu</a></li>
  6.             <li><a href="#">Sub menu</a></li>
  7.         </ul>
  8.     </li>
  9.     <li class="servicios"><a href="#">Servicios</a>
  10.         <ul>
  11.             <li><a href="#">Sub menu</a></li>
  12.             <li><a href="#">Sub menu</a></li>
  13.             <li><a href="#">Sub menu</a></li>
  14.         </ul>
  15.     </li>
  16.     <li class="contacto"><a href="#">Contacto</a>
  17.         <ul>
  18.             <li><a href="#">Sub menu</a></li>
  19.             <li><a href="#">Sub menu</a></li>
  20.             <li><a href="#">Sub menu</a></li>
  21.         </ul>
  22.     </li>
  23. </ul>

Fijate que cada elemento tiene una clase que lo distingue (la clase será el nombre que pasaremos por el hash). Entonces con un pequeño script le asignamos la clase expand:

Código Javascript:
Ver original
  1. $(function(){
  2.     //analizar hash
  3.     var el_activo = location.hash ? location.hash.split('#')[1] : false;
  4.     if(el_activo){
  5.         $('li.' + el_activo).addClass('expand');
  6.     }
  7. });


Espero que al menos te haya dado una idea :P
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 16/09/2011, 09:49
 
Fecha de Ingreso: febrero-2011
Mensajes: 18
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Mostrar ocultar paneles jQuerry

Si me has dado una idea de por donde ir pero algo debo estar aplicando mal.
El PHP ni me lo planteo :S. Entonces estoy utilizando el metodo js.

Realize en la pagina1.html:

Código HTML:
Ver original
  1. <a href="pagina2.html#ser1">ser1</a>
  2. <a href="pagina2.html#ser2">ser2</a>
  3. <a href="pagina2.html#ser3">ser3</a>
  4. <a href="pagina2.html#ser4">ser4</a>

Entonces en la pagina2.html como comentas añadí cada una de las clases a cada li

Código HTML:
Ver original
  1. <ul class="menu">
  2.     <li class="ser1"><a href="#">Inicio</a>
  3.         <ul>
  4.             <li><a href="#">Sub menu</a></li>
  5.             <li><a href="#">Sub menu</a></li>
  6.             <li><a href="#">Sub menu</a></li>
  7.         </ul>
  8.     </li>
  9.     <li class="ser2"><a href="#">Servicios</a>
  10.         <ul>
  11.             <li><a href="#">Sub menu</a></li>
  12.             <li><a href="#">Sub menu</a></li>
  13.             <li><a href="#">Sub menu</a></li>
  14.         </ul>
  15.     </li>
  16.     <li class="ser3"><a href="#">Contacto</a>
  17.         <ul>
  18.             <li><a href="#">Sub menu</a></li>
  19.             <li><a href="#">Sub menu</a></li>
  20.             <li><a href="#">Sub menu</a></li>
  21.         </ul>
  22.     </li>
  23.     <li class="ser4"><a href="#">Packs</a>
  24.         <ul>
  25.             <li><a href="#">Sub menu</a></li>
  26.             <li><a href="#">Sub menu</a></li>
  27.             <li><a href="#">Sub menu</a></li>
  28.         </ul>
  29.     </li>
  30. </ul>

Y añadi en el head la lineas de js
Cambiando el "el_activo" por cada una de mís clases lo repetí 4 veces ;S pero no hay manera.

Código Javascript:
Ver original
  1. $(function(){
  2.   //analizar hash
  3.   var ser1 = location.hash ? location.hash.split('#')[1] : false;
  4.       if(ser1){
  5.            $('li.' + ser1).addClass('expand');
  6.       }
  7. });

Veo la luz al final del túnel pero creo que hay algo que no aplico bien :S
A ver si alguien puede saber donde tengo el problema :/
  #4 (permalink)  
Antiguo 16/09/2011, 11:22
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años
Puntos: 192
Respuesta: Mostrar ocultar paneles jQuerry

No! No hace falta que repitas eso 4 veces! Como te lo pasé yo tiene que funcionar perfectamente. el_activo es una variable que almacena el valor que se ha pasado luego del # en el url. Entonces busca el elemento que coincide con esa clase.

El problema está en algo que no te he especificado :P El asunto es que estamos asignándole la clase después de haber cargado el menú. Entonces no va a funcionar. Para que funcione asegurate de poner el script que detecta la clase antes del script del menu.

Mirá: http://nahueljose.com.ar/temp-demo-acordeon/

Si hacés click sobre cada sección, en la próxima aparecen abiertos. Página 1:

Código HTML:
Ver original
  1.     <p><a href="pagina2.html#weblog-tools">Weblog Tools</a></p>
  2.     <p><a href="pagina2.html#programming-languages">Programming Languages</a></p>
  3.     <p><a href="pagina2.html#cool-stuff">Cool Stuff</a></p>
  4.     <p><a href="pagina2.html#search-engines">Search Engines</a></p>
  5. </body>
  6. </html>

Página 2:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
  3.     <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
  4.     <script>
  5.         $(function(){
  6.             //analizar hash
  7.             var el_activo = location.hash ? location.hash.split('#')[1] : false;
  8.             if(el_activo){
  9.                 $('li.' + el_activo).addClass('expand');
  10.             }
  11.         });
  12.     </script>
  13.     <script src="menu.js" type="text/javascript"></script>
  14. </head>
  15.     <h2>2: Accordion with first submenu expanded at page load</h2>
  16.  
  17.     <ul class="menu">
  18.         <li class="weblog-tools">
  19.             <a href="#">Weblog Tools</a>
  20.             <ul class="acitem">
  21.                 <li><a href="http://www.pivotx.net/">PivotX</a></li>
  22.                 <li><a href="http://www.wordpress.org/">WordPress</a></li>
  23.                 <li><a href="http://www.textpattern.com/">Textpattern</a></li>
  24.                 <li><a href="http://typosphere.org/">Typo</a></li>
  25.             </ul>
  26.         </li>
  27.         <li class="programming-languages">
  28.             <a href="#">Programming Languages</a>
  29.             <ul class="acitem">
  30.                 <li><a href="http://www.php.net/">PHP</a></li>
  31.                 <li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
  32.                 <li><a href="http://www.python.org/">Python</a></li>
  33.                 <li><a href="http://www.perl.org/">PERL</a></li>
  34.                 <li><a href="http://java.sun.com/">Java</a></li>
  35.                 <li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
  36.             </ul>
  37.         </li>
  38.         <li><a href="http://www.i-marco.nl/weblog/">Marco's blog (no submenu)</a></li>
  39.         <li class="cool-stuff">
  40.             <a href="#">Cool Stuff</a>
  41.             <ul class="acitem">
  42.                 <li><a href="http://bookalicio.us/">Bookalicious</a></li>
  43.                 <li><a href="http://www.apple.com/">Apple</a></li>
  44.                 <li><a href="http://www.nikon.com/">Nikon</a></li>
  45.                 <li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
  46.                 <li><a href="http://www.nintendo.com/">Nintendo</a></li>
  47.             </ul>
  48.         </li>
  49.         <li class="search-engines">
  50.             <a href="#">Search Engines</a>
  51.             <ul class="acitem">
  52.                 <li><a href="http://search.yahoo.com/">Yahoo!</a></li>
  53.                 <li><a href="http://www.google.com/">Google</a></li>
  54.                 <li><a href="http://www.ask.com/">Ask.com</a></li>
  55.                 <li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
  56.             </ul>
  57.         </li>
  58.     </ul>
  59. </body>
  60. </html>
__________________
nahueljose.com.ar
  #5 (permalink)  
Antiguo 16/09/2011, 11:46
 
Fecha de Ingreso: febrero-2011
Mensajes: 18
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Mostrar ocultar paneles jQuerry

Funciona perfecto. Muchas gracias!!!

Etiquetas: javascript, paneles, jquery
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




La zona horaria es GMT -6. Ahora son las 12:15.