Bride of Windows

I. Introducción

La página web de la cual podéis descargaros el código es bastante liosa. Consiste en un manual de diez secciones donde dispersa el código a modo explicativo. Yo os lo he dividido en tres ficheros descargables que he comprimido y he enlazado en la parte de “Referencias”. Basándome en dichos ficheros, explicaré en que consiste cada uno de ellos:

• Página HTML: Lugar desde donde se hará referencia al fichero en JavaScript.

• Fichero CSS: En él definiremos el estilo de las ventanas tal y como las vamos a usar.

• Fichero JS: Se almacenará todo el código javascript necesario para implementar la librería.

Realmente lo que visualizas no son páginas web directamente sino capas que tu defines en la misma página HTML. Eso sí, luego podeis incluir en el contenido de esa capa cualquier página web.

 

II. Uso de la librería

Su uso se limita exclusivamente a tres ficheros como ya se ha explicado anteriormente.

En un primer lugar hay que hacer referencia en la página HTML donde queremos incluir el efecto tanto el fichero CSS como el fichero en JavaScript. Se hará de la siguiente forma:

<link href=”js_bow.css” mce_href=”js_bow.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”js_bow.js” mce_src=”js_bow.js”></script>

Como podéis observar, es muy sencillo. Donde pone “src” debéis colocar la ruta del fichero en cuestión.

A continuación, hará falta colocar los enlaces que provocarán la aparición de la ventana:

<a href=”" onclick=”if (winList['id_capa']) winList['id_capa'].open(); return false;”>Window 1</a>

Donde aparece ‘id_capa’ debes colocar el id de la capa que quereis visualizar. Es decir, yo dispondré de una capa de la forma:

<div id=”sample1″ class=”window” style=”…”>
…
</div>

Dentro de esa capa se debe diseñar la ventana. En el fichero que os adjunto aparece un esquema predefinido y luego un fichero CSS para modificar el diseño de la ventana.

 

III. Referencias

• Descarga: Bride of Windows 

• Enlace: Bride of Windows

 

- Volver -