Foros del Web » Creando para Internet » Diseño web »

Sistemas de Tabs con el contenido en la misma pagina

Estas en el tema de Sistemas de Tabs con el contenido en la misma pagina en el foro de Diseño web en Foros del Web. mi propuesta es la siguiente: Quiero crear un sistema de pestañas en el que el contenido que se abra resida en la misma página, es ...

  #1 (permalink)  
Antiguo 08/02/2010, 15:13
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Sistemas de Tabs con el contenido en la misma pagina

mi propuesta es la siguiente:

Quiero crear un sistema de pestañas en el que el contenido que se abra resida en la misma página, es decir, que no llame a un include que recurra de otro documento HTML o similar. No se si me explico

Encontré un codigo libre que creaba un sistema de Tabs mediante CSS, cosa que me vendría muy muy util ya que era justo lo que necesitaba, pero tenia un fallo, al poner un link cualquiera al contenido, éste tomaba la forma de la pestaña.

El codigo es este: http://www.araudi.net/ejemplos/tabs_activo.html

Como veis, toda la información reside en el mismo documento, excepto el código CSS que se podría poner facilmente mediante una etiqueta <style>.

Pongo el tema aquí porque en realidad no se muy bien ni con qué tipo de programación se podría llevar a cabo lo que quiero hacer.

Creo que lo más ideal es con Ajax, pero no estoy del todo seguro.

Agradeceria toda la ayuda posible al respecto.
  #2 (permalink)  
Antiguo 08/02/2010, 16:51
Avatar de genuine_carlosV2  
Fecha de Ingreso: noviembre-2008
Ubicación: 127.0.0.1
Mensajes: 296
Antigüedad: 9 años
Puntos: 6
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Sinceramente, no he entendido nada :S

En todo caso, para crear pestañas, mejor usa una librería ya echa como Ext JS (yo uso esta), jQuery, etc.

Una buena página por donde empezar a buscar es Ajax Rain.

Por cierto, hablemos con propiedad. Para crear un sistema de pestañas (o prácticamente cualquier código que le de un poco de vida a tu web) se usa JavaScript. Ajax es una tecnología implementada sobre JavaScript para cargar contenidos de tu servidor de forma dinámica (sin tener que recargar la web).

Especifica que quieres hacer y miramos si te podemos ayudar

Un saludo
__________________
Carlos

Recoger datos es solo el primer paso hacia la sabiduría. Pero compartir información es el primer paso hacia la comunidad. - IBM
  #3 (permalink)  
Antiguo 08/02/2010, 17:45
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Bien.

Pepito tiene un documento HTML, en él tiene un sistema de pestañas. Cuando Pepito presiona "Pestaña 1" , ese documento HTML, mediante JAVASCRIPT invoca a otro documento HTML llamado "pagina 1" y le dice que muestre su contenido. Al presionar "Pestaña 2" ocurre lo propio con "pagina 2" y asi sucesivamente.

Lo que yo quiero, es que todo el código se recoja en el mismo documento HTML sin necesidad de scripts adicionales, ni llamadas a otros documentos del servidor, de hecho tengo el CSS incluido en el mismo documento por medio de las etiquetas <style> </style>.

Por que esa pollada? Tengo mis motivos, que son demasiados y muy coñazos como pa ponerse a explicarlos (si alguien con ánimo de ayudarme quiere escucharlos incluso le mando un privado) pero creo que no vienen al caso.

El caso es ese. y por favor, no me remitais a páginas en ingles que no me entero de ná.

Si sigue sin entenderse lo explico de otra manera.

Saludos y gracias por la respuesta
  #4 (permalink)  
Antiguo 08/02/2010, 18:30
Avatar de genuine_carlosV2  
Fecha de Ingreso: noviembre-2008
Ubicación: 127.0.0.1
Mensajes: 296
Antigüedad: 9 años
Puntos: 6
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Para las páginas en inglés: Traductor (No te lo tomes a mal, pero es que como no sepas traducir mínimamente, no encontrarás mucho. De echo, programas en inglés y, a veces, saber lo que escribes, ayuda).

Dejemos el comentario anterior a parte. Porqué no pruebas usando iFrames?
Con iFrames te evitas tener que hacer llamadas AJAX, puedes simular pestañas como si fuesen botones (o como lo tienes ahora) y puedes cambiar su contenido mediante JavaScript.

Suerte
__________________
Carlos

Recoger datos es solo el primer paso hacia la sabiduría. Pero compartir información es el primer paso hacia la comunidad. - IBM
  #5 (permalink)  
Antiguo 09/02/2010, 05:24
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Aham, no se mu bien como podriamos hacerlo.

Sé que con JavaScript podemos llamar a un elemento con "onclick" o "oncharge"
pero de nuevo, no quiero otro documento HTML, sino en el mismo documento, ¿como podria hacerse? lo he estado buscando pero no he encontrado nada (o no he sabido buscarlo)

