¿Qué ha cambiado en jQuery UI 1.8 - Plus Free Books!

jQuery UI 1.8 se encuentra actualmente en la etapa candidata de lanzamiento y, a menos que se descubra un error o falla importante, pronto se convertirá en el lanzamiento estable actual de la biblioteca de UI oficial de jQuery. Entonces, ¿qué ha cambiado desde la última versión estable actual de 1.7.2? Una de las principales diferencias, por supuesto, es que la biblioteca ahora se ejecuta en la última versión de jQuery: la versión 1.4.1, pero ha habido muchos otros cambios, incluida la adición de algunos componentes nuevos e increíbles, que veremos en el futuro. curso de este artículo.


Copias gratuitas de jQuery UI 1.7

El autor de este artículo, Dan Wellman, lanzó recientemente jQuery UI 1.7, de Packt Publishing. Es una lectura fantástica, y me complace anunciar que tenemos un puñado de copias para distribuir al azar. Simplemente deje un comentario sobre el artículo y automáticamente ingresará al dibujo. Vuelve el lunes para averiguar si eres un ganador.!


1. Zapping de insectos

Esta versión de la biblioteca trae varias correcciones de errores para algunos componentes clave, incluidos los widgets Datepicker y Dialog y los ayudantes de interacción Droppable, Resizable y Selectable. Ninguno de los errores fue un obstáculo, pero sin embargo, eliminar los errores es una parte crítica de la progresión en curso de la biblioteca. Un punto importante a tener en cuenta es que la antes de cerrar evento del widget de diálogo ha sido desaprobado y reemplazado por antesCerrar para que siga la misma convención de nomenclatura que los eventos de otros componentes.

Además de los errores en el código, también se han abordado varios problemas de estilo y accesibilidad; en particular, el texto del título de los widgets de diálogo ya no puede desaparecer detrás del icono de cierre, y se ha mejorado la navegabilidad del teclado del nuevo widget. Para obtener una lista completa de todas las correcciones de errores incluidas con la versión 1.8, consulte el registro de cambios en http://jqueryui.com/docs/Changelog/1.8rc1


2.Posicionamiento

La interfaz de usuario de jQuery ahora tiene un sistema de posicionamiento único que puede usarse siempre que un widget deba posicionarse en relación con otro elemento, como con un menú desplegable o una información sobre herramientas flotante. La utilidad Posición nos permite especificar fácilmente, utilizando una serie de cadenas simples, qué parte del elemento posicionado debe fijarse a qué parte del elemento objetivo especificado. Así, por ejemplo, la "arriba a la izquierda" punto de un elemento se puede fijar a la "abajo a la derecha" de otro elemento especificado.

La utilidad también cuenta con un sistema robusto de detección de colisiones que evita que los espectadores de la página estén expuestos a barras de herramientas antiestéticas si el elemento que se está colocando se acerca demasiado al borde de la ventana gráfica o si no puede ocupar su lugar posicionado.

La API para esta utilidad es compacta, con solo 7 opciones configurables en esta etapa. Sin embargo, esto nos da todo el control que necesitamos y nos permite especificar hasta 81 posibles combinaciones de posicionamiento; Las opciones que podemos configurar incluyen las siguientes:

a:
Se refiere a la posición en el elemento objetivo al que se fijará el elemento que se está posicionando; el método acepta una única cadena compuesta por el valor para el eje horizontal (ya sea Correcto, centrar, o izquierda) seguido del valor para el eje vertical (ya sea parte superior, centrar, o fondo). No hay carácter separador entre los 2 valores..
bgiframe:
Si el complemento bgiframe está disponible en la página, esta opción aplicará un marco de iframe al elemento posicionado, lo que puede ayudar a evitar que los elementos seleccionados que aparecen arriba del contenido posicionado en IE6.
colisión:
Esta opción determina cómo se manejan las colisiones; Acepta una de las siguientes cadenas: dar la vuelta, ajuste o ninguna. El valor predeterminado es dar la vuelta, lo que hace que el elemento que se posiciona invierta la posición en relación con el elemento objetivo, por ejemplo,. "centro derecha" se convertirá "centro izquierdo".
mi:
Se refiere al elemento que se está posicionando; acepta los mismos valores que a.
de:
Acepta un selector jQuery que especifica el elemento de destino.
compensar:
Especifique un número de píxeles para desplazar el elemento que se coloca en el elemento de destino.
utilizando:
Con esta opción se puede utilizar una función de devolución de llamada que le permite animar el posicionamiento del elemento.

