Aprende jQuery UI sin dolor

jQuery UI es una biblioteca de componentes para el framework jQuery que le añaden un conjunto de plug-in y efectos visuales para la creación de aplicaciones web.

Para utilizar la librería de interface de usuario necesitamos previamente la librería jQuery instalada y los css que conforman el "tema" de los widgets.

La librería de los jQuery UI contienen muchos archivos que nos pueden ser de mucha utilidad en el desarrollo de nuestras aplicaciones Web.

Parte fundamental para el entendimiento de la creación y manipulación de los componentes de jQuery UI es el manejo de los métodos, y cómo utilizarlos como setter y getter.

Parte fundamental para el entendimiento de la creación y manipulación de los componentes de jQuery UI es el manejo de los eventos y de las funciones de tipo callback que son generadas.

Una parte fundamental para comprender y utilizar los componentes de jQuery UI es el manejo de su framework de estilos en cascada y la ubicación de los mismos.

En jQuery UI no tenemos la subclase como :hover, sin embargo podemos utilizar una subclase para simular un “roll over”, similar a la subclase.

En jQuery UI podemos incluir iconos que son incluidos dentro de los archivos de los temas, pero también podemos incluir iconos personalizados, así como utilizar los sprite-sheets o un archivo con diferentes iconos.

Nuevos widgets: jQuery UI 1.12 incluye widgets: Controlgroup reemplaza el conjunto de botones (buttonset) y añade soporte para selectmenu y el nuevo widget checkboxradio.

Con el método draggable podemos hacer "arrastrable" a cualquier elemento HTML, Simplemente lo marcamos como draggable y los podemos arrastrar por medio del botón sostenido del ratón.

Con el parámetro “axis” podemos limitar el movimiento del objeto en el eje “x” (izquierda-derecha) o el eje “y” (arriba y abajo):

$( ".selector" ).draggable({ axis: "x" });

Con el parámetro “containment” restringimos el movimiento a otro elemento DOM.

Con el parámetro “cursor” podemos cambiar el cursor a cualquiera que sea válido en css, por ejemplo: default, move, pointer, crosshair, etc.

Con el parámetro “cursorAt” podemos cambiar la posición del cursor, que por omisión es el centro del objeto. Podemos utilizar una o dos de las siguientes llaves:

{ top, left, right, bottom }

El desplazamiento es en pixeles.

La iteración droppable nos permitirá detectar cuando un objeto arrastrable (dragable) es soltado en otro elemento (droppable) y podemos disparar eventos.

Con la propiedad “accept” podemos indicar cuáles objetos “arrastrables” son aceptados y cuáles no lo son. Con la propiedad “revert” podemos hacer que los objetos “arrastrables” regresen si no son soltados en una área que los acepte.

Con esta iteración podemos modificar el tamaño de un elemento del documento en tiempo de ejecución, arrastrando algunas de sus lados o la esquina inferior izquierda.

Por medio del parámetro “contaiment” podemos restringir el tamaño del elemento que ampliamos.

$("#foto").resizable({containment:"#contenedor"});

La propiedad “animate” nos permitirá animar el crecimiento del elemento. Sus valores son verdadero y falso (true/false).

La iteración selectable, así como un par de estilos en cascada, permitirán seleccionar, como si fuera unas opciones de sistema operativo, y por medio del ratón, diferentes opciones de las listas no ordenadas y ordenadas.

Por medio de jQuery UI podemos hacer seleccionar un grupo de elementos. Posteriormente veremos cómo procesar esa lista de objetos.

Por medio del parámetro “stop” podemos ejecutar una función cuando detenemos la selección de uno o más elementos.

La función puede ser anónima o la referencia a la misma. Los elementos seleccionados tendrán la clase de CSS “.ui-selected”. Por medio de un ciclo “each” podemos recorrer a todos los elementos seleccionados.

Una vez que tenemos una lista, ya sea ordenada o sin orden, es muy sencillo cambiarla a una lista "ordenable", es decir, que el usuario pueda arrastrar y soltar los elementos para ordenarlos a su gusto. Esto lo realizaremos con el método sortable de jQuery.

Por medio de la interación "sortable" podemos mover cualquier objeto, como un cuadro de etiquetas o elementos HTML.

Por medio de la interación "sortable" podemos mover cualquier objeto, como un cuadro de etiquetas o elementos HTML, ya sean texto o imágenes.

Es muy sencillo hacer una división como acordeón. Basta identificar una división y luego dar el método acordeón.

Por omisión un acordeón siempre tienen una sección abierta. Por medio del parámetro “collapsible” podemos mantener a todas las secciones "colapsable" si la abrimos y la cerramos.

Podemos relacionar el acordeón con otros widgets u interaciones.

Por medio del parámetro “refresh” hacemos que se “refresque” y se adapte.

Por medio de la propiedad “icons” nos permite manejar, modificar u omitir los iconos en el acordeón.

header: se maneja el icono con la pestaña cerrada.

activeHeader: se presenta cuando la pestaña abierta.

El parámetro “heightStyle” controla la altura del acordeón y cada panel.

Valores posibles:

"auto": Todos los paneles se ajustará a la altura del panel de alto.

"fill": Expandir la altura disponible basada en la altura el padre del acordeón.

"content": Cada panel será tan alto como sólo su contenido.

Podemos relacionar un acordeón con la iteración “sorteable”.

Cuando arrastramos una de las pestañas del acordeón, podemos detectarlo por medio de la iteración “sorteable” y reacomodarlo.

El autocomplete es otro widget de jQuery que es sencillo y muy poderoso, Puedo aplicarlo a un campo de entrada de un formulario por medio de un arreglo.

El parámetro “source” tiene tres valores:

Array: podemos escribirlo o pasarlo por referencia.

También puede recibir arreglos de objetos.

Una cadena o string: es para el uso de URL.

Una función de callback, que recibe dos parámetros:

request: es un objeto que sólo tiene un parámetro (term) que contiene la cadena de entrada que el usuario escribe.

response: es una función de callback que tiene un sólo parámetro, que son las sugerencias del widget.

Otro de los widgets que nos permite crear jQuery es el de crear botones. Con ello podemos mantener la apariencia de los diferentes elementos de jQuery, y en caso que desee cambiar el tema, su apariencia se mantendrá consistente.

Uno de los parámetros de los botones es colocar diferente íconos. Incluso podemos colocar un par de ellos con los sub parámetros primary y secundary.

También podemos modificar las cajas de verificación o checkboxes desde jQuery. Ya sea que tomemos un sólo checkbox y lo manejemos como un botón con selección (toggle), o un grupo de ellos.

También podemos manejar botones de radio con jQuery UI. Al igual que los demás elementos, la ventaja es que cuando cambiemos el tema de nuestra página, también los botones de radio lo harán. Convertirlos a jQuery será muy sencillo.

Agrupa campos de entrada para darles aspectos del tema.

• Agrupa campos de entrada de tipo radio y casilla de verificación para darles aspectos del tema.