He estado mirando lo de jquery y por lo visto es la polla pa programar (todo el mundo habla maravillas), el problema es que no se si en las entradas de los blogs se admite javascript.

Digamos que estoy haciendo una maqueta en HTML para escribirlas en entradas de un blog. CSS y HTML si las admite, eso seguro, javascript nose.

Saludos

EDITO: he leido sobre el Iframe y es una tecnología desfasada y poco util hoy dia, además que hace justo lo que no quiero que haga, que es llamar a otro documento mediante src="documento.html"
así que creo que sigues sin comprenderme, lo que yo quiero es que por ejemplo si en la pestaña 1 escribo el texto 1, y en la pestaña 2, escribo el texto 2, que tanto el texto 1 como el texto 2 se encuentren en index.html no cada texto en una página diferente.

Última edición por Sintak; 09/02/2010 a las 05:39
  #6 (permalink)  
Antiguo 09/02/2010, 08:52
Avatar de genuine_carlosV2  
Fecha de Ingreso: noviembre-2008
Ubicación: 127.0.0.1
Mensajes: 296
Antigüedad: 9 años
Puntos: 6
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Ummm... me parece que ya te entiendo...

A ver que tal esto:
Código HTML:
Ver original
  1. <script type="text/javascript">
  2. <!--
  3.     function cambiarPestana( pestana ) {
  4.         //Ocultar TODAS las pestañas
  5.         document.getElementById( 'pestana1' ).style.display = 'none';
  6.         document.getElementById( 'pestana2' ).style.display = 'none';
  7.         document.getElementById( 'pestana3' ).style.display = 'none';
  8.         document.getElementById( 'pestana4' ).style.display = 'none';
  9.        
  10.         //Mostrar la pestaña que nos piden
  11.         document.getElementById( 'pestana' + pestana ).style.display = 'block';
  12.     }
  13. -->
  14. <a href="javascript:cambiarPestana( 1 )">Mostrar pestaña 1</a>
  15. <a href="javascript:cambiarPestana( 2 )">Mostrar pestaña 2</a>
  16. <a href="javascript:cambiarPestana( 3 )">Mostrar pestaña 3</a>
  17. <a href="javascript:cambiarPestana( 4 )">Mostrar pestaña 4</a>
  18. <div id="pestana1" style="display: none">Cosas de la pestaña 1</div>
  19. <div id="pestana2" style="display: none">Cosas de la pestaña 2</div>
  20. <div id="pestana3" style="display: none">Cosas de la pestaña 3</div>
  21. <div id="pestana4" style="display: none">Cosas de la pestaña 4</div>

Por cierto, los iFrames no están desfasados ni mucho menos. Van de muerte para muchas cosas como poder enviar la información de un formulario sin recargar la página, etc.

Saludos
__________________
Carlos

Recoger datos es solo el primer paso hacia la sabiduría. Pero compartir información es el primer paso hacia la comunidad. - IBM
  #7 (permalink)  
Antiguo 09/02/2010, 09:23
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

GRACIAS!!! justamente es lo que necesitaba, lo he probado donde lo necesito y funciona perfecto!!!!

Para hacerlo bonito ya supongo que solo se trata de poner los enlaces en capas (que serian los botones) y darle formato al contenido.

Por cierto una pregunta más referente a CSS, cual es el equivalente en CSS a "<a target:'_blank'>"?

Muchisimas gracias por todo, la de dias que llevo liao y lo "sencillo" que era xD
  #8 (permalink)  
Antiguo 09/02/2010, 09:25
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Hola:

Los sistemas clásicos eran mostrando/ocultando capas... pero con los abusos javascript, se han cambiado un poco cosillas como esas... aquí tiuenes algo de ejemplo: Sistema de pestañas... y accesible

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 09/02/2010, 11:04
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Hola Caricatos, que error tiene el código anterior?

Tu script me facilita mucho las cosas, pero se trata de aprender no?

Examinaré a fondo las cosas que me habeis pasao pa aprender y comprenderlo al maximo.

PD: Veo que eres de Torremolinos, tengo amigos alli y por lo que tengo entendido no es muy grande, igual os conoceis.

Saludos

EDITO: Caricatos, al código que genera tu "creador de pestañas" le veo un fallito y es que le asigna la propiedad block por separado a cada dt, en vez de crear una clase.

<dd id='pesta2' class='carpeta' style='display: block'>pestania3</dd>

Nose hay mucho código que a mi poco entendimiento lo veo mal puesto o innecesario.