3. Autocompletar

¡Uno de mis widgets favoritos ha regresado como un componente oficial de UI! Autocompletar fue un widget beta en una versión 1.6 de la biblioteca y ahora está de vuelta después de un refactor completo. Se adjunta a las entradas de texto en la página y proporciona una lista de posibles opciones cuando un visitante comienza a escribir en el campo de texto..

El widget puede tomar sus datos (los elementos correspondientes en el menú de sugerencias) de una variedad de fuentes, incluida una matriz de JavaScript estándar, JSON a través de una solicitud AJAX o una función de devolución de llamada flexible que puede implementar cualquier fuente de datos y devolver una respuesta personalizada para mostrarla el menú de sugerencias.

Autocompletar es un widget altamente configurable y presenta una API completa de opciones, métodos y eventos para usar. Es completamente temática a través de SteamRoller y totalmente navegable por teclado. En general, este componente aporta mucha funcionalidad a sus páginas. En algún punto futuro, el almacenamiento en caché también puede ser un comportamiento configurable.

Echemos un vistazo a su API; Contiene las siguientes tres opciones de configuración:

retrasar:
Podemos especificar la cantidad de milisegundos que el widget debe esperar antes de mostrar el menú de sugerencias cuando el visitante comienza a escribir en la entrada.
longitud mínima:
Esta opción toma un número entero que se refiere a cuántos caracteres deben escribirse en la entrada antes de que se muestre el menú de sugerencias.
fuente:
Configuramos la fuente de datos usando esta opción; los valores posibles incluyen una matriz de cadenas que representan los elementos que se muestran en el menú de sugerencias, o una matriz de objetos donde cada objeto contiene dos propiedades: la primera es la etiqueta que se muestra en el menú de sugerencias, la segunda es el valor que se agregará a la entrada si se selecciona un elemento en el menú de sugerencias. También podemos proporcionar una única cadena que representa un recurso remoto que puede devolver los datos de forma asíncrona, o una función de devolución de llamada que puede solicitar los datos y devolverlos al widget en el formato requerido..

Los siguientes dos métodos están expuestos por Autocompletar:

cerrar:
Se utiliza para cerrar el menú de sugerencias..
buscar:
Realice una búsqueda de los datos disponibles y muestre las sugerencias si el término coincide. Puede tomar un valor predefinido como el término que se pasa al método como un argumento, o el valor del campo de entrada al que está asociado.

También podemos enganchar funciones de devolución de llamada en los siguientes eventos personalizados:

cambio:
Se activa después de seleccionar un elemento en el menú de sugerencias y el menú se cierra..
cerrar:
Se dispara cada vez que se cierra el menú de sugerencias, ya sea que se haya seleccionado o no un elemento. Precede al cambio evento.
atención:
Se dispara directamente antes de que se dé el foco a un elemento en el menú de sugerencias..
abierto:
Se dispara una vez que se han devuelto los datos, justo antes de que se muestre el menú de sugerencias.
buscar:
Se dispara directamente antes de que se busque la fuente de datos. La búsqueda se puede cancelar volviendo. falso desde una función de devolución de llamada vinculada a este evento.
seleccionar:
Este evento se activa cuando un elemento del menú antes de que se cierre el menú.

Como un bono especial, el archivo de origen para el widget Autocompletar también contiene el widget del Menú beta, que todavía está en desarrollo y se lanzará en una versión posterior de la biblioteca. Hasta ahora parece una adición robusta y atractiva a la biblioteca, y nos permite transformar una lista desordenada en un atractivo menú desplegable o desplegable. Se admiten muchas funciones, incluidos submenús, íconos, divisores e incluso un menú detallado con ruta de navegación.


4. Botón

El widget de botón nos permite implementar botones atractivos y funcionales que pueden configurarse para comportarse como un tipo particular de botón; por ejemplo, podemos crear botones pulsadores estándar, botones de estilo de radio donde solo se puede seleccionar un botón en un conjunto, o botones de estilo de verificación donde se puede seleccionar cualquier número en un conjunto particular. También se pueden crear varios tipos de botones que incorporan un menú desplegable simple.

Es un widget muy flexible y se puede construir utilizando una variedad de elementos subyacentes, incluidos