> Manuales > Librerías jQuery4PHP: jQuery desde 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>

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual