Aquí tenemos un nuevo ejemplo de uso de las librerías jQuery UI, para crear interfaces de usuario en el framework Javascript jQuery. Es una sencilla práctica donde mostraremos el modo de trabajo con los plugins Button y Dialog, que ya habíamos empezado a explicar anteriormente en los artículos Plugin Button de jQuery UI y plugin Dialog de jQuery UI.

En este ejemplo generaremos un conjunto de botones con las letras del abecedario y los insertaremos en el código HTML de la página. Luego definiremos un evento clic, para cada uno de los botones, que lance una ventana de diálogo mostrando la letra pulsada. Esto se podría hacer con Javascript normal, con botones HTML y cajas de Alert, pero nosotros lo vamos a hacer utilizando los plugins de jQuery UI mencionados anteriormente, con lo que disfrutaremos de una interfaz de usuario muy mejorada.

Lo iremos viendo por partes, para que se pueda entender todo mejor, pero antes de comenzar, recomendamos ver el ejemplo en marcha para saber exactamente el objetivo de este ejercicio.

Partimos de una capa, con una etiqueta DIV inicialmente vacía, donde insertaremos los botones dinámicamente. Esa capa está en el código HTML de la página y le hemos puesto un identificador "botonesletras".

<div id="botonesletras"></div>

Bucle Javascript para recorrer las letras del abecedario

El primer paso es hacer un bucle sobre las letras del alfabeto y esto lo haremos generando un array con todas las letras y utilizando un bucle for para recorrerlo.

var letras = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'Ñ', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
for(i=0; i<letras.length; i++){
   //recorro todas las letras y hago los botones
}

Generar cada botón e insertarlo en la página

Ahora, dentro del bucle anterior, tenemos que generar cada uno de los botones y para ello crearemos dinámicamente elementos SPAN con la letra actual. Los convertiremos en botones y los insertaremos en la página.

var letras = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'Ñ', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
for(i=0; i<letras.length; i++){
   //creo el span de la letra
   letraActual = $('<span class="botonletra">' + letras[i] + '</span>');
   letraActual.data("letra",letras[i]);
   //lo convierto en un botón
   letraActual.button();
   //lo inserto en la página, en la capa con id botonesletras
   $("#botonesletras").append(letraActual);
}

Fijarse que todos los SPAN los creo con la clase "botonletra", pues luego los seleccionaré todos a la vez por medio de esa clase para crear el evento en todos ellos de una sola vez.

Luego almaceno en el propio elemento un dato, para poder recordar a qué letra pertenece este SPAN. Este paso lo hago con la intención de saber qué letra se ha pulsado cuando se defina el evento.

Convierto el SPAN en un botón con una llamada al método button(), que es la manera de invocar el plugin de Button de jQuery UI.

Acabo el bucle insertando la letra actual, convertida en botón, en el elemento "#botonesletras" (El DIV mencionado al principio del artículo).

Crear el evento click en los botones

Ahora creemos el evento click, para mostrar la tecla pulsada en una caja de diálogo.

El evento se crea con el método click(), invocado sobre los elementos de la clase "botonletra", que es la class de CSS que puse en los SPAN de cada botón.

$(".botonletra").click(function(){
   //creo una capa con la letra pulsada
   var caja = $('<div class="dialogletra" title="Has pulsado una letra">' + $(this).data("letra") + '</div>');
   //la convierto en caja de diálogo modal box
   caja.dialog({
      modal: true,
      buttons: {
         "Ok": function(){
            $(this).dialog("close");
         }
      },
      show: "fold",
      hide: "scale"
   });
})

Como se habrá visto, con un único código se define el evento sobre todos los botones. En el código del evento se hacen un par de sencillos pasos para generar las cajas de diálogo. El primero para crear una capa y el segundo para convertir esa capa en una caja de diálogo Modal Box, por medio del plugin Dialog de jQuery UI.

Hay que fijarse que en la capa creada dinámicamente escribimos el valor de la letra pulsada, que recuperamos por medio del método data() del elemento que recibe el evento. La caja de diálogo mostrará el contenido de esa capa creada dinámicamente, como se explicó al ver el plugin Dialog de jQuery UI.

Código completo de la práctica con jQuery UI

Para acabar, mostramos el código completo de la página, donde se podrá ver también otras partes no comentadas ahora porque ya las hemos visto anteriormente en DesarrolloWeb.com, en los manuales de jQuery y jQuery UI.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Probando el plugin button de jQuery UI</title>
   <link type="text/css" href="css/dot-luv/jquery-ui-1.8.1.custom.css" rel="Stylesheet" /> 
   <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
   <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script> 
<script>
$(document).ready(function(){
   var letras = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'Ñ', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
   for(i=0; i<letras.length; i++){
      //creo el span de la letra
      letraActual = $('<span class="botonletra">' + letras[i] + '</span>');
      letraActual.data("letra",letras[i]);
      //lo convierto en un botón
      letraActual.button();
      //lo inserto en la página, en la capa con id botonesletras
      $("#botonesletras").append(letraActual);
   }
   $(".botonletra").click(function(){
      var caja = $('<div class="dialogletra" title="Has pulsado una letra">' + $(this).data("letra") + '</div>');
      caja.dialog({
         modal: true,
         buttons: {
            "Ok": function(){
               $(this).dialog("close");
            }
         },
         show: "fold",
         hide: "scale"
      });
   })
});
</script>
<style type="text/css">
body{
   font-size: 0.7em;
}
.botonletra{
   font-size: 0.8em;
   margin: 2px;
}
.dialogletra{
   font-size: 3em;
   text-align: center;
   padding-top: 15px;
}
</style>
</head>

<body>

<div id="botonesletras"></div>
</body>
</html>

Y finalizamos poniendo el enlace del ejemplo en funcionamiento.