Ver Mensaje Individual
  #23 (permalink)  
Antiguo 18/02/2010, 03:36
Avatar de genuine_carlosV2
genuine_carlosV2
 
Fecha de Ingreso: noviembre-2008
Ubicación: 127.0.0.1
Mensajes: 296
Antigüedad: 16 años, 1 mes
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