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.
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.!
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
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:
¡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:
Los siguientes dos métodos están expuestos por Autocompletar:
También podemos enganchar funciones de devolución de llamada en los siguientes eventos personalizados:
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.
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 , y . Los botones son totalmente accesibles y compatibles con ARIA, agregando o eliminando los roles y estados apropiados cuando sea necesario. El API es relativamente simple en este punto, pero cubre todos los elementos esenciales con tres opciones configurables y un solo método para invocar; Las opciones de configuración son las siguientes:
El evento al que podemos vincularnos para ejecutar una función de devolución de llamada y reaccionar a la interacción es el hacer clic evento; el nativo hacer clic el evento del navegador se utiliza a menos que con la radio o los botones de estilo de casilla de verificación, en cuyo caso el evento se activa mediante el widget, no el elemento subyacente.
La nueva utilidad final que se encuentra en jQuery UI 1.8 es la utilidad Mouse, que es utilizada por otros componentes de la biblioteca para distribuir mejor las implementaciones relacionadas del mismo comportamiento por diferentes widgets. Esto es excelente para los desarrolladores porque significa que si la interacción del mouse es un comportamiento requerido de un widget de UI personalizado, la lógica en esta utilidad se puede usar sin tener que volver a escribirla manualmente. Sin embargo, al igual que el componente Menú, esta utilidad debe considerarse beta y sujeta a una revisión considerable en futuras versiones..
La API es muy compacta; solo hay tres opciones configurables; Hay una serie de métodos privados que son utilizados internamente por el complemento, pero no necesitamos invocarlos manualmente. Las opciones configurables son las siguientes:
jQuery UI 1.8 se perfila como una buena versión de la biblioteca; con una combinación de correcciones de errores y nuevos componentes, parece un hito importante en la hoja de ruta de la biblioteca. Primero vimos el nuevo sistema de posicionamiento de la biblioteca que nos permite acceder fácilmente a un gran número de sitios de posicionamiento de un elemento en relación con otro. Luego observamos los dos nuevos componentes Autocompletar y Botón y vimos las diferentes opciones de configuración, métodos y eventos expuestos por cada una de sus API..