Prototype Window Class (Traducción al español)

Por el 6 de Junio de 2006

en: Internet| Programacion


¿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 a 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.



Continua leyendo…

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.

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

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.

4 Respuestas a Prototype Window Class (Traducción al español)

Avatar

Anónimo

18 de Agosto de 2006 a las 4:19 am

El depurador de JavaScript de Firefox me lanza el siguiente error:
Error: a is not defined
Archivo de origen: javascript:a()
Lí­nea: 1

Avatar

Anónimo

18 de Agosto de 2006 a las 4:25 am

Problema resuelto, teneis que cambiar (segundo cuadro de texto del ejemplo) “tufuncion()” por “a()”.

Saludos y gracias por el tutotial

Avatar

Anónimo

22 de Agosto de 2006 a las 6:23 pm

a mi me da el siguiente error… (opera)

Statement on line 4: Reference to undefined variable: Window

y al cambiar Window por window (en minúsculas):

Statement on line 4: The Object does not implement [[Construct]]

Avatar

Anónimo

21 de Septiembre de 2006 a las 11:28 am

e intentado mil maneras de inseratr una imagen, pero me da error. y la ventana no aparece..

como se puede hacer?
Gracias!!

Avatar

Anónimo

21 de Septiembre de 2006 a las 12:09 pm

metiendola en una tabla dentro del inner.html al menos yo lo he probado y funciona lo que no estoy seguro es que sea compatible con todos los navegadores

Avatar

Anónimo

21 de Septiembre de 2006 a las 12:30 pm

Gracias por tu ayuda. pero no me resulta… que puede estar mal?…

Avatar

Anónimo

21 de Septiembre de 2006 a las 12:32 pm

win.getContent().innerHTML =

;
win.setDestroyOnClose();
win.showCenter();
}

Avatar

Anónimo

22 de Septiembre de 2006 a las 12:23 pm

hola lo e probado en internet explorer y funciona de maravilla pero cuando lo pruebo en mozilla de windows no anda, otra cuando lo pruebo en konqueros y en el mozilla de linux no me anda que puedo hacer para solucionar esto?
grasias

Avatar

Anónimo

25 de Septiembre de 2006 a las 3:14 pm

yo tengo esto y me funciona tanto en firefox como en explorer.

lo unico que hago es llamar una imagen desde el php eso es todo

var index= 0;
var contentWin = null;
function openModalDialog(nombre,alto,ancho) {
//alert (nombre);
debug($(‘modal_window_content’))
var win = new Window(‘modal_window’, {className: “alphacube”, width:ancho, height:alto, zIndex:150, opacity:1, resizable: false})
win.setAjaxContent(“lib/imagen.php?nombre=”+nombre);
win.setDestroyOnClose();
win.showCenter(true);
}

Avatar

Anónimo

26 de Septiembre de 2006 a las 9:58 am

Quisiera saber como puede mandar una ventana que creo a un div o a un span fijo para que se quede alli, no veo como poder decirle que la ventana que quiero que se crea se crea en un div o span ya creado y fijo.

Es para un autocomplete, o no se como mas poderlo crear.

Si alguien sabe de algo que pueda usar en esta del autocomplete les agradeceria muchisimo.

Avatar

Anónimo

9 de Octubre de 2006 a las 11:48 pm

Que tal a todos, como puedo hacer para utilizar el Login del framework Prototype Window Class con PHP?
ah alguien sabe?
quiero hacer algo como esto?

http://club.lacuerda.net/

hagan click en “Entrar”.

les agradeceria que respondan lo mas rapido posible.

Avatar

Anónimo

27 de Octubre de 2006 a las 9:10 am

Saludos, tengo un problema con la ventana creada. Hay veces que el boton “cerrar” no funciona, a alguien le paso lo mismo? como lo soluciono?

Otro problema es que en firefox no me anda el contenido en Ajax.
Probe como lei por ahi con setContentAjax pero no acepta ese metodo, que version estas usando??

Gracias de antemano. saludos.

Avatar

Anónimo

29 de Noviembre de 2006 a las 2:44 pm

Pruebo en una pagina abrir una ventana modal en FIREFOX asi http://localhost/pagina/ y funciona …. hago lo mismo en internet explorer y no funciona … cuando le doy doble click al icono de la pagina html si me funciona en Internet Explorer

