Manual de jQueryUI

Introducción a jQueryUI

Qué es jQueryUI y cuáles son los pasos que debes realizar para comenzar a usar estas librerías para la creación de interfaces de usuario enriquecidas y compatibles con todos los navegadores.

1.- Primeros pasos con jQuery UI
Guía para comenzar jQuery UI, una librería de componentes listos para usar en páginas dinámicas del cliente, creada a partir del framework Javascript jQuery. Entrar

2.- Videotutorial de introducción a jQueryUI
Videotutorial en el que mostraremos qué se debe hacer para comenzar a usar las librerías para la creación de interfaces de usuario enriquecidas jQueryUI. Entrar

Interacción

Cómo implementar comportamientos complejos para la interacción con el usuario, como el arrastrar y soltar, que son típicos en interfaces avanzadas, a través de los plugins que nos ofrece jQueryUI.

3.- Funcionalidad de arrastrar con jQueryUI
Cómo implementar el comportamiento arrastrar a través de jQueryUI y los elementos draggable. Entrar

4.- Preguntas y respuestas con el elemento draggable de jQueryUI
Algunas cuestiones que nos parece útil explicar sobre el plugin draggable de jQueryUI, como modificar sus estilos, averiguar su posición o restringir su localización a un contenedor. Entrar

5.- Implementar la acción de soltar, de drag & drop, con droppable de jQueryUI
Cómo utilizar las librerías jQueryUI y el plugin droppable para realizar cosas cuando un usuario suelte un elemento sobre otro, en una operación de arrastrar y soltar (drag & drop). Entrar

Uso de los componentes disponibles en jQueryUI

Los componentes o widgets de jQueryUI permiten crear interfaces de usuario avanzadas y útiles para la creación de aplicaciones web enriquecidas. A continuación explicaremos cómo utilizar y exprimir las posibilidades de las librerías instalando componentes listos para usar.

6.- Componente Datepicker de jQuery UI
Un componente de interfaces de usuario en jQuery UI que sirve para mostrar un calendario con el que seleccionar una fecha de manera visual. Entrar

7.- Componente Dialog de jQuery UI
Plugin Dialog, el componente para crear cajas de diálogo dinámicas que ofrecen las librerías para creación de interfaces de usuario jQuery UI. Entrar

8.- Opciones del plugin Dialog de jQuery UI. Caja modal.
Cómo configurar las cajas de diálogo a través de un objeto de opciones que enviamos al método dialog(), de jQuery UI. Vemos también cómo hacer una caja modal. Entrar

9.- Plugin Button de jQuery UI
Un plugin jQuery que nos permite implementar botones de funcionalidades mejoradas gracias a las librerías jQuery UI de Javascript y CSS. Entrar

10.- Configuración avanzada de button jQuery UI
Algunas configuraciones posibles para mejorar las funcionalidades del plugin Button de las librerías jQuery UI. Entrar

11.- Array de plugins Button de jQuery UI
Un taller jQuery para utilizar dos componentes de interfaces de usuario de las librerías jQuery UI, los plugins Button y Dialog. Entrar

12.- Plugin autocomplete de jQuery UI
Como usar el plugin jQuery UI autocomplete, para crear un campo de texto que ofrece sugerencias para autocompletar la información escrita, según se escribe. Entrar

13.- Campo de autocompletado en jQuery UI con carga remota de opciones
Cómo hacer un campo de autocompletar que permita conectarse con una URL para obtener las opciones sugeridas a través de JSON. Entrar

14.- Accordion de jQueryUI
El plugin accordion de jQueryUI nos permite mostrar contenidos de una manera dinámica. Explicamos cómo utilizarlo. Entrar

Librería CSS de jQueryUI

jQueryUI dispone de un framework CSS que nos facilitará la creación de estilos para crear nuestras propias interfaces de usuario.

15.- Framework CSS de jQueryUI
jQueryUI ofrece un framework CSS con estilos que facilitan la creación de interfaces de usuario y que se pueden utilizar en sitios web y en widgets o componentes basados en jQueryUI. Entrar

Taller de jQuery UI

Artículos prácticos que utilizan las librerías jQueryUI para la creación de páginas con interfaces de usuario avanzadas en Javascript.

16.- Juego del ahorcado Javascript con jQuery UI y Canvas del HTML 5
Aplicación experimental del juego del ahorcado en Javascript, con jQuery y las librerías jQuery UI y uso del elemento Canvas del HTML 5. Entrar

17.- Ejemplo más complejo de Drag & Drop con jQueryUI
Veamos casos un poco más elaborados de utilidades Drag & Drop en páginas web, por medio de jQueryUI. Entrar

18.- Elementos ordenables con "sortable" de jQueryUI
Cómo hacer elementos cuyos items se puedan ordenar, por medio del interactor sortable de jQueryUI. Entrar