Código HTML:
Ver original
  1.      Sistema de Pestañas generado desde http://www.caricatos.net/sistemaPestanas.
  2.  Pestaña del tipo: normales
  3. <script src='pestas.js' type='text/javascript' charset='ISO-8859-1'></script>
  4. <link rel='stylesheet' type='text/css' href='pestas.css' charset='ISO-8859-1'/>
  5. <script type='text/javascript' charset='ISO-8859-1' >
  6. var pestas = {
  7.     on: 'on',
  8.     off: 'off',
  9.     items: ['pesta0', 'pesta1', 'pesta2']
  10. }
  11. window.onload = function() {inicializaPestañas(pestas, 'pesta0')};
  12. </script >
  13. <style type='text/css' charset='ISO-8859-1' >
  14. .carpeta {background-color: #eeeeee;}
  15. </style >
  16. </head>
  17. <div id='pestas' >
  18. <dt id='Ppesta0' class='pestaña on' ><a href='#pesta0' id='_pesta0' >pestania1</a></dt>
  19. <dt id='Ppesta1' class='pestaña off' ><a href='#pesta1' id='_pesta1' >pestania2</a></dt>
  20. <dt id='Ppesta2' class='pestaña off' ><a href='#pesta2' id='_pesta2' >pestania3</a></dt>
  21. <dd id='pesta0' class='carpeta' style='display: block'>pestania1</dd>
  22. <dd id='pesta1' class='carpeta' style='display: block'>pestania2</dd>
  23. <dd id='pesta2' class='carpeta' style='display: block'>pestania3</dd>
  24. </div>
  25. </body>

porque el dt Ppesta 1 y 2 tienen pestaña off y el otro pestaña on?
porque se la aplica un display block a cada dd en vez de meterlo en la clase carpeta?
porque carga pestas.js y luego vuelve a poner
Código Javascript:
Ver original
  1. <script type='text/javascript' charset='ISO-8859-1' >
  2. var pestas = {
  3.     on: 'on',
  4.     off: 'off',
  5.     items: ['pesta0', 'pesta1', 'pesta2']
  6. }
  7. window.onload = function() {inicializaPestañas(pestas, 'pesta0')};
  8. </script >
?

y lo mismo con el CSS, carga un documento pero luego hay CSS dentro del documento.

Nose, dime si es mejorable o porque están esas cosas así. Gracias

Última edición por Sintak; 09/02/2010 a las 11:19
  #10 (permalink)  
Antiguo 09/02/2010, 15:51
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Hola:

Fíjate que el sistema es "accesible"... o sea que debe funcionar si no se tiene javascript... así que entre otras cosas si hay alguna capa oculta desde el principio, teóricamente no se podría ver nunca, así que deben estar visibles y ocultarlas con javascript al principio... bueno, lo de los estilos, no es otra cosa que procurar un aspecto adecuado... pues, si tienes más dudas... ya que tienes intención de aprender, suéltalas cuando las tengas.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #11 (permalink)  
Antiguo 10/02/2010, 07:02
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

entonces no hace falta pestas.js ni pestas.css?

cuando dices accesible a que te refieres?

no entiendo muy bien eso de que estan ocultas y no se ven, si que se ven.

Explicate un poco si es posible. No te pido que me expliques punto por punto, pero por lo menos a lineas generales las diferencias entre uno y otro y porque es malo eso de "ocultar" las capas.

Gracias y Saludos
  #12 (permalink)  
Antiguo 10/02/2010, 08:59
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Hola:

Lo mejor es que deshabilites javascript desde tu navegador y lo pruebes...

Cuando el enlace es hacia algo del tipo #destino... no hace falta tener javascript activo, porque es html básico, enbtonces el sistema cuando no hay javascript, no entra en pestañas, sino enlaza al ancla definida... pero con javascript, el enlace se cancela, y se mustra la capa asociada...

Te recomiendo que lo pruebes desactivando javascript en tu navegador.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #13 (permalink)  
Antiguo 10/02/2010, 13:22
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Entonces lo que me quieres decir es que ese sistema de pestañas funciona tanto con javascript como sin el
  #14 (permalink)  
Antiguo 10/02/2010, 15:12
Avatar de genuine_carlosV2  
Fecha de Ingreso: noviembre-2008
Ubicación: 127.0.0.1
Mensajes: 296
Antigüedad: 9 años
Puntos: 6
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Cita:
Iniciado por caricatos Ver Mensaje
Hola:

Lo mejor es que deshabilites javascript desde tu navegador y lo pruebes...

Cuando el enlace es hacia algo del tipo #destino... no hace falta tener javascript activo, porque es html básico, enbtonces el sistema cuando no hay javascript, no entra en pestañas, sino enlaza al ancla definida... pero con javascript, el enlace se cancela, y se mustra la capa asociada...

Te recomiendo que lo pruebes desactivando javascript en tu navegador.

Saludos
Es interesante que no haga falta JS para visualizar las pestañas. Quizás se podría dar un toque un poco más similar a las pestañas normales cuando no se usa JS. Lo que quiero decir es que en vez de poner directamente los contenidos, se podría repetir la zona de pestañas y, que el ancla apuntase a allí.
Ahora:
Pestaña1 | Pestaña 2 | Pestaña 3
...
Contenido Pestaña 1
...
-------------------------------------------
...
Contenido Pestaña 2
...
-------------------------------------------
...
Contenido Pestaña 3
...

Quizás se podría hacer así:
Pestaña1 | Pestaña 2 | Pestaña 3
...
Contenido Pestaña 1
...
-------------------------------------------
Pestaña1 | Pestaña 2 | Pestaña 3
...
Contenido Pestaña 2
...
-------------------------------------------
Pestaña1 | Pestaña 2 | Pestaña 3
...
Contenido Pestaña 3
...

De este modo, en cada repetición de las pestañas, podrías poner el color de la pestaña "activa" además de que tendrías las demás pestañas para navegar más fácilmente en vez de ir buscando el texto.

Si JS está activado, se podrían ocultar todas las repeticiones de las pestañas y listo.
__________________
Carlos

Recoger datos es solo el primer paso hacia la sabiduría. Pero compartir información es el primer paso hacia la comunidad. - IBM
  #15 (permalink)  
Antiguo 11/02/2010, 09:54
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

He usado el sistema de caricatos, pero me encuentro con un problema:

no puedo modificar el tamaño de los botones.

por mas que le asigno altura y anchura a la clase "pestañas y/o on u off" no hay manera de que firefox u opera le asigne unas dimensiones.

(En IE si)

Lo que quiero hacer ahora:

Mostrar una imagen sin color, que al pasar el ratón se muestre una imagen con color.

Cómo tengo pensado hacerlo?

Primero quiero dimensionar las "pestañas" dandoles un ancho y una altura de 140 x 140 en una capa aparte del contenido.

Luego para que sea accesible, colocaré la imagen de color, de fondo.

Y haré el efecto rollover con javascript.

Pero no consigo con el código que me dió caricatos, darle tamaño a las pestañas, alguna sugerencia?

Gracias

EDITO:

el codigo de las clases que tiene actualmente:

Código CSS:
Ver original
  1. .pesta&#241;a   {/* pestañas   */
  2.     display     : inline;
  3.     margin      : 3px 1px;
  4.     padding     : 4px;
  5.     border      : 2px outset gray;
  6.     position    : relative;
  7.     top     : 6px;
  8. }
  9.  
  10. .pesta&#241;a a {/* enlace de la pestaña   */
  11.     color       : black;
  12.     border      : 0;
  13. }
  14.  
  15.     /****************************************************************
  16.     *   Estilos discriminados de las pestañas normales     *
  17.     ****************************************************************/
  18.  
  19. .on {
  20.     background-color: #eeeeee;
  21.     border-style: inset;
  22.     border-bottom: 0;
  23.     z-index: 100;
  24. }
  25.  
  26. .off    {
  27.     background-color: #cccccc;
  28.     z-index: 0;
  29. }