Avatar

Anónimo

13 de Diciembre de 2006 a las 9:15 am

Que tal gente, mira el asunto es que cuando tengo varias instancias los eventos van a todas la ventanas.

Avatar

Anónimo

27 de Diciembre de 2006 a las 4:14 pm

problemas al tener varias ventanas, es decir, creo un win con una function llamada funcion1 y una win2 con una function llamada funcion2 y al presionar el boton que crea win uno funciona bien al presionar el boton para win2 tambien pero al momento de cerrar las ventanas si intento cerrar la ultima abierta siempre se cierra la primera al momento de cerrar la primera esta se cierra bien, como puedo arreglar eso?

Saludos

Rodrigo

Avatar

Anónimo

11 de Enero de 2007 a las 2:02 pm

Hola.

Tengo el siguiente problema. Estoy ocupando un Dialog.confirm o una ventana modal para abrir una URL interna en mi servidor, dicha url es una jsp que contiene un buscador. Actualmente la manera de funcionar es con popups tradicionales que operan comunicándose con un window.opener (ventana padre) a la cual el hijo le regresa los datos. Quisiera saber cuál es el tipo de ventana correcta para utilizar en este caso porque no hayo cómo devolverle la consulta a mi ventana padre, no sí© cómo comunicar las ventanas. ¿Podrí­as ayudarme? Muchas gracias.

Avatar

Anónimo

15 de Enero de 2007 a las 10:59 pm

Hola a todos..necesito ayuda en u problema que tengo… estoy propando la libreria protype… lo que hago es dibujar una ventana… que tiene enlaces dentro … lo que quiero es que al hacer click en un enlace… se cierre la ventana dibujada y le envie este parametro .. el enlace a la ventana original… me imagino… que alguno que ya esta mas avanzado tiene alguna solucion o tiene mas idea … agradeceria mucho su ayuda

Avatar

Anónimo

27 de Enero de 2007 a las 10:44 am

TE RECOMIENDO QUE TE CAMBIES A FIREFOX…

Avatar

Belio

14 de Febrero de 2007 a las 12:13 pm

Para hacer referencia a la ventana padre tienes que usar parent.

Por ejemplo parent.document.form.clave = 1;

Un saludo

Avatar

floyd70s

6 de Marzo de 2007 a las 7:34 am

tengo un problema al implementar la ventana

uso IE 6.0
Window no esta definido

luego lo cambio por window (en minuscula ) y me da el error de “el objeto no acepta esta accion”.

necesito ayuda.

Avatar

breadagast

4 de Abril de 2007 a las 9:26 pm

No se que es lo que estoy haciendo mal, simplemente me dice error en la pagina, uso internet explorer 6.
Me pueden ayudar?????

Gracias

Avatar

Christian

25 de Mayo de 2007 a las 4:35 pm

En los ejemplos que salen en la carpeta sample, esta el efecto que ando buscando en el archivo “popup_open.html”, el problema que solo funciona el firefox pero en iexplorer no… alguien sabe como hacerlo funcionar en los 2???

saludos.

Avatar

Anónimo

10 de Agosto de 2007 a las 11:48 am

Hola tengo 3 menus echos en flash y una liga para levantar el pop de prototype en una pagina, el problema es que en IE 7 Funciona bien pero en firefox me pone la ventana por detras de los SWF al momento de levantarla, ya utilize el zindex pero nada, alguien sabe a que se deba esto??…Saludos.

Avatar

Anónimo

27 de Enero de 2008 a las 6:59 pm

¿Y cómo sería el código para abrir un html existente en esa ventana?

Avatar

Miguel A.

19 de Noviembre de 2007 a las 7:24 pm

Desde una página abro una ventana que tiene una textarea con el editor tinymce y quiero que al pulsar un botón de la ventana hija, esta se cierre y se actualice la ventana padre mediante ajax. Esto lo podía hacer sin ningún problema con Litbox, pero no consigo que funcione con esta librería.

¿Pueden ayudarme? Gracias.

Avatar

Miguel A. Jorquera

21 de Noviembre de 2007 a las 12:49 pm

No funciona poniendo parent, ni window.opener ¿alguna otra forma?

