Autor Tema: [Aporte] Código de "navegación" por pestañas (Leído 2657 veces)

Warlox · « **en:** 08 de Febrero de 2010, 03:41:17 am »

Si en nuestra web tenemos por ejemplo un "panel admin" en donde queremos administrar diferentes áreas, pero sin tener que refrescar toda la página, podemos usar un sistema de pestañas.

index.html (En esta página es donde se cargarán todas las pestañas).

Código: [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pestañas by Kevin Black</title>
<style>
#barrapest a{
	/* Definimos la apariencia de la pestaña cuando no se le tenga el mouse encima*/
	padding-top: 5px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: #666;
	color: #FFF;
	text-decoration:none;
	border: 1px solid #000;
}

#barrapest a:hover{
	/* Así lucirá la pestaña cuando el mouse esté sobre ella */
	padding-top: 10px; /* Con esto agrandamos la pestaña hacia arriba logrando un buen efecto */
	background-color: #444; /* Le cambiamos el color de fondo a uno más oscuro para efecto */
}

#barrapest .pestactiva{
	/* Así será la pestaña aciva */
	padding-top: 10px;
	background-color: #444;
}
</style>
<script>
var ant; // Definimos la variable para la pestaña anteriormente activa
function cambiarpest(pag,texto){
	if(ant){ // Si ya se escogió una pestaña...
		document.getElementById(ant).className = ""; // Se le quita la clase a la pestaña anterior a la que ahora pulsamos
	}
	
	document.getElementById(pag).className = "pestactiva"; // A la pestaña que acabamos de pulsar le asignamos la clase
	document.getElementById(pag).blur(); // Desenfocamos el link para que no se vea el feo recuadro que se ve cuando este está activo
	document.getElementById("contenedor").innerHTML = "<b>" + texto + "</b>"; // Este texto se verá mientras cargue la pestaña
	document.getElementById("framenavegacion").src = pag + ".html"; // Cargamos la página en el iframe
	ant = pag; // Definimos la variable anterior como la página actual
}
</script>
</head>

<body>
<p>
<table width="50%" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td><div align="right" style="font-weight:bold;" id="barrapest">
    <a href="#" id="prueba2" onclick="cambiarpest('prueba2','Cargando página de prueba 2...'); return false">Prueba 2</a>
    <a href="#" id="prueba1" onclick="cambiarpest('prueba1','Cargando página de prueba 1...'); return false">Prueba 1</a>
	<a href="#" id="about" onclick="cambiarpest('about','Cargando información...'); return false">Acerca de...</a>
    </div></td>
  </tr>
  <tr>
    <td style="border:1px solid #000; padding:3px"><div id="contenedor" style="text-align:center">Aún no has seleccionado ninguna pestaña</div></td>
  </tr>
</table>
</p>
<iframe id="framenavegacion" name="framenavegacion" style="display:none">Tu navegador no soporta iFrames; porfavor actualízalo.</iframe>
</body>
</html>

about.html (Esta es una de las pestañas que veremos)

Código: [Seleccionar]

<span id="cuerpo">C&oacute;digo creado por Kevin Black para PHPeros.
<p>Si tienes alguna duda de este c&oacute;digo, o quieres modificarlo, puedes contactar con kevinwronski@hotmail.com</p></span>
<script>
parent.document.getElementById("contenedor").innerHTML = document.getElementById("cuerpo").innerHTML; // Cambiamos el innerHTMl del contenedor en la página principal por el innerHTML de esta página
</script>

prueba1.html (Otra página que cargaremos en la pestaña)

Código: [Seleccionar]

<span id="cuerpo">Este es el texto de la pesta&ntilde;a #1 :D</span>
<script>
parent.document.getElementById("contenedor").innerHTML = document.getElementById("cuerpo").innerHTML; // Cambiamos el innerHTMl del contenedor en la página principal por el innerHTML de esta página
</script>

prueba2.html

Código: [Seleccionar]

<span id="cuerpo">Bueno hola todos estamos viendo la pesta&ntilde;a #2 :D<br />
&iquest;Quieres ir a &quot;<a href="#" id="about" onclick="cambiarpest('about','Cargando información...'); return false">Acerca de..</a>&quot;?</span>
<script>
parent.document.getElementById("contenedor").innerHTML = document.getElementById("cuerpo").innerHTML; // Cambiamos el innerHTMl del contenedor en la página principal por el innerHTML de esta página
</script>

Bugs: En el IE no se ve el efecto de agrandamiento vertical en la pestaña, pero no es la gran cosa, igual se ve bien (Y).
Míralo funcionando: Aquí
Descárgalo: Aquí

Nota: por si el link para descargarlo no les sirve; adjunto el archivo.
Salu2, espero que les ayude ^^

Siquillote · « **Respuesta #1 en:** 08 de Febrero de 2010, 14:10:27 pm »

Mis felicidades Kevin.
Muy buen trabajo y seguramente que a mi me hará falta. Karma +

westwest · « **Respuesta #2 en:** 08 de Febrero de 2010, 14:45:18 pm »

No esta mal, es básico pero seguro que sirve

Warlox · « **Respuesta #3 en:** 08 de Febrero de 2010, 18:18:21 pm »

Que bueno que les haya gustado.
Ahí cualquiero cosa me avisan ^^

PD: Gracias a Siquillote por el +1 *.*

Kikers · « **Respuesta #4 en:** 08 de Febrero de 2010, 20:20:59 pm »