genuine_carlosV2 es buena idea esa que dices, el problema es que son 7 pestañas minimo, y si hubiera que cambiar algo a las pestañas, sería jodio, además creo que se repite mucho mas el codigo y el explorador tendria que interpretar mucho mas.

Última edición por Sintak; 11/02/2010 a las 10:27
  #16 (permalink)  
Antiguo 11/02/2010, 15:26
Avatar de genuine_carlosV2  
Fecha de Ingreso: noviembre-2008
Ubicación: 127.0.0.1
Mensajes: 296
Antigüedad: 9 años
Puntos: 6
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Sintak: Los navegadores son capaces de cargar megas y megas de página web. Otra cosa es que tu conexión o la conexión de tu cliente lo soporte. Por añadir 7 veces las pestañas, no creo que suponga un overhead demasiado grande para los navegadores y/o conexiones de hoy en día y, con ello, creo que podrías aumentar la usabilidad de tu página web.

Si tienes que modificar mucho las pestañas, te recomiendo que te crees una función en PHP que las ponga como tu quieras de modo que tendrías una función donde las defines a todas y cada una en cada una de sus repeticiones y en el código, sólo tienes algo tipo:
<?php ponerPestañas(); ?>

De este modo, si tienes que cambiar algo, vas a la función y listo.
Pero esto sólo es una sugerencia.

Lo que si, no te preocupes por las interpretaciones de los navegadores porque están muy bien diseñados (con esto no quiero decir que se pueda abusar, pero repetir 7 veces el menú de pestañas, a menos que sean unas pestañas con imágenes ultra-grandes, textos ultra-largos, etc (vamos, todo lo contrario de lo que es una pestaña), no vas a tener problema)
__________________
Carlos

Recoger datos es solo el primer paso hacia la sabiduría. Pero compartir información es el primer paso hacia la comunidad. - IBM
  #17 (permalink)  
Antiguo 13/02/2010, 17:15
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Es cierto genuino, lo tendré en cuenta.

Primero quiero hacer funcionar el sistema, luego pensaré en como hacerlo accesible jejejeje.

Tengo un problema, quiero meterle imágenes en vez de links... y no funciona!!!!

con el sistema de arriba, de caricatos, no me funciona esto:

