En este artículo veremos las generalidades sobre un interesante plugin para crear botones con configuraciones avanzadas, así como aspecto y posibilidades mejoradas, con respecto a los botones normales utilizados en formularios HTML. Se trata del plugin Button de jQuery UI, del que veremos varios ejemplos para aprender a utilizarlo.

El plugin Button de jQuery incluye un método para convertir cualquier elemento HTML, como un enlace o una división, en un botón mejorado. Por este proceso el elemento se estilizará como si fuera un botón, aplicando esquinas redondeadas y otros estilos del tema de jQuery UI que hayamos seleccionado en la descarga de las librerías, y además se activará como elemento "caliente", que cambiará al pasar el ratón por encima, para indicar al usuario que se puede hacer clic sobre él.

Por medio de diversas configuraciones podemos conseguir además que el botón incluya algunos iconos y que tenga algunos comportamientos específicos de otros elementos, como botones de radio o checkboxes. Se trata por tanto de un componente de gran versatilidad que se puede utilizar para diversos propósitos en aplicaciones web enriquecidas del lado del cliente.

Crear un botón jQuery UI

Para crear un botón, podemos utilizar en principio cualquier tipo de elemento HTML, como puede ser un enlace, una división o un span.

<a href="#">Mi botón</a>
<a href="#">Otro botón</a>

Ahora eso son enlaces absolutamente normales y para convertirlos en botones basta con invocar al plugin button, de la siguiente manera:

$("a").button();

Con la anterior instrucción estamos convirtiendo en botones todos los enlaces (etiquetas A) de la página. Como se puede ver, se ha invocado al plugin button, por medio de una llamada al método button(), sobre un conjunto de elementos que obtenemos por medio del selector de jQuery "a" (todos los enlaces).

Aplicar un evento clic al botón

Una de las cosas que con toda certeza querremos hacer en algún momento con los botones es asignarle eventos click o similares. Para ello el propio plugin del botón no implementa ningún tipo de evento especial, pero podemos asignarle cualquier evento estándar Javascript, como a cualquier otro elemento de la página. Para ello utilizamos el mismo procedimiento que ya conocemos para asignar eventos por medio de jQuery.

Por ejemplo, tememos estos dos elementos HTML, que comparten una misma clase CSS:

<div class="boton">Este botón lo construyo con un DIV</div>
<br><br>
<div class="boton">Otro DIV</div>

Ahora podemos hacer que esos elementos DIV se conviertan en botones, con una llamada al plugin jQuery.

$(".boton").button();

Como se puede comprobar, a través del selector ".boton" accedemos a todos los elementos de la página que tengan la clase (class de CSS) "boton" y luego con el método button() los convertimos en botones. A continuación, podríamos asignarle un evento clic, como a cualquier elemento de la página, por medio de jQuery y el método click():

$(".boton").click(function(){
   alert("Me has pulsado bien!!");
});

Ahora, cuando se pulse cualquiera de esos dos elementos se mostrará un mensaje en una caja de alerta.

Los botones vistos hasta el momento se puede encontrar en funcionamiento en una página aparte.

Hasta ahora hemos visto cómo crear un botón básico, pero el plugin button tiene muchas opciones de configuración avanzadas que conoceremos el próximo artículo.