|
 Bueno de la lista de artículos que tengo pendientes para publicar, hoy me he decidido por comentar una interesante clase en javascript para poder crear ventanas en HTML usando técnicas Ajax.
El artículo no será extenso como otros anteriores, en él traduciré la introducción que sobre esta clase se hace en la propia web del desarrollador y siempre podeis consultar en ella más información, eso si en inglés. En dicha web (ver link más abajo) podréis consultar un completisima documentación, ver ejemplos, ver temas de ventanas ya finalizados, y por supuesto bajaros los fuentes javascript. Visto y traducido de: Prototype Window Class Introducción Como comentaba anteriormente esta clase permite añadir ventanas a una página HTML. La clase está basada en el framework Prototype. El código está inspirado en la potentísima librería script.aculo.us. Puedes incluso usar todos los efectos de scrip.aculo.us para mostrar y ocultar ventanas si incluyes el fichero effects-js, pero no es necesario para que funcione el resto. Ha sido testeada en Safari, Camino, Opera, Firefox e IE6 y funcionó bien. Características - El Código que genera es HTML/XHTML válido.
- Ventanas redimensionables
- Ventanas de diálogo modales
- Efectos visuales
- Skins / Pieles intercambiables
- Y más...
Como usarlaEs fácil de usar, sólo incluye un par de javascripts y un fichero css (más si quieres mas skins). <script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/window.js"></script>
<link href="/stylesheets/themes/default.css"
rel="stylesheet" type="text/css"/>
<!-- Añade esto para tener un tema específico -->
<link href="/themes/mac_os_x.css" rel="stylesheet" type="text/css"/> Para crear una ventana, sólo tienes que instanciar el objeo Window con algunos parámetros opcionales, fijar el innerHTML del contenido de la ventana y llamar a la función show() o showCenter(). win = new Window( { className: "mac_os_x",
title: "Ejemplo",
width:200, height:150,
destroyOnClose: true,
recenterAuto:false } );
win.getContent().update("<h1>¡¡ Hola Mundo !!</h1>");
win.showCenter(); EjemploAquí te dejo un link para que veas en acción un ejemplo de la clase funcionando, el fuente de este ejemplo está incluido en el fichero que se distribuye, y es un buen ejemplo si quieres empezar a usarla como gestor de ventanas. Enlace al ejemplo Espero que hayas encontrado esta clase tan interesante como me lo parecio a mi, un saludo y hasta el próximo artículo.
 |
RSS feed Comments
