Widgets jQuery UI – Uso, modificación y creación

En el artículo anterior vimos qué es jQuery, qué es jQuery UI y qué diferencias hay entre ambas bibliotecas. En este artículos vamos a ver cómo utilizar los widgets que trae la biblioteca jQuery UI. Además también veremos como modificarlos y cómo crear nuestros propios widgets.

Widgets de jQuery UI

Los widgets de jQuery UI pueden utilizarse para varias cosas. El uso más conocido son los componentes visuales. Hay algunos componentes muy utilizados como por ejemplo el Calendar. En muchos proyectos se utiliza jQueryUI solo para uno o dos componentes. Aunque es algo complementamente correcto, no es lo ideal. Si optas por utilizar jQueryUI es interesante intentar sacarle el máximo partido. Es decir, en lugar de tener decenas de componentes en javascript y solo uno o dos en jQueryUI, lo ideal es que una vez optas por esta librería intentes utilizar esta filosofía en el resto de desarrollos.

Componentes visuales de jQuery UI

Dentro de los diferentes tipos de widgets, los que más se suelen utilizar son los componentes visuales. Existen varios dentro de la propia biblioteca y otros que podemos desarrollar a medida. Los componentes visuales más utilizados son:

Calendar: Es el componente de selección de fecha más utilizado. Nos permite crear un campo de tipo fecha en nuestro formulario. Al pulsar sobre el campo se despliegue un calendario que permite al usuario elegir un día.

Slider: Es un campo de entrada de formulario de tipo control deslizante. Es el más utilizado en los simuladores (hipotecas, seguros, etc) para especificar un importe arrastrando su marcador.

ProgressBar: Nos permite crear en nuestra aplicación una barra de progreso. Es la tipica que su utiliza para mostrar “cargando…” en las aplicaciones web.

Cómo utilizar un widget o componente de jQuery UI

Para utilizar un widget de jQueryUI simplemente instanciamos el objeto que queremos utilizar.

Por ejemplo, para crear una barra de progreso en javascript mediante la biblioteca jQueryUI simplemente añadimos un snippet html y unas líneas de código javascript.

Añadir en el html el snippet:

<div id=”progressbar”></div>

Añadimos el script correspondiente:

<script>
$( function() {
$( “#progressbar” ).progressbar({
value: 40
});
} );
</script>

Con esto se creará nuestra barra de progreso. El resultado sería el siguiente:

En este ejemplo solo hemos especificado el valor de nuestra barra (atributo value con valor 40). Añadiendo atributos adicionales podemos especificar el tamaño, color, etc.

Cómo crear un widget con jQuery UI

Si queremos desarrollar un widget a medida lo más habitual es utilizar la Widget Factory. Otra opción menos utilizada sería crear un widget de la misma forma en la que se hace en la propia jQuery.

jQuery UI widgets factory

La función $.widget() permite definir un nuevo widget. Para utilizar la Widget Factory de jQueryUI se utiliza la función:

jQuery.widget(name,[ base,] prototype);

Los parámetros que puede recibir son:

name: Nombre del nuevo widget.

base: Podemos definir un widget base y que el nuevo widget sea un extensión.

prototype: Prototipo a utilizar. Puede ser un objeto ya existente o podemos definir un objeto que contenga las funciones que tendrá nuestro widget.

Con esto ya tenéis todo lo necesario para crear vuestro propio widget.

Hosting

Te recomendamos...