Dialog con jQuery

De ChuWiki
Saltar a: navegación, buscar

Con jQuery podemos hacer ventanas de diálogo que se abran al pulsar un botón, que se pueden arrastrar, redimensionar y que tienen su botón de cerrar en la esquina superior derecha.


El código html

Primero hacemos el código html de nuestra página. Lo que será el diálogo no es más que un <div> dentro de la página. Podemos ponerlo en cualquier lado, porque luego ira oculto y cuando se visualice "flotará" sobre el resto de la página.

<!doctype html>
<html>
  <head>
     <meta charset="utf-8">
     <title>Demo</title>
     <link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
     <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
     <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
  </head>
  <body>
      <div id="dialogo" title="titulo">
         <p>soy un dialogo</p>
      </div>
      <button id="abrir">Abrir</button>
      <button id="cerrar">Cerrar</button>
   </body>
</html>

Hemos puesto en el head la hoja de estilo y los jQuery necesarios. El tema CSS es importante para que el diálogo tenga aspecto de diálogo. Puedes bajarte alguno que encuentres por ahí o puedes hacer tu propio tema fácilmente con la aplicación web ThemeRoller.

También hemos puesto el div id="dialogo" que será el dialogo y un par de botones que nos servirán para abrir y cerrar el diálogo.


El código javascript

Ahora sólo nos queda darle funcionalidad usando las funciones de javascript/jQuery. Para ello ponemos entre tags <script>, después del <body> por ejemplo

<body>
     <script>
        $(document).ready(function() {
           $("#dialogo").dialog({autoOpen:false});
           $("#abrir").click(function(event) {
               // $("#dialogo").dialog('option','position',[event.offsetX, event.offsetY]);
               
               $("#dialogo").dialog('open');
           });
           $("#cerrar").click(function() {
               $("#dialogo").dialog('close');
           });
        });   
      </script>
      ...

Simplemente decimos que cuando el documento esté cargado haga lo siguente:

  • $("#dialogo").dialog({autoOpen:false}); Al elemento con id="dialogo" (nuestro div) lo convertimos en dialogo (llamando a dialog()). Como parámetro pasamos un {autoOpen:false} de forma que el dialogo se ocultará hasta que lo visualicemos de alguna forma. Si no hacemos esto último, el diálogo será visible desde el principio.
  • $("#abrir").click(function(event) { Al botón de id=abrir le ponemos una función que se ejecutará cuando se haga click en él. Esta función visualizará el diálogo $("#dialogo").dialog('open');
  • Hemos puesto comentado // $("#dialogo").dialog('option','position',[event.offsetX, event.offsetY]);. Si lo descomentamos, el diálogo se visualizará en la posición en que se hace click con el ratón, es decir, sobre el botón. Si no, aparecerá centrado.
  • $("#cerrar").click(function() { Al botón de id=cerrar le ponemos una función que se ejecutará cuando se haga click en el botón. Esa función cerrará el diálogo $("#dialogo").dialog('close');


Más opciones

Los diálogos de jQuery tienen muchas más opciones. Podemos añadirle botones como "Aceptar", "Cancelar" o lo que queramos, hacer que se pueda o no arrastrar, redimensionar, fijar tamaños, hacer efectos de visualización u ocultar, etc, etc. Aquí tienes todas las opciones http://docs.jquery.com/UI/Dialog