Autor Tema: Ajax Prototype Window Class (Traducción al español)  (Leído 3452 veces)

0 Usuarios y 2 Visitantes están viendo este tema.

graphixx

  • Visitante


¿Qué es Prototype?

Prototype es un framework en JavaScript que apunta al desarrollo sencillo y dinámico de aplicaciones web. Es una herramienta para el desarrollo de clases única y de fácil uso, además de la biblioteca más agradable de Ajax.

Esta clase de Javascript nos permite agregar una ventana en nuestra página HTML.Esta clase se basa en Prototype, y el código se inspira en la biblioteca script.aculo.us.

Puedes incluso utilizar todos los efectos de script.aculo.us para mostrar y para ocultar ventanas si incluyes el archivo de effects.js, pero no es obligatorio.

Esta clase ha sido probado en los siguientes navegadores safari, Camino, Firefox e IE6.

Podrás descargar los archivos necesarios para utilizar este ejemplo en tu sitio web en el siguiente enlace de descarga ofrecido por blogus.xilinus.com

Características

* Ventanas de redimensionables
* Posibilidad de minimizar y maximizar
* Efectos visuales
* Editable
* Y más…

Cómo utilizarla

Es fácil utilizar, apenas incluye dos Javascript y un css (además dispones de diferentes skins).

Aqui os dejo un simple y breve ejemplo de esta clase Abre ventana Prototype

Primero debes incluir este trozo de cógido en tu ejemplo para enlazar con los dos javascript que necesitamos cambia la ruta en caso de que sea necesario.

Código: [Seleccionar]
<script type="text/javascript" src="/javascripts/prototype.js"> </script> <script type="text/javascript" src="/javascripts/window.js"> </script>
<link href="/stylesheets/themes/default.css" rel="stylesheet" type="text/css"></link>

Asegurate de que has subido los tres archivos necesarios a tu servidor y que la ruta indicada es la correcta…

Ahora incluiremos el trozo de código que ejecutara el script para uqe nos abra la ventana utilizando las librerias que hemos agragado, el código que necesitamos es el siguiente.

Código: [Seleccionar]
<script  type="text/javascript">function tufuncion()
{
 win = new Window('window_id', {title: "Ejemplo tufuncion.com", top:100, left:350})
win.getContent().innerHTML = "
<h1>Hola Mundo</h1>
<p>";
win.setDestroyOnClose();
win.showCenter();
}
</script>

Ya solo nos queda hacer la llamada a la funcion es el ultimo paso necesario para este simple ejemplo y quedaría algo así.

Código: [Seleccionar]
<body onLoad="a()"><br />
<a href="javascript:a()">Abre ventana Prototype</a><br />
</body>

Al ejecutar esta página al cargar la etiqueta body llamara a la funcion y además podras probarlo tambien gracias al enlace a la función, puedes elegir la manera que mejor se adapte a tus necesidades para mostrar la ventana.

Fuente del Artículo

Esta libreria es licencia de MIT-style license así que puedes utilizarla para cualquier cosa que desees, mientras incluyas el aviso de copyright.

Tambien puedes verla trabajando aca DEMO PROTOTYPE:
http://prototype-window.xilinus.com/PWC-OS/