Crear ventanas tipo Netvibes con Prototype

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:

<div id="page">
<div id="widget_col_0"></div>
<div id="widget_col_1"></div>
<div id="widget_col_2"></div>
</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:

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

Y por último añadir el contenido:

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

Prototype Portal Class

Vía / WebAppers