|
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
Ejemplo HTML:
<a id="docsLink" href="pages/docs.html">Documentation</a>
Ejemplo Javascript:
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.
Ejemplo Javascript:
document.mochaDesktop.closeWindow($('windowID'));
Ver fuente
|
Utilidades 
Tienes un blog, perfil en línea, o alguna otra página web personal? Te gustaría comunicarte más con sus visitantes? Con Gtalk y el chat integrado de Gmail tienes la posibilidad de usar el nuevo Chat Box de Google. 
