jWindow, es una versión del famoso thickbox (solo en concepto) desarrollado con jQuery como base. Con una particularidad que lo hace diferente a las demás herramientas de similar finalidad.
jWindow, permite abrir varias ventanas a la vez sobre nuestro documento, permitiendonos arrastrarlas por él, pudiendo así colocarlas a nuestro antojo facilitandonos la lectura o visualización de imagenes. El peso de la herramienta completa es de un 38kb inclujendo jQuery, un peso no demasiado bajo pero bastante ajustado (dice el creador).
¿Como lo uso?
Despues de añadir todos y cada uno d los ficheros necesarios, demasiados para mi gusto.
<link rel="stylesheet" type="text/css" href="jwindow.css" />
<script type="text/javascript" src="./scripts/jquery.js"></script>
<script type="text/javascript" src="./scripts/compressed/ifx.js"></script>
<script type="text/javascript" src="./scripts/compressed/iutil.js"></script>
<script type="text/javascript" src="./scripts/compressed/ifxtransfer.js"></script>
<script type="text/javascript" src="./scripts/compressed/idrag.js"></script>
<script type="text/javascript" src="./scripts/jwindow.js"></script>
Podemos crear nuestros divs con el contenido, para ellos creamos una estructura similar a esta.
<div class="window_content" id="TU_ID">
<div class="window_main">
TU TEXTO o IMAGEN
</div>
</div>
Como podemos ver, usaremos la clase window_content y window_main para indicar que se trata de un <div></div> que nuestro jWindow debe tratar y mostrar como una ventana flotante. Ahora solo nos queda crear los enlaces que nos haran visibles nuestros divs.
<a href="#TU_ID?YYY,XXX" title="TITULO DEL ENLACE" class="window_link">TEXTO DEL ENLACE</a>Realmente fácil y bastante claro. Usaremos el ID de nuestro div para para indicar que div hemos de mostrar, y mediante los parametros YYY(alto) y XXX(ancho) indicaremos el tamaños del mismo. Únicamente hemos de respetar el class de nuestro enlace que se usará para lanzar nuestros pop-ups.
0 comentarios, 0 referencias
+
#