Felicidades!

Esta bien bueno, seguro me será útil. +1

Mixvice · « **Respuesta #5 en:** 08 de Febrero de 2010, 20:28:40 pm »

Este código solo muestra archivos Html hay forma de que sirva con Php?

Intente cambiando el script que tiene

<script>
var ant; // Definimos la variable para la pestaña anteriormente activa
function cambiarpest(pag,texto){
if(ant){ // Si ya se escogió una pestaña...
document.getElementById(ant).className = ""; // Se le quita la clase a la pestaña anterior a la que ahora pulsamos
}

document.getElementById(pag).className = "pestactiva"; // A la pestaña que acabamos de pulsar le asignamos la clase
document.getElementById(pag).blur(); // Desenfocamos el link para que no se vea el feo recuadro que se ve cuando este está activo
document.getElementById("contenedor").innerHTML = "<b>" + texto + "</b>"; // Este texto se verá mientras cargue la pestaña
document.getElementById("framenavegacion").src = pag + ".html"; // Cargamos la página en el iframe
ant = pag; // Definimos la variable anterior como la página actual
}
</script>

pero no me dejo xD alguna idea?

Warlox · « **Respuesta #6 en:** 08 de Febrero de 2010, 21:11:05 pm »

Simplemente tenés que cambiar .html por .php; así:

Citar

<script>
var ant; // Definimos la variable para la pestaña anteriormente activa
function cambiarpest(pag,texto){
if(ant){ // Si ya se escogió una pestaña...
document.getElementById(ant).className = ""; // Se le quita la clase a la pestaña anterior a la que ahora pulsamos
}

document.getElementById(pag).className = "pestactiva"; // A la pestaña que acabamos de pulsar le asignamos la clase
document.getElementById(pag).blur(); // Desenfocamos el link para que no se vea el feo recuadro que se ve cuando este está activo
document.getElementById("contenedor").innerHTML = "<b>" + texto + "</b>"; // Este texto se verá mientras cargue la pestaña
document.getElementById("framenavegacion").src = pag + ".php"; // Cargamos la página en el iframe
ant = pag; // Definimos la variable anterior como la página actual
}
</script>

Espero haber ayudado

Saludos

chihue · « **Respuesta #7 en:** 08 de Febrero de 2010, 21:48:14 pm »

Muy bueno k+

Mixvice · « **Respuesta #8 en:** 08 de Febrero de 2010, 22:08:06 pm »

Cita de: Kevin Black en 08 de Febrero de 2010, 21:11:05 pm

Simplemente tenés que cambiar .html por .php; así:

Espero haber ayudado
Saludos

grax ya lo pruebo

si funciona + k xD

x.zurox.x · « **Respuesta #9 en:** 23 de Febrero de 2010, 16:06:10 pm »

jojojo aportazo kevin esta muy bueno el aporte, ai te va un karma

.

Saludos

edgarmoreno2 · « **Respuesta #10 en:** 24 de Febrero de 2010, 16:09:34 pm »

buen aporte toma karma+

Farresito · « **Respuesta #11 en:** 09 de Abril de 2010, 23:17:23 pm »

Kevin!!!,

Buen aporte!

Karma+... Lo llevo usando hace tiempo en pruebas y la verdad me gusta; te quería dar el karma pero no sabia como...

De verdad llevaba tiempo buscando algo así.

Te debo unas cuantas

Warlox · « **Respuesta #12 en:** 10 de Abril de 2010, 01:38:37 am »

Haay :$ tranquilo, no es molestia. Pero muchas gracias

.
Saludos.

Farresito · « **Respuesta #13 en:** 10 de Abril de 2010, 13:29:59 pm »

De nada, hombre, te lo merecias, buen trabajo!

Por cierto, enhorabuena por el juego en Flash (asi es, no?) que has posteado en tu blog. Ahora falta solo agregarle la maquina para un PC vs jugador

Saludos!

Warlox · « **Respuesta #14 en:** 10 de Abril de 2010, 20:11:14 pm »

Jajaja veo que hay gente que visita mi blog

en fin, apenas termine con lo que ando comenzaré a ponerlo para que la máquina tenga IA xD.

Saludos.

Noticias:

Autor Tema: [Aporte] Código de "navegación" por pestañas (Leído 2657 veces)

Warlox

[Aporte] Código de "navegación" por pestañas

Comunidad PHPeros

[Aporte] Código de "navegación" por pestañas

Siquillote

Re:[Aporte] Código de "navegación" por pestañas

westwest

Re:[Aporte] Código de "navegación" por pestañas

Warlox

Re:[Aporte] Código de "navegación" por pestañas

Kikers

Re:[Aporte] Código de "navegación" por pestañas

Mixvice

Re:[Aporte] Código de "navegación" por pestañas

Warlox

Re:[Aporte] Código de "navegación" por pestañas

chihue

Re:[Aporte] Código de "navegación" por pestañas

Mixvice

Re:[Aporte] Código de "navegación" por pestañas

x.zurox.x

Re:[Aporte] Código de "navegación" por pestañas

edgarmoreno2

Re:[Aporte] Código de "navegación" por pestañas

Farresito

Re:[Aporte] Código de "navegación" por pestañas

Warlox

Re:[Aporte] Código de "navegación" por pestañas

Farresito

Re:[Aporte] Código de "navegación" por pestañas

Warlox

Re:[Aporte] Código de "navegación" por pestañas