En el pasado artículo estuvimos introduciendo el plugin button de las librerías jQuery UI, que implementa la posibilidad de convertir en botones diversos elementos de una página web. Ahora continuaremos mostrando algunas configuraciones avanzadas de los botones que nos permitirán aumentar sus funcionalidades y la utilidad de los mismos en las páginas web.

Comenzaremos por la creación de botones indicando las opciones de configuración por medio de un objeto de options que enviamos al método button() para invocar al plugin. Luego veremos cómo se puede usar algún método específico de este plugin para cambiar sobre la marcha la configuración de un botón.

Options en botones de jQuery UI

Cuando creamos un botón podemos indicar un objeto de opciones de configuración para implementarlo según nuestras necesidades específicas. Las opciones de configuración básicas permiten definir cosas como el texto que tendrá escrito, si el botón estará activo o no, si se verá el texto o no, o los iconos que pondremos en el botón.

Lo más cómodo es ver este paso con un ejemplo. Partimos de este elemento HTML que luego convertiremos en botón.

<span class="botonoptions">Botón configurado</span>

Ahora podemos ver el código Javascript que nos permitirá convertirlo en botón, enviando diversas opciones de configuración en un objeto "options" al método button() con el que se invoca el plugin:

$(".botonoptions").button({
   icons: {
      primary: 'ui-icon ui-icon-refresh'
   },
   label: "Actualizar",
   disabled: true
})

Esto construirá un botón con un icono primario (luego explicaremos esto), el texto "Actualizar" como etiqueta y que estará desactivado. Recomiendo ver la lista completa de opciones de configuración en la propia documentación de jQuery UI para el plugin button.

Iconos en botones jQuery UI

Como hemos visto, los botones en jQuery UI tienen la posibilidad de incluir iconos, lo que resulta un detalle bastante interesante. En jQuery UI tenemos definidos hasta 176 iconos de 16x16 en una especie de framework CSS incluido en las propias librerías. Todos esos iconos los podemos utilizar para decorar botones u otras interfaces de la página y para ello tenemos que utilizar tan solo unos nombres de clases.

La lista de botones disponibles, junto con el nombre de la clase de cada uno, se puede ver en el ThemeRoller de jQuery UI. En la parte de abajo podremos encontrar todos los iconos disponibles y si nos situamos con el ratón sobre uno de ellos, aparecerá el nombre de la clase de ese icono.

En los botones de jQuery UI podemos utilizar dos iconos, uno que aparecerá antes y otro después del texto del botón (si es que hemos colocado texto en el botón). Luego, para definir los dos iconos que se van a utilizar, tenemos que indicarlos en la llamada al método que invoca el plugin, por medio de un objeto "icons" al que le indicamos dos propiedades "primary" (para el icono que aparecerá antes del texto) y "secondary" (para el icono que habrá después del texto).

Tenemos un nuevo ejemplo para crear un botón con dos iconos. De momento veamos el HTML utilizado para generarlo.

<div id="botoniconos">Botón con iconos</div>

Ahora el jQuery para invocar al plugin Button y convertir el elemento en un botón con dos iconos.

$("#botoniconos").button({
   icons: {
      primary: 'ui-icon ui-icon-scissors',
      secondary: 'ui-icon ui-icon-mail-closed'
   }
});

Métodos para realizar acciones con el botón

Como otros plugins de jQuery UI, el plugin de button tiene algunos métodos para realizar acciones especiales con el botón. En la documentación del plugin podremos ver la lista de métodos que contiene y nosotros vamos a hacer un ejemplo aquí con uno de ellos.

El método que vamos a ver es el que nos permite cambiar en línea las propiedades un botón, es decir, las opciones de configuración de ese botón que se indicaron por el objeto de options.

Para invocar ese método tenemos que llamar al método del plugin enviando como primer parámetro el string "option" y como segundo parámetro un nuevo objeto de options.

Veamos el siguiente código que implementa un evento clic sobre el botón con iconos del ejemplo anterior.

$("#botoniconos").click(function(){
   $(this).button("option", {
      icons: {
         primary: 'ui-icon ui-icon-refresh'
      }
   });
})

Como se puede ver, cuando se haga clic sobre el botón se invocará al método button() sobre el botón en el que se hizo clic. Pero en este caso no es una simple llamada al plugin para generar un botón, pues le estamos pasando parámetros distintos al método. En el primer parámetro de la llamada a button() señalamos que se desea cambiar las "option" y en el segundo indicamos un nuevo juego de opciones en un objeto. En este caso en concreto simplemente se define un nuevo icono como icono primario, con lo que cambiarán los iconos que se muestran en el botón.

Podemos ver en una página aparte los botones que hemos realizado en los ejemplos de este artículo.

Para una práctica más avanzada con botones leer el taller Array de plugins Button de jQuery UI.