Crear una caja de diálogo modal de jQueryUI con jQuery4PHP

  • Por
  • PHP
Pasos para implementar una caja de diálogo dinámica o Modal Box, de las que se encuentran en las librerías jQueryUI, pero directamente desde PHP y sin programar ni una línea de código Javascript.
En el artículo anterior relatamos una serie de pasos para poder utilizar las funcionalidades de jQueryUI desde PHP, sin necesidad de saber Javascript, utilizando las librerías jQuery4PHP.

Una vez realizados todos los pasos relatados en el anterior artículo, podemos construir toda la variedad de interfaces de usuario disponibles en jQueryUI, con muy pocas líneas de código PHP y sin preocuparnos de las complejidades del framework jQuery. Para relatar cómo crear interfaces de usuario avanzadas desde PHP, en este artículo presentaremos los pasos a realizar para poder construir una "Modal Box" o caja de diálogo dinámica.

Nota: Las "Modal Box" son unas cajas de diálogo que aparecen en la pantalla del navegador y que tienen la particularidad de oscurecer el fondo de la página, no permitiendo operar con ella hasta que realicemos las acciones que nos indiquen en la caja. Podemos realizarlas de manera super sencilla a través de las liberías jQueryUI, tal como explicamos en el artículo Componente Dialog de jQuery UI.

Generar el contenido de la caja:
En este paso crearemos la estructura de la caja, es decir, el HTML del cuerpo de la caja de diálogo. Este es un paso previo a la invocación de la caja de diálogo, gracias al cual estará preparada para visualizarse en el momento que deseemos. Es decir, una vez realizado este paso, la caja todavía no aparecerá en la página, sino que estará oculta, pero lista para ser mostrada cuando nosotros programemos.

Para crear ese HTML, que mostraremos en la caja, tenemos que llamar a unos métodos de jQuery4PHP, creados especialmente para ello.

<?php echo YsUIDialog::initWidget('dialogId','style="display:none" title="Caja de diálogo de prueba con jQueryUI"') ?>
   
<p>Estimados amigos,</p>
<p>Estoy probando lo sencillo que es hacer una caja de diálogo modal...</p>

<?php echo YsUIDialog::endWidget() ?>

Como se puede ver, realizamos una llamada a un método initWidget(), en el que enviamos varios datos. Primero el identificador que asignaremos a la caja 'dialogId', luego unos estilos CSS especiales y por último el título de la caja.

Una vez invocado ese método, podemos escribir el código HTML que habrá dentro de la caja, tan largo como nosotros necesitemos.

Para finalizar el HTML del cuerpo de la caja, realizamos una llamada al método endWidget().

Crear un elemento HTML para abrir la caja:
La caja generalmente se abrirá cuando se realice alguna acción por parte del usuario, como pulsar un botón, un enlace o lo que sea. Por ello necesitaremos un elemento de la página, al que luego le agregaremos un evento para abrir la caja cuando se haga clic sobre él.

<button id="abrecaja">Abrir la caja de diálogo</button>

Lo único que debemos fijarnos es que ese elemento tenga un identificador o algún otro detalle que nos permita luego seleccionarlo para asignarle el evento con jQuery4PHP.

Abrir la caja como respuesta a un evento clic:
Ahora tenemos que realizar un evento sobre un elemento de la página, para lanzar la caja cuando se realice alguna acción por parte del usuario. Para ello, veamos a continuación el código PHP necesario para crear ese evento.

<?php
echo
YsJQuery::newInstance()
->onClick()
->in('#abrecaja')
->execute(
   YsUIDialog::build('#dialogId')
    ->_modal(true)
    ->_width(600)
    ->_show('slide')
    ->_buttons(array(
       'Ok' => new YsJsFunction('alert("Perfecto!!")'),
       'Cerrar' => new YsJsFunction(YsUIDialog::close('this')))
    )
)
?>

Como se puede ver, los eventos se definen del mismo modo que ya se aprendió en el artículo de primeros pasos para programar jQuery con jQuery4PHP. Lo que es nuevo en este caso es la llamada al método build() de la clase YsUIDialog, al que le enviamos por parámetro el identificador de la caja de diálogo, definido al generar el cuerpo HTML de la caja (explicado dos pasos antes en este mismo artículo).