Código HTML:
Ver original
  1. <dt id="Pboton1" class="botone on" ><a href="#boton1" id="_boton1" ><img src="fondo.png" href="#boton1" id="Pboton1" /></a></dt>

Primero probé así:

Código HTML:
Ver original
  1. <dt id="Pboton1" class="botone on" ><a href="#boton1" id="_boton1" ><img src="fondo.png" /></a></dt>

luego así:

Código HTML:
Ver original
  1. <dt id="Pboton1" class="botone on" ><a><img src="fondo.png" href="#boton1" id="_boton1"  /></a></dt>

Con la primera y la segunda, no activa la casilla, las otras dos si se ponen "activas" pero la de la imagen no y la tercera simplemente muestra todo el contenido como si el java estuviera desactivado.

Una ayudita plis, prometo publicar el código cuando consiga pulirlo.
  #18 (permalink)  
Antiguo 13/02/2010, 17:33
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Hola:

El sistema de mi referencia no debe darte problemas con las imágenes... pero solo cambia el texto del enlace por la imagen... entre otras cosas, estás repitiendo id's, y pones atributos que no se corresponden (href no se usa en tags ing...)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #19 (permalink)  
Antiguo 13/02/2010, 18:03
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Cita:
Iniciado por Sintak Ver Mensaje
Primero probé así:

Código HTML:
Ver original
  1. <dt id="Pboton1" class="botone on" ><a href="#boton1" id="_boton1" ><img src="fondo.png" /></a></dt>
Exactamente lo que dices. Lo demás lo probé por desesperación, podrías comprobar lo que digo por favor?

Con ese codigo cuando abres la pagina se queda asi:



y cuando le doy a otro boton y vuelvo a darle a la imagen, se queda así, no responde:



Este es el codigo:

