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);VÃa / WebAppers