Vídeo del proceso de creación pestañas dinámicas

  • Por
Veamos un vídeo donde explicamos el uso de Mootools para la creación de una interfaz de pestañas dinámicas e interactivas con Javascript.
Bueno, pues para acabar con el tema de las pestañas CSS y su dinamismo, bien vale la pena dedicar un poco de tiempo más para ver este vídeo, en el que mostramos paso a paso todo lo que hemos relatado en el artículo Pestañas Dinámicas con CSS y Mootools. Es decir, creamos un sistema de pestañas con CSS y luego construimos el script Javascript y Mootools para que sean dinámicas y respondan a las acciones del usuario.

Esperamos que con la lectura del mencionado artículo con el código del ejemplo, más las explicaciones del siguiente vídeo y la posibilidad de ver desde el principio como hemos realizado este ejemplo, no tengas ningún problema para implementar un sistema de pestañas dinámico y comenzar a usar Mootools en tus páginas web.

El vídeo dura unos 36 minutos y podremos ver cómo crear el sistema de pestañas ayudados con el código publicado en DesarrolloWeb.com. Luego veremos como retocarlo y cómo incluir Mootools. Por último veremos cómo generar el script Javascript para hacer nuestras pestañas dinámicas. Espero que os guste y os parezca útil e interesante.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

bv7

13/6/2009
Petición
Hola! he intentado encontrar un buzón de sugerencias ó comentarios. No puedo publicar libremente lo que pretendo decir.

¿Donde puedo encontrar el formulario? deseo escribirle al administrador.

P.D Excelente página!!

Saludos :)

midesweb

16/6/2009
Mensajes privados a DesarrolloWeb.com
Hola bv7!

Tengo curiosidad por saber qué es lo que no puedes comentar en público. El autor de este artículo soy yo y puedes ponerte en contacto conmigo a través del formulario de contacto de DesarrolloWeb.com (anota en el asunto que quieres hablar conmigo)

http://www.desarrolloweb.com/contacta/

Y ya que estoy aquí hablando de mensajes privados, quiero anunciar como primicia que estamos implementando un sistema de comunicación entre los usuarios que lo deseen, con mensajes privados o públicos, que espero publicar antes de que termine junio de 2009.

claudia

12/5/2010
¿como puedo conseguir el efecto sin las pestañas?
Hola,
en este video comentais como solucionar el problema de cargar el contenido sin que la página vaya arriba. Me gustaría saber si esto es posible cuando tienes un link <a href> a otro html. Si es posible, podríais contarme cómo, por favor??
Merci!

midesweb

13/5/2010
Link que la página no vaya hacia arriba
Hola Claudia,

No se entiende muy bien tu pregunta, porque cuando haces un enlace a otra página tu navegador se dirigirá a otra página y que el scroll se desplace o no hacia arriba en la página antigua es un poco indiferente.

claudia

13/5/2010
movimiento pagina
en realidad mi página es una lista de proyectos, en cuanto pulsas uno carga una nueva pagina con las imágenes y la misma lista. El problema es que la lista es tan larga que si pulsas algo que esta por abajo la vuelve a cargar arriba, y molesta un poco porque tienes que volver a bajar el scroll... estaría bien que al pulsar se cargara la nueva página en el mismo punto en que te has quedado en la anterior. Igual no es posible, solo quería saber si existía la posibilidad...

gracias!

Pedro

01/2/2011
No se me añaden las clases (addClass) o algo no marcha bien
Pues eso. Que no se me cambian las pestañas de color (ni se activan). Dejo aquí parte de mi código (que creo que es exactamente igual al del vídeo):

<script>
var idsPestanas = ["p1", "p2", "p3", "otrapestana"];
var idsContenedores = ["cont1", "cont2", "cont3", "cont4"];

function cambiaPestana(id){
idsPestanas.each (function(item){
$(item).removeClass("activa");
});
$(idsPestanas[id]).addClass("activa");
}

</script>

<div id="pestanas">
<ul>
<li id="p1" class="activa"><a href="#" onclick="cambiaPestana(0)">DesarrolloWeb.com</a></li>
<li id="p2"><a href="#" onclick="cambiaPestana(1)">CriarWeb.com</a></li>
<li id="p3"><a href="#" onclick="cambiaPestana(2)">Comunidad</a></li>
<li id="otrapestana"><a href="#" onclick="cambiaPestana(3)">Otro enlace más largo</a></li>
</ul>
</div>
<div id="contenedorpestanas">
<div id="cont1">Contenido de la pestaña DesarrolloWeb.com</div>
<div id="cont2" class="nover">Contenido de la pestaña CriarWeb.com</div>
<div id="cont3" class="nover">Contenido de la pestaña Comunidad<br>Aquí sigo escribiendo cosicas</div>
<div id="cont4" class="nover">Contenido de la pestaña Otro enlace más largo<br>Aquí sigo escribiendo cosicas<br>Aquí sigo escribiendo cosicas</div>
</div>

Ni con el Chromium, ni el Firefox ni el Midori (el cual éste último se carga los marcos), se me activan las pestañas.

He descargado el mootools-core-1.3.js y lo he nombrado:
<html>
<head><link href="estilo.css" rel="stylesheet" type="text/css">
<title>Marco de la izquierda con enlaces</title>
<script src= mootools-core-1.3.js type="text/javascript"></script>
.....

No lo he probado en el explorer, pero me da igual, uso linux y necesito que se abra en cualquier navegador.

Muchas gracias y enhorabuena por la página.

vaHHHaRch

25/2/2012
YAFpBYlN
La vdeard es que la idea de juego es lo mas innovador que ofrece el sistema.Dependiendo del local y de cuanta gente lo frecuenta, puedes ser alcalde al poco tiempo, y los emblemas ya te comienzan a dar los facilones desde el principio (primer check-in, decimo check-in...)