En el presente artículo hablaremos de:
- Qué es y qué proporciona el jQuery User Interface Dialog
¿Qué es el jQuery User Interface Dialog?
Dentro del jQuery User Interface encontramos toda una serie de elementos de programación de la interfaz de usuario preprogramados y listos para ser integrados en nuestros proyectos HTML. Se trata de una amplia biblioteca JavaScript que abarca desde efectos dinámicos, hasta menús, calendarios, diálogos, etc.El lugar de Internet de referencia y descarga del componente Dialog, que es de lo que trataremos, es: jqueryui.com/dialog
Las capacidades que nos proporcionará las iremos desgranando en los sucesivos epígrafes, a vuelapluma son:
- Una caja de diálogo básica amodal redimensionable
- La posibilidad de convertirla en modal y con apertura a demanda
- La adaptación personal a estilos predefinidos o más personalizados
- La conversión completa a una caja de entrada de usuario, es decir, a un formulario
Un primer diálogo básico
Nuestro primer ejemplo no será muy ambicioso, se trata de ilustrar un simple diálogo que se abrirá al ser cargada la página, con un mensaje en su interior y ninguna funcionalidad adicional.
El código es el del Listado 1 y se comentará seguidamente.
Listado 1: Código de un diálogo simple.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Uso básico</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(function () {
$("#dialog").dialog();
});
</script>
</head>
<body>
Diálogo:
<div id="dialog" title="Dialogo básico">
<p>Diálogo básico amodal. Puede ser movido, redimensionado y cerrado haciendo clic sobre el botón 'X'.</p>
</div>
</body>
</html>
Si repasamos el código nos encontramos, por orden secuencial:
- Al comienzo del documento, en la etiqueta <head>, insertaremos las bibliotecas CSS y jQuery y los códigos correspondientes
- La referencia a la hoja de estilos del User Interface de jQuery:jquery-ui.css
Debe ser la primera de las bibliotecas CSS referenciadas - La referencia a la biblioteca jQuery general: jquery-x.x.x.js
Debe ser la primera de las bibliotecas JavaScript referenciadas - La referencia a la biblioteca User Interface de jQuery: jquery-ui.js
- Una función de inicialización del Dialog:
$("#dialog").dialog();
Que, como vemos, toma el elemento al que va asociado y la función sin parámetros, sin más - En el cuerpo del documento, etiqueta <body> irá el resto de elementos HTML, entre ellos la definición del diálogo:
<div id="dialog" title="Dialogo básico">