Código HTML:
Ver original
  1.      Sistema de Pestañas generado desde http://www.caricatos.net/sistemaPestanas.
  2.  Pestaña del tipo: normales
  3. <script src="pestas.js" type="text/javascript" charset="ISO-8859-1"></script>
  4. <link rel="stylesheet" type="text/css" href="pestas.css" charset="ISO-8859-1"/>
  5. <script type="text/javascript" charset="ISO-8859-1" >
  6. var botons = {
  7.     on: 'on',
  8.     off: 'off',
  9.     items: ['boton1', 'boton2', 'boton3']
  10. }
  11. window.onload = function() {inicializaBotones(botons, 'boton1')};
  12. <style type="text/css" charset="ISO-8859-1" >
  13. .carpeta {background-color: #eeeeee;}
  14. </head>
  15. <div id="botons" >
  16. <dt id="Pboton1" class="botone on" ><a href="#boton1" id="_boton1" ><img src="fondo.png"></a></dt>
  17. <dt id="Pboton2" class="botone off" ><a href="#boton2" id="_boton2" >boton2</a></dt>
  18. <dt id="Pboton3" class="botone off" ><a href="#boton3" id="_boton3" >boton3</a></dt>
  19. <dd id="boton1" class="carpeta" style="display: block">contenido1</dd>
  20. <dd id="boton2" class="carpeta" style="display: block">contenido2</dd>
  21. <dd id="boton3" class="carpeta" style="display: block">contenido3</dd>
  22. </div>
  23. </body>
  24. </html>

Te agradeceria toda ayuda posible.

Le cambie lo de pestañas, pensando que podria dar problemas eso de la Ñ

Última edición por Sintak; 13/02/2010 a las 18:15
  #20 (permalink)  
Antiguo 14/02/2010, 07:50
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Caricatos, tu propuesta parecía buena, pero es que para gente como yo, con conocimientos básicos no hace más que darme problemas, cualquier minima cosa que intento modificarle me falla el sistema entero.

Si le meto una imagen no va, si le cambio en tamaño al cuadro, no va, si le intento meter un rollover en css, no va...

Nose, hasta que consigamos depurar ese sistema para que sea mas "personalizable", tendré que usar el primero que puso genuine_carlosV2, que aunque tiene sus problemas de accesibilidad, la verdad es que es sencillo como él solo.

Aunque tenemos un problema genuine_carlosV2, cuando se entra en la página, hasta que no se pulsa un botón, no hay ningún contenido... ¿como podemos solucionar eso?
  #21 (permalink)  
Antiguo 15/02/2010, 17:51
Avatar de genuine_carlosV2  
Fecha de Ingreso: noviembre-2008
Ubicación: 127.0.0.1
Mensajes: 296
Antigüedad: 9 años
Puntos: 6
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Buenas,

Fíjate en este código, sólo tiene una linea de diferencia:
Código HTML:
Ver original
  1. <script type="text/javascript">
  2. <!--
  3. * * function cambiarPestana( pestana ) {
  4. * * * * //Ocultar TODAS las pestañas
  5. * * * * document.getElementById( 'pestana1' ).style.display = 'none';
  6. * * * * document.getElementById( 'pestana2' ).style.display = 'none';
  7. * * * * document.getElementById( 'pestana3' ).style.display = 'none';
  8. * * * * document.getElementById( 'pestana4' ).style.display = 'none';
  9. * * * *
  10. * * * * //Mostrar la pestaña que nos piden
  11. * * * * document.getElementById( 'pestana' + pestana ).style.display = 'block';
  12. * * }
  13.    cambiarPestana( 1 );  //Linea nueva!!! En vez de 1, puedes poner la pestaña que quieras que esté por defecto
  14. -->
  15. <a href="javascript:cambiarPestana( 1 )">Mostrar pestaña 1</a>
  16. <a href="javascript:cambiarPestana( 2 )">Mostrar pestaña 2</a>
  17. <a href="javascript:cambiarPestana( 3 )">Mostrar pestaña 3</a>
  18. <a href="javascript:cambiarPestana( 4 )">Mostrar pestaña 4</a>
  19. <div id="pestana1" style="display: none">Cosas de la pestaña 1</div>
  20. <div id="pestana2" style="display: none">Cosas de la pestaña 2</div>
  21. <div id="pestana3" style="display: none">Cosas de la pestaña 3</div>
  22. <div id="pestana4" style="display: none">Cosas de la pestaña 4</div>

También, si quieres, puedes crear una quinta pestaña con el contenido por defecto de modo que solo aparezca una vez:
Código HTML:
Ver original
  1. <script type="text/javascript">
  2. <!--
  3. * * function cambiarPestana( pestana ) {
  4. * * * * //Ocultar TODAS las pestañas
  5. * * * * for( i = 0; i <= 4; i++ ) document.getElementById( 'pestana' + i ).style.display = 'none';
  6. * * * *
  7. * * * * //Mostrar la pestaña que nos piden
  8. * * * * document.getElementById( 'pestana' + pestana ).style.display = 'block';
  9. * * }
  10. -->
  11. <a href="javascript:cambiarPestana( 1 )">Mostrar pestaña 1</a>
  12. <a href="javascript:cambiarPestana( 2 )">Mostrar pestaña 2</a>
  13. <a href="javascript:cambiarPestana( 3 )">Mostrar pestaña 3</a>
  14. <a href="javascript:cambiarPestana( 4 )">Mostrar pestaña 4</a>
  15. <div id="pestana0" style="display: block">Cosas que sólo verás una vez!!</div>
  16. <div id="pestana1" style="display: none">Cosas de la pestaña 1</div>
  17. <div id="pestana2" style="display: none">Cosas de la pestaña 2</div>
  18. <div id="pestana3" style="display: none">Cosas de la pestaña 3</div>
  19. <div id="pestana4" style="display: none">Cosas de la pestaña 4</div>

Si te fijas, en este código le he añadido también un pequeño bucle para que te ayude a controlar la cantidad de pestañas que tienes. De este modo, cambias el 4 por un 7 y listo.
Fíjate también que no hace falta que añadas una pestaña para tener tu contenido por defecto. También puede ser una pestaña que ya tengas cambiando su 'block' por 'none'.

P.D.: Con este código también podrías aumentar la usabilidad haciendo algo como lo que decía caricatos. Para ello, tan solo tienes que iniciar todos los DIVs con 'display: block' (en vez de 'display: none') y, añadir la linea 'cambiarPestana( 0 );' (o la pestaña que quieras tener por defecto) en la misma posición que en el código anterior. Esto hará que si no se tiene el JS activo, veas todas las pestañas y, si lo tienes activo, la función 'cambiarPestana', te esconderá todas las pestañas menos la que no quieres ver.

Saludos y suerte!
__________________
Carlos

Recoger datos es solo el primer paso hacia la sabiduría. Pero compartir información es el primer paso hacia la comunidad. - IBM
  #22 (permalink)  
Antiguo 17/02/2010, 15:41
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Entonces el código para que se vean todas las pestañas sin javascript sería este:

Código HTML:
Ver original
  1. <script type="text/javascript">
  2. <!--
  3. * * function cambiarPestana( pestana ) {
  4. * * * * //Ocultar TODAS las pestañas
  5. * * * * for( i = 0; i <= 4; i++ ) document.getElementById( 'pestana' + i ).style.display = 'none';
  6. * * * *
  7. * * * * //Mostrar la pestaña que nos piden
  8. * * * * document.getElementById( 'pestana' + pestana ).style.display = 'block';
  9. * * }
  10.    cambiarPestana( 1 );  //Linea nueva!!! En vez de 1, puedes poner la pestaña que quieras que esté por defecto
  11. -->
  12. <a href="javascript:cambiarPestana( 1 )">Mostrar pestaña 1</a>
  13. <a href="javascript:cambiarPestana( 2 )">Mostrar pestaña 2</a>
  14. <a href="javascript:cambiarPestana( 3 )">Mostrar pestaña 3</a>
  15. <a href="javascript:cambiarPestana( 4 )">Mostrar pestaña 4</a>
  16. <div id="pestana0" style="display: block">Cosas que sólo verás una vez!!</div>
  17. <div id="pestana1" style="display: block">Cosas de la pestaña 1</div>
  18. <div id="pestana2" style="display: block">Cosas de la pestaña 2</div>
  19. <div id="pestana3" style="display: block">Cosas de la pestaña 3</div>
  20. <div id="pestana4" style="display: block">Cosas de la pestaña 4</div>

Y la pestaña que pusieran en cambiarpestana sería la que se viera por defecto mientras que oculta a todas las demás.

Si es así, muchas gracias por todo, este código es mucho más fácil de entender, mas intuitivo y mucho menos pesado a la hora de modificar o de aplicar.

Gracias por todo, cuando tenga el sistema completo lo publicaré para futuras dudas que le surgan a otras personas, y no dudeis de que si tengo mas dudas, volveré para dar el coñazo :D

Una pregunta más: podrías explicar exactamente que hace el javascript para poder comprenderlo un poco?

Porque la pestana 0 se muestra solo una vez a pesar de que es display:block?
  #23 (permalink)  
Antiguo 18/02/2010, 03:36
Avatar de genuine_carlosV2  
Fecha de Ingreso: noviembre-2008
Ubicación: 127.0.0.1
Mensajes: 296
Antigüedad: 9 años
Puntos: 6
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Bueno, vayamos por partes, dijo Jack el destripador:

En cuanto cargas la web en un navegador, inicialmente, se ven TODAS las pestañas. Entonces pueden pasar 2 cosas, que tengas el JS activado o no.

Si no lo tienes activado, aquí acaba el proceso (es decir, con todas las pestañas mostrandose).

Si tienes el JS activado, el navegador empieza a ejecutar el código JS que encuentre. Lo primero que encuentra es una función (línea 3) y por tanto, no la ejecuta. Después encuentra una linea de código (línea 10) que le dice que ejecute la función (este código, el de la linea 10, sólo se ejecuta una vez). Ahora si se vuelve a la función para ejecutarla. Al parametro 'pestana' de la función le asigna el valor que le diste dentro de los paréntesis en la linea 10, es decir, 1. Ejecutando la función, lo primero que encuentra (ignora los comentarios) es en la linea 5 un bucle que le dice que coja una variable llamada 'i' y le asigne inicialmente el valor 0. Entonces hace lo que hay a la derecha del bucle, es decir, busca en todo el documento el elemento con ID "'pestana' + i", es decir, como i=0, busca 'pestana0' y le cambia su propiedad 'display' a 'none' para que no se vea. Luego vuelve al bucle e incrementa la 'i' en 1, por tanto, ahora i=1. Vuelve a ejecutar lo de la derecha del bucle buscando ahora 'pestana1'. Vuelve al bucle, incrementa otra vez la 'i' y así hasta que la 'i' sea más grande que 4 (en el bucle pone 'i <= 4', traducido, ejecuta el bucle mientras que la 'i' sea más pequeña o igual a 4). El resultado del bucle es que todos los elementos que tienen un ID con el formato 'pestanaX' se hacen invisibles.
Cuando sale del bucle, se dirige a la linea 8 y busca el elemento que tenga el ID "'pestana' + pestana", es decir, como que pestana=1, busca 'pestana1' y le cambia su propiedad 'display' a 'block' de modo que esta pestaña, que antes era invisible, la hace visible otra vez.

Llegados a este punto, el ordenador para la ejecución y se dedica a otras cosas como descargar pelis por el eMule, escuchar música con Winamp o hacer perder los nervios al usuario de turno con el virus que cogió por ver páginas guarras.

El ordenador está así hasta que el usuario hace click en uno de los links de las pestañas. Cuando el usuario hace click, se vuelve a ejecutar la función de la linea 3 pero cambiando el valor del parámetro 'pestana' por el que haya en el link en que se hizo click. Se vuelve a ejecutar la función exactamente como te expliqué antes. Es decir, esconde todas las pestañas y muestra la que se le pide ahora. Como que ahora se le pide otra, el efecto visual es el de cambiar de pestaña.

Se entiende?

NOTA: Este código se puede optimizar pero casi no vas a ganar velocidad ni vas a percibir nada visualmente. Fíjate en esta web (Foros del Web), está plagado de JS y según en que tema entras, encuentras texto y texto y texto (y también código y código y código) a mansalva y el ordenador no se resiente tanto (es lo que te decía de los recursos, los ordenadores son potentes y podemos echar mano de ellos pero sin abusar que también hay límites), por tanto, por 5 acciones contadas en cada click, te aseguro que ni lo notarás

Sobre lo de la pestaña 0, piensa que el número de pestaña que pongas en 'cambiarPestana( 1 );' es la pestaña que tendrás por defecto de modo que si quieres que sea la 0, deberías poner 'cambiarPestana( 0 );'.

La pestaña 0 sólo se ve una vez (siempre y cuando hayas puesto 'cambiarPestana( 0 );') porqué sólo se le pide que la muestre cuando se abre la página. En el momento en que, después de abrir la página, el usuario hace click en un link para cambiar las pestañas, todas las pestañas se harán invisibles (incluida la 0) y sólo se mostrará la que pide el usuario y, como que no hay ningún link ni código que vuelva a llamar a la pestaña 0, esta nunca podrá ser visible otra vez a menos que recargues la web (en cuyo caso, empezará todo el proceso de nuevo).

Saludos
__________________
Carlos

Recoger datos es solo el primer paso hacia la sabiduría. Pero compartir información es el primer paso hacia la comunidad. - IBM

Última edición por genuine_carlosV2; 18/02/2010 a las 03:41
  #24 (permalink)  
Antiguo 18/02/2010, 12:35
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Muchisimas gracias carlos, la verdad es que el código me es de mucha ayuda.

Es muy claro, y con la explicación, lo he entendido perfecto. Sin duda lo utilizaré.

Una preguntilla mas, ¿como podría, en vez de cambiarle solo el atributo display, asignarle una clase entera que previamente hubieramos escrito en css?
  #25 (permalink)  
Antiguo 19/02/2010, 08:54
Avatar de genuine_carlosV2  
Fecha de Ingreso: noviembre-2008
Ubicación: 127.0.0.1
Mensajes: 296
Antigüedad: 9 años
Puntos: 6
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Buenas,

Pues de igual forma:
Código CSS:
Ver original
  1. .test {
  2.     display: block;
  3.     font-size: 18px;
  4.     color: #0000FF;
  5. }

Y luego haces:
Código HTML:
Ver original
  1. <div id="pestana1" class="test">Cosas de la pestaña 1</div>

JS (document.getElementById( 'pestana' + i ).style.display = 'none';) ya se encargará de coger el estilo (.style) esté donde esté, buscar su propiedad 'display' (.display) y cambiarla a 'none' (='none').

Un saludo
__________________
Carlos

Recoger datos es solo el primer paso hacia la sabiduría. Pero compartir información es el primer paso hacia la comunidad. - IBM
  #26 (permalink)  
Antiguo 20/02/2010, 11:18
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

No!! jajaj, no me has entendido.

Lo que queria decir, era, como hacer para que el codigo javascript, en vez de cambiar la propiedad display, cambiara la propiedad "class" de manera, que en vez de indicarle que cambie display a none, cambie la clase .test, por la clase .test1

Creo que seria algo asi:

Código Javascript:
Ver original
  1. document.getElementById( 'pestana' + pestana ).class = 'test';
  #27 (permalink)  
Antiguo 20/02/2010, 13:25
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Hola:

Con javascript, class se traduce calssName...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #28 (permalink)  
Antiguo 24/02/2010, 11:55
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

Buenas

Me parecía cojonudo el código, no he tenido tiempo de utilizar, pero cuando fui a insertarlo... no funciona :S

lo has probao? no me funciona
  #29 (permalink)  
Antiguo 25/02/2010, 13:30
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

por mas vueltas que le doy no consigo dar con el fallo
  #30 (permalink)  
Antiguo 25/02/2010, 15:27
 
Fecha de Ingreso: marzo-2008
Mensajes: 56
Antigüedad: 9 años, 8 meses
Puntos: 0
Respuesta: Sistemas de Tabs con el contenido en la misma pagina

he conseguio ponerlo a andar, pero esto no me va:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. <!--
  3. function cambiarPestana( pestana ) {
  4. //Ocultar TODAS las pestañas
  5.  for( i = 1; i <= 4; i++ ) document.getElementById( 'pestana' + i ).classname = 'boton1';
  6.  
  7. //Mostrar la pestaña que nos piden
  8. document.getElementById( 'pestana' + pestana ).classname = 'boton';
  9. }
  10. cambiarPestana( 1 );
  11. -->
  12. </script>
Código CSS:
Ver original
  1. <style type="text/css">
  2. .boton{
  3. display: block;
  4. border:1px solid #00536F;
  5. }
  6. .boton1{
  7. display: none;
  8. border:1px solid #00536F;
  9. }
  10. </style>
Código HTML:
Ver original
  1. <a href="javascript:cambiarPestana( 1 )">Mostrar pestaña 1</a>
  2. <a href="javascript:cambiarPestana( 2 )">Mostrar pestaña 2</a>
  3. <a href="javascript:cambiarPestana( 3 )">Mostrar pestaña 3</a>
  4. <a href="javascript:cambiarPestana( 4 )">Mostrar pestaña 4</a>
  5. <div id="pestana1" class="boton">Cosas de la pestaña 1</div>
  6. <div id="pestana2" class="boton1">Cosas de la pestaña 2</div>
  7. <div id="pestana3" class="boton1">Cosas de la pestaña 3</div>
  8. <div id="pestana4" class="boton1">Cosas de la pestaña 4</div>

Etiquetas: contenido, sistemas, tabs
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 13:40.