Crear ventanas tipo Netvibes con Prototype con HTML y Javascript

Crear ventanas flotantes en HTML es una de las cosas más difíciles de realizar en una página web. En alguna ocasión hemos hablado de cómo realizar ventanas con HTML y Javascript.

En este caso se trata de una extensión para Prototype que con unas simples líneas de código seremos capaces de crear nuestras ventanas de forma rápida.

Para usarlo primero nos deberemos crear la estructura HTML:

1. <div id="page"> 
2.   <div id="widget_col_0"></div> 
3.   <div id="widget_col_1"></div> 
4.   <div id="widget_col_2"></div> 
5. </div> 

Con sus CSS:

#page { margin: 10px auto; } #widget_col_0 { float:left; width: 30%; } #widget_col_1 { width: 50%; float:left; } #widget_col_2 { float:left; width: 20%; }

Instanciar la clase:

1. var portal = new Xilinus.Portal("#page div") 

Y por último añadir el contenido:

1. portal.add(new Xilinus.Widget(), 0) 
3. // O con título y contenido
4. portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("El texto que sea"), 1); 

Prototype Portal Class

Vía / WebAppers

Autor: sentidoweb.com
http://sentidoweb.com/2007/09/10/crear-ventanas-tipo-netvibes-con-prototype.php

Usuarios que han visto este tema también han visto...

- Clase Date en Javascript
- Función setTimeout() / setInterval() en Javascript
- Cómo comprimir ficheros javascript fácilmente
- Cambiando el color a las celdas con links
- Framework Mootools para JavaScript

- Versión imprimible de este documento
- Enviar por e-mail este documento