Al método build() además le indicamos varias otras opciones de configuración, en las líneas de código siguientes, que sirven para crear una caja modal, definir una anchura de 600 píxeles, definir el tipo de animación para abrir la caja y los botones que aparecerán en ella, junto con sus funciones asociadas.

Nota: todas las opciones de configuración de la caja de diálogo se pueden conocer en la página de documentación de los componentes Dialog de jQueryUI, en la URL: http://jqueryui.com/demos/dialog/

El código completo de esta práctica se encuentra a continuación.

<?php
include_once('source-showcase/lib/YepSua/Labs/RIA/jQuery4PHP/YsJQueryAutoloader.php');
YsJQueryAutoloader::register();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Probando jQuery 4 PHP</title>
   <script type="text/javascript" src="source-showcase/showcase/js/jquery.min.js"></script>
   <script type="text/javascript" src="source-showcase/showcase/js/jquery-ui-1.8.6.custom.min.js"></script>
   <link rel="stylesheet" type="text/css" href="css/sunny/jquery-ui-1.8.9.custom.css" />
</head>
<body>
   <h1>Caja Dialogo de jQueryUI</h1>
<h2>Probando hacer una caja básica</h2>
   
   <button id="abrecaja">Abrir la caja de diálogo</button>

   <?php echo YsUIDialog::initWidget('dialogId','style="display:none" title="Caja de diálogo de prueba con jQueryUI"') ?>
   
   <p>Estimados amigos,</p>
   <p>Estoy probando lo sencillo que es hacer una caja de diálogo DHTML con jQuery4PHP y las funciones para generar interfaces de jQueryUI.</p>
      
   <?php echo YsUIDialog::endWidget() ?>
   
   <?php
   echo
   YsJQuery::newInstance()
    ->onClick()
    ->in('#abrecaja')
    ->execute(
      YsUIDialog::build('#dialogId')
       ->_modal(true)
       ->_width(600)
       ->_show('slide')
       ->_buttons(array(
          'Ok' => new YsJsFunction('alert("Perfecto!!")'),
          'Cerrar' => new YsJsFunction(YsUIDialog::close('this')))
       )
    )
   ?>

</body>
</html>

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

antonio

01/3/2011
No funciona el enlace al ejemplo
No se si es problema mío o del enlace, pero no puedo ver el ejemplo del modal box que mostrais en el tutorial.
Aún así, muy buen aporte, como siempre.
Felicidades

Laura

02/3/2011
La página para ver el ejemplo no está
En el articulo 'Crear una caja de diálogo modal de jQueryUI con jQuery4PHP' no es posible ver el ejemplo.
un saludo
Laura

midesweb

02/3/2011
Es cierto...
En local el ejemplo me funciona perfectamente, pero en el servidor no está funcionando no sé por qué. Imagino que debe de ser alguna configuración específica del PHP instalado en el servidor de DesarrolloWeb.com.

Lamentablemente, de momento no puedo hacer otra cosa que quitar los enlaces al ejemplo. Lo siento, pero no tengo tiempo para más.

Pero bueno, el problema reside en la ejecución de la función

YsJQueryAutoloader::register();

Que me deja colgada la página y acaba como un documento vacío.

Saludos!

Omar

05/3/2011
jQuery4PHP
Se ha liberado la version 1.2.0 Beta de jQuery4PHP.

Probablemente el error que comenta Miguel fue resuelto en esta version... aunque yo probe el codigo del tutorial y me funciona perfectamente.

Creo que lo unico nuevo en esta version es que todos los .js y .css se centralizaron en una carpeta llamada 'jquery4php-assets'.

Esto es para poder utilizar el objeto YsConfigAsstes de jQuery4PHP...

jesus zambrano

03/6/2011
ciertamente a mi me presenta error el codigo en mi servidor
Hola buen dia, a mi tmabien me presenta error en el servidor que tengo pero localmente funciona de manera perfecta, si alguien logra dar con el error estamos en contacto.

Saludos

ciclao22

18/11/2011
Seria bueno que explicarais mas acciones.
Tengo que decir que el articulo es impresionante.

Ahora bien, de que forma se podria saber si el usuario ha pulsado alguno de los botones de la caja de dialogo? Podrias hacer un tutorial, sobre la misma caja de dialogo, que si pulsa el OK redirija al usuario a otra pagina, o marcara un checkbox... y si pulsara el de Cancelar, mostrara otra caja de dialogo o algo asi.

Un saludo.