Mediante este widget tenemos la posibilidad de crear muy fácilmente ventanas dentro de una página web. Sus propiedades principales son:
- buttons: permite indicar los botones que se mostrarán en la ventana así como las acciones que realizarán cuando se haga clic en ellos.
- height / width: alto y ancho de la ventana en píxels.
- maxHeight / maxWidth: alto y ancho máximos que podrá tener al ser redimensionada.
- minHeight / minWidth: alto y ancho mínimos que podrá tener si es redimensinoada.
- modal: permite crear una ventana modal (no se podrá interactuar con otros elementos de la página web hasta que sea cerrada).
- position: posición de la ventana ('center', 'left', 'right', 'top', 'bottom').
- resizable: cuando su valor es 'true' podrá ser redimensionada por el usuario.
- show / hide: mostrar y ocultar la ventana.
- title: permite indicar un título.
Entre otros dispone también de los siguientes métodos:
- open() / close(): abrir y cerrar la ventana.
- isOpen(): devuelve 'true' si la ventana se encuentra abierta.
- destroy(): elimina la ventana.
A continuación estudia el siguiente código fuente de ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | ventana con JQuery UI</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
.texto { float:right;width:250px;text-align:justify; }
.textoAbajo { clear:both;float:left;width:470px;margin-top:10px;text-align:center; }
.imagen { float:left;width:210px; }
#log { color:yellow;background-color:red;margin-bottom:10px; }
</style>
<!-- Observa que agregamos también la librería JQuery UI -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery-ui-1.10.1.custom.min.js"></script>
<!-- Agregamos también el archivo CSS del theme que usemos -->
<link type="text/css" rel="stylesheet" href="../lib/css/smoothness/jquery-ui-1.10.1.custom.css" />
<script type="text/javascript">
$(document).ready(function()
{
// Mostrar la ventana
$("#ventana").dialog( {width:500,
title:"Nuestra primera ventana con JQuery UI",
close:cerrar
});
// Aplicar modificaciones
$("#btnAplicar").click(function() {
$("#ventana").dialog( {height: $("#alto").val(), width: $("#ancho").val() } );
});
});
// -------------------
// Al cerrar la ventana
function cerrar() {
$("#log").text("Se ha cerrado la ventana");
}
</script>
</head>
<body>
<div id="log"> </div>
<label for="alto">Alto</label>
<input type="text" id="alto" size="4" value="200" />
<label for="ancho">Ancho:</label>
<input type="text" id="ancho" size="4" value="400" />
<input type="button" id="btnAplicar" value="Aplicar cambios" />
<div id="ventana">
<div class="texto">Estamos realizando pruebas creando una ventana con la librería JQUERY UI.</div>
<div class="imagen"><img src="logo.jpg" alt="" /></div>
<div class="textoAbajo">Prueba a mover y redimensionar esta ventana.</div>
</div>
</body>
</html>
Explicación: como puedes observar creamos un 'DIV' con el contenido de la ventana, y al cargarse la página web lo mostramos con el método dialog() (en el que definimos opciones tales como el título, ancho, botones que contendrá, etc.).
Veamos ahora un ejemplo con ventanas modales (no permiten interactuar con otros elementos de la página hasta ser cerradas).
Para que se muestren correctamente es necesario enlazar con el archivo jquery-ui.css de un theme. El theme smoothness incluido por defecto en JQuery UI no contiene dicho archivo en su carpeta, se encuentra en development-bundle/themes/smoothness.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | ventana con JQuery UI</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { font-family:Arial;font-size:10pt; }
.texto { float:right;width:250px;text-align:justify; }
.textoAbajo { clear:both;float:left;width:470px;margin-top:10px;text-align:center; }
.imagen { float:left;width:210px; }
#vMensaje { display:none; }
#vConfirmacion { display:none; }
</style>
<!-- Observa que agregamos también la librería JQuery UI -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery-ui-1.10.1.custom.min.js"></script>
<!-- Para que la ventana se muestre bien hay que enlazar con el archivo 'jquery-ui.css' de un theme -->
<link type="text/css" rel="stylesheet" href="../lib/css/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function()
{
$("#btnModal1").click(function() {
$("#vMensaje").dialog( {width:500,
title:"Ventana modal con mensaje",
modal:true,
buttons: {
Ok: function() { $( this ).dialog( "close" ); }
}
})
});
$("#btnModal2").click(function() {
$("#vConfirmacion").dialog( {width:500,
title:"Ventana modal de confirmación",
modal:true,
buttons: {
"Sí": function() { $( this ).dialog( "close" ); },
"No": function() { $( this ).dialog( "close" ); }
}
})
});
});
</script>
</head>
<body>
<input type="button" id="btnModal1" value="Ventana modal 1" />
<input type="button" id="btnModal2" value="Ventana modal 2" /><p />
<p>Prueba a hacer clic en los botones o en el siguiente mientras esté visible una ventana:</p>
<a href="http://www.google.es/">Ir a Google</a>
<div id="vMensaje">
<div class="texto">Esto es una ventana modal que muestra un mensaje</div>
<div class="imagen"><img src="logo.jpg" alt="" /></div>
<div class="textoAbajo">Prueba a mover y redimensionar esta ventana.</div>
</div>
<div id="vConfirmacion">
<div class="texto">Esto es una ventana modal para pedir confirmación</div>
<div class="imagen"><img src="logo.jpg" alt="" /></div>
<div class="textoAbajo">Prueba a mover y redimensionar esta ventana.</div>
</div>
</body>
</html>
Vea también: [ Dialog ] - [ Dialog (ejemplo) ]