Avatar

Wakapicao

1 de Enero de 2008 a las 12:26 pm

Yo tengo el mismo problema.
Al amigo BROWSER, que es el típico que ayudar ayuda poco, pero que es experto en frases lapidarias en plan “Cambiate a FIREFOX”, decirle que cuando haces una página web, la página debe funcionar en todos los navegadores. Tu usaras firefox, pero muchos usan explorer, y a ellos les importa bien poco el navegador que uses tú.
Así que deja de decir tonterías y si no tienes nada que decir, calla.

Avatar

Gaite

30 de Agosto de 2008 a las 3:38 pm

Como ago para cerrar una ventana aparte de hacerlo desde el boton cerrar?

por ejemplo quiero hacer que solo una determinada ventana se cierre al hacer clic en otro boton como lo logro?

Avatar

Francisco

8 de Septiembre de 2008 a las 1:47 pm

Tambien necesito saber como hacer esto, es urgente !!!

Avatar

Ronald Mavarez

25 de Febrero de 2009 a las 3:54 pm

Prueba asi:

De esta manera abro la ventana padre:

Dialog.info(”, {width:300, height:100, url: ‘/ventanahija.php’});

Por alguna razon falla el script porque el primer parametro (content) esta como emptystring (”), siendo esta la funcion original:

info: function(content, parameters){
xxxxx
xxxxx
xxxxx
}

en mi caso, como no uso el content porque siempre uso un url, lo que hice fue comentar la linea del error que seria la 1521 con el codigo ‘win.getContent().innerHTML = content;’ en el archivo windows.js de la libreria prototype, despues de eso hago la llamada sin recibir error (ya aqui te sirve en Internet Explorer).

ventana hija

Una vez abierta esta ventana, para retornar los valores pongo en la pagina hija el codigo:

parent.document.forms[0].NombredelControl.value = ‘Esto es una prueba’;

Saludos

Avatar

Anónimo

16 de Febrero de 2009 a las 10:32 am

Hola el framework me parece excelente, solo tengo una duda y talves puedan ayudarme.
Tengo una pagina principal en la cual tengo un link para registro de usuarios, ese link despliega una ventana con un formulario creada con el framework hasta ahi todo bien, ahora quiero hacer una validacion de campos con javascript pero no me funciona las funciones q realizo porque?

Avatar

wero

14 de Mayo de 2009 a las 1:20 pm

hola amigos soy nuevo en esto de pwc y quiero entrar en este nuevo aspecto de ventanas, ahorita estoy trabajando con xampp y trate de probar una pagina para ver esas ventanas pero la verdad no pude solo aparece el link pero no funciona
tal ves sea que estoy poniendo mal el direcrotio pero ya le puse mucho y nada si alguien puede echarme la mano seria de mucha ayuda, utilizo xampp y la carpeta donde pongo los archivos es en htdocs. O si me dan un ejemplo seria mejor gracias

Avatar

wero

14 de Mayo de 2009 a las 1:20 pm

hola amigos soy nuevo en esto de pwc y quiero entrar en este nuevo aspecto de ventanas, ahorita estoy trabajando con xampp y trate de probar una pagina para ver esas ventanas pero la verdad no pude solo aparece el link pero no funciona
tal ves sea que estoy poniendo mal el direcrotio pero ya le puse mucho y nada si alguien puede echarme la mano seria de mucha ayuda, utilizo xampp y la carpeta donde pongo los archivos es en htdocs. O si me dan un ejemplo seria mejor gracias

Avatar

wero

14 de Mayo de 2009 a las 1:21 pm

hola amigos soy nuevo en esto de pwc y quiero entrar en este nuevo aspecto de ventanas, ahorita estoy trabajando con xampp y trate de probar una pagina para ver esas ventanas pero la verdad no pude solo aparece el link pero no funciona
tal ves sea que estoy poniendo mal el direcrotio pero ya le puse mucho y nada si alguien puede echarme la mano seria de mucha ayuda, utilizo xampp y la carpeta donde pongo los archivos es en htdocs. O si me dan un ejemplo seria mejor gracias

Dejar un comentario

Patrocinadores

¿Interesado en patrocinar TuFunción?

Suscripción

Primera División