Con este sistema podemos abrir ventanas flotantes en el navegador usando el conocido MooTools. La velocidad de carga de esta utilidad visual para tu proyecto es un gran punto a su favor y lo original del metodo para mostrar la información su mayor valor.

Ver demo

Creando una nueva ventana

Sintaxis:

document.mochaDesktop.newWindow();  

Argumentos: Opciones

Opciones:

• id: (string)
• title: (string)
• contentType: (string: 'html', 'xhr', or 'iframe')
• content: (string) usado si contentType está configurada como 'html'
• contentURL: (string) usado si contentType está configurada como 'xhr' o 'iframe'
• modal: (boolean)
• width: (number)
• height: (number)
• scrollbars: (boolean)
• x: (number) Si x ó y no se hayan establecido la nueva ventana se centra en la ventana del navegador.
• y: (number)
• paddingVertical: (number)
• paddingHorizontal: (number)
• bgColor: (string, defaults to '#fff')

Eventos:

• onContentLoaded: (function) Evento, cargado cuando el contenido se han cargado a través de xhr
• onFocus: (function) Evento, cargado cuando la ventana se centra/enfoca
• onResize: (function) Evento, cargado cuando cambia el tamaño de la ventana
• onMinimize: (function) Evento, cargado cuando la ventana es minimizada
• onMaximize: (function) Evento, cargado cuando la ventana es maximizada
• onClose: (function) Evento, cargado juato anted de que la ventana es cerrada
• onCloseComplete: (function) Evento, cargado despues de cerrar la ventana

Cargando Contenido con un XMLHttpRequest(XHR)

Para cargar el contenido a través de xhr todos los archivos deben ser en línea y en el mismo dominio. Si necesita cargar el contenido de otro dominio o desea tener que trabajar fuera de la red, cargar el contenido en un iframe en vez de usar la opción xhr.

Iframes

Hay por lo menos tres formas en que puedes poner Iframes. Puede colocar un iframe en uno de los divs del original index.html. Puede utilizar la opción iframe contentType, que tendrá lugar su contenido en un iframe aunque esto le da menor cantidad de control sobre las propiedades del iframe. Puede cargar una página con un iframe en él en una ventana usando xhr.

Si utiliza el iframe contentType su iframe automáticamente cuando se puede cambiar el tamaño de la ventana en la que se es cambiar de tamaño. Si desea que esta misma funcionalidad cuando se utiliza una de las otras opciones de carga simplemente agregar class = "mochaIframe" a los iframes y que se cambiará el tamaño para usted también.

Creating a Window Link

<a id="docsLink" href="pages/docs.html">Documentation</a>  

	if ($('docsLink')){
		$('docsLink').addEvent('click', function(e){	
			new Event(e).stop();
			document.mochaDesktop.newWindow({
				id: 'docs',
				title: 'Documentation',
				contentType: 'xhr',
				contentURL: 'pages/docs.html',
				width: 320,
				height: 320,
				x: 20,
				y: 60
			});
		});
	}

Notas:

Si desea añadir enlaces en ventanas que se abren otras ventanas recuerde añadir eventos a los enlaces de las ventanas cuando se crean.

Closing a Window

Cerrando una ventana se requiere conocer el ID de la propiedad de la ventana. Ajuste de la ID es una opción al crear una ventana.

document.mochaDesktop.closeWindow($('windowID'));  

Ver fuente

---

Añade este artículo a tu marcador social favorito

TrackBack URI for this entry

Comentarios (1)

RSS feed Comments

Mostrar/Ocultar comenarios

redimensionar ventanas flotantes en mootools
escrito por joaquin, octubre 13, 2009

como redimencionar a una ventana flotante desde otra?

report abuse

vote down

vote up

Votes: +0

Mostrar/Ocultar formulario de comenario

Nombre

Email

Sitio Web

Título

Comentario

smaller | bigger

Subscribe via email (Registered users only)

Escribe los caracteres de la imagen

Nuevo Comentario