« anterior | siguiente »

Home > 2007 > Septiembre > Lunes, 10 de Septiembre 2007 > Crear ventanas tipo Netvibes con Prototype
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Lun10Sep2007

Crear ventanas tipo Netvibes con Prototype

13:00 H (CET)| Temas: Desarrollo web

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.

ventanas_prototype.png

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

Relacionados

Feedback (2) » Formulario

1. Tripix ~ Lunes, 10 Sep 2007 | 17:55H:

Genial... hay que reconocer que prototype y los frameworks que están surgiendo sobre él nos están permitiendo hacer auténticas maravillas con bastante facilidad

Saludos

2. Luis ~ Martes, 11 Sep 2007 | 00:32H:

Hola José.

La verdad es que sí, dentro de poco hablaremos del HTML como a veces se habla del C.

Se te echa de menos en SW, afortunadamente te veo muy activo ultimamente en Tripix.

Saludos.

Conversación

Nombre:

Email:

(no aparecerá)

URL:

(opcional)
¿Recordar datos?

↓ Comentarios (XHTML permitido)