No hace mucho tiempo, el equipo de jQuery lanzó jQuery Mobile 1.2. Este nuevo lanzamiento tiene algunos cambios fantásticos! En este artículo, revisaremos algunos de los nuevos widgets disponibles para los desarrolladores, analizaremos los cambios realizados en los widgets existentes y analizaremos algunas mejoras impactantes que podrían afectar su aplicación jQuery Mobile. Vamos a empezar, vamos?

En primer lugar, tendremos que descargar los bits y bytes. Diríjase a la página de descargas de jQuery Mobile y descargue la opción que mejor se adapte a sus necesidades. Alternativamente, solo puede usar el código de caldera que se proporciona a continuación.

Además, ahora puede ser un buen momento para discutir rápidamente el Generador de descargas que está construyendo el equipo de jQuery Mobile. Todavía está en Alpha, pero le permite personalizar su descarga para incluir solo las partes de jQuery Mobile que necesita, y nada más. Puede excluir eventos específicos, transiciones, elementos de formulario o widgets que no le interesan. Está dirigido a los desarrolladores que están muy preocupados por obtener el máximo nivel de rendimiento de su aplicación..

---

Widgets

El corazón latente de cualquier aplicación jQuery Mobile son sus widgets. Podría decirse que son la parte más visible de la página, y la parte que permite a los usuarios interactuar con la página de una manera tan fácil. El equipo de jQuery Mobile ha pasado innumerables horas probando, construyendo y refinando sus widgets para asegurarse de que son lo mejor que pueden ser. En la versión 1.2, el equipo realmente lo ha eliminado del parque con un widget que los desarrolladores han estado solicitando desde que se lanzó por primera vez el framework: los modales emergentes..

Popups

Un modal emergente es una pequeña sección de la página que se superpone a otras partes de la página. Normalmente se usan como información sobre herramientas o para mostrar fotos, mapas y contenido adicional. Esta información generalmente no es lo suficientemente importante como para justificar otra página, pero es importante que se muestre solo. La forma en que jQuery Mobile 1.2 ha implementado las ventanas emergentes es perfecta. Aprendamos lo fácil que es agregar ventanas emergentes a un proyecto.

Una nota rápida, en aras de la brevedad: todos los ejemplos de código a continuación utilizarán el siguiente HTML de plantilla. Los archivos jQuery Mobile CSS y JS (incluido jQuery) se enlazan mediante el uso de jQuery CDN para su conveniencia..

Agregar una ventana emergente a una página en su aplicación es un proceso de dos pasos. Primero necesitarás algún medio para activar la ventana emergente. Esto generalmente es un enlace, un botón o algo con lo que el usuario interactúa. Para activar el elemento, agregamos el siguiente atributo:

data-rel = "ventana emergente"

En segundo lugar, necesita que el contenido se muestre. Esto podría ir desde una sola div a un menú, una formar, O incluso fotos. El elemento de contenido tiene su propio atributo:

data-role = "popup"

Por último, para botones de enlace simple, el href atributo debe corresponder a la carné de identidad del contenido a visualizar. Revisemos la implementación completa..

Abrir ventana emergente 
 
Esta es una ventana emergente completamente básica, sin opciones establecidas.
 

Lo que verá en la página debe verse similar a esto:

Información sobre herramientas

Ahora que sabe cómo crear una ventana emergente, veamos otras posibilidades. Un uso común es una información sobre herramientas; El texto de ayuda o el texto expandido se muestra cuando un usuario hace clic en un botón. Configure el código de la misma manera que antes:

Saber más 
 
Usted descubrió más!.
 

Esta vez, estamos diseñando el contenido resultante usando el mi Muestra de jQuery Mobile para darle un aspecto más agradable. Esto nos ayuda a recordar que las ventanas emergentes son ciudadanos de jQuery Mobile de primera clase y pueden tratarse como cualquier otra cosa en la página..

Los menús

Vayamos a algo un poco más complicado: un menú. Ese es un enfoque popular para la navegación de la página. Dale al usuario un menú a su alcance. Entonces, ¿cómo se ve eso con las ventanas emergentes??

Menú 
 
 
Mi menú
 
Sin enlace
 
Vinculado
 
Con cuenta42
 
 

Y la salida resultante debería parecerse a esto:

También puede utilizar las listas plegables de 1.2 en ventanas emergentes. Aquí hay un ejemplo rápido:

Menú anidado 
 
 
 
Colores
 
 
rojo
 
Azul
 
 
 
 
Formas
 
 
Circulo
 
Cuadrado
 
 
 
 

Y los resultados:

Vale la pena señalar que data-inset = "true" se requiere en el vista de la lista o aparecerán las esquinas de tu lista. Intenta y ya verás.

Formas

Otro enfoque popular de UX es mostrar un formulario de inicio de sesión que se desplaza sobre la parte superior de una página. Ahora es posible con las ventanas emergentes de jQuery Mobile. Aquí hay un formulario de nombre de usuario / contraseña simple.

Iniciar sesión 
 
 
Por favor, registrese
 Nombre de usuario:  Contraseña:  Registrarse 
 

Lo que te da:

De forma predeterminada, las ventanas emergentes se centran en el objeto que las activó. Hay un atributo opcional que verás en los siguientes tres ejemplos. Sus data-position-to = "window" y lo aplicas al elemento que activa la ventana emergente. Intenta agregar eso a la Iniciar sesión botón arriba para ver qué pasa.

Diálogos

Una necesidad común de las aplicaciones web es la capacidad de interactuar con el usuario. Acabamos de revisar un enfoque: un formulario de inicio de sesión. Pero, a veces, debe hacer preguntas al usuario. Un diálogo es una solución perfecta para esto; y que sabes, popups has cubierto! Entonces, ¿cómo se ve ese código? Aquí hay un ejemplo simple:

Diálogo 
 
 
Eliminar página?
 
 
 
Estás seguro de que quieres eliminar esta página?
 
Esta acción no se puede deshacer.
 No si, borralo 
 

En el contenedor de contenido emergente, note otro atributo nuevo para su uso: data-overlay-theme = "a". Este atributo es lo que aplica el fondo sombreado al cuadro de diálogo. Su tema lo afecta, así que tenga cuidado al trabajar con temas creados con ThemeRoller.

Las fotos

No puedo contar la cantidad de veces que he visto a los desarrolladores de jQuery Mobile pedir una mejor manera de manejar las galerías de imágenes. Si bien las ventanas emergentes no son la solución perfecta para un gran número de imágenes, son excelentes para un puñado de imágenes que deben verse en mayor tamaño. Aún mejor, es increíblemente fácil; Echale un vistazo:

Foto 
 Cerrar 

El código anterior le brinda una foto elegante centrada en la ventana, que incluye un botón para cerrar la ventana.

¿Cómo hicieron eso? Dentro del contexto de una ventana emergente, la ancla la etiqueta tiene atributos que se comportan de forma ligeramente diferente a cuando se usan en otras ubicaciones de la página. Específicamente, la ui-btn-derecha La clase coloca la imagen en la esquina de la imagen en lugar de al lado, mientras que icono de datos y datos-iconpos los atributos le permiten diseñar el botón tal como lo haría con un botón normal.

Puede ser bastante sofisticado con ventanas emergentes, que incluyen, entre otras, la visualización de videos en línea e incluso mapas interactivos. Consulte la documentación de jQuery Mobile para las ventanas emergentes y los iframes..

Vistas de lista plegable

Otra gran característica nueva es la capacidad de combinar conjuntos plegables con vistas de lista. Llámelos "Vistas de lista plegables" y tendrá un nuevo widget en jQuery Mobile 1.2. ¿Cómo trabajan? Me alegra que hayas preguntado. Simplemente cree la lista que desee, luego envuélvala en un conjunto plegable. Las vistas de listas plegables también admiten listas múltiples, así que enloquece!

 
Chica de especias favorita?
 
 
Elegante
 
De miedo
 
Deportivo
 
Bebé
 
Jengibre
 
 

El código anterior daría lugar a esta vista de lista plegable:

---

Mejoras

Además de los nuevos tipos de widgets, jQuery Mobile 1.2 proporciona una serie de mejoras útiles a la funcionalidad existente. Echemos un vistazo a algunos de los más valiosos..

Cambios en el soporte de jQuery

Una de las mejoras más grandes realizadas en la versión 1.2 es el soporte agregado para jQuery 1.8. Esto trae algunos aumentos significativos de rendimiento en la forma de un Sizzle.js completamente reescrito (el motor de selección para jQuery), junto con muchas otras mejoras..

La compensación es que el equipo de jQuery Mobile decidió que era hora de dar soporte al atardecer para jQuery 1.6. Esto puede ser desafortunado para algunas personas que todavía están usando versiones anteriores de jQuery, pero es un intercambio justo..

Autodivisores de vista de lista

Si alguna vez ha tenido que administrar una lista de personas, lugares o cosas en constante cambio en jQuery Mobile, es probable que haya tenido que escribir algún código complicado para mostrar los encabezados de vista de lista dinámicos. Lo que pasó es que pasaste todo ese tiempo, porque el equipo de jQuery Mobile lo hizo tan fácil como colocar un solo atributo.

data-autodividers = "true"

Eso da vuelta a esta lista:

Dentro:

Tenga en cuenta que esto no administra la clasificación, agrupación o filtrado. Para ese tipo de funcionalidad, considere probar mi plugin jQuery Mobile Tinysort.

Listas de solo lectura

jQuery Mobile ofrece vistas de lista de "solo lectura", pero era difícil decir que no se podían hacer clic. La versión 1.2 elimina el gradiente de la lista, lo que hace que la fila sea de un color plano. Esto debería proporcionar una mejor señal visual para sus usuarios.

Mejores ajustes de ancho en elementos de formulario

La versión 1.2 corrige un problema semi-molesto con los elementos de formulario, por lo que en algunos casos no ocuparían todo el ancho de su elemento principal.

Dispositivos Adicionales Agregados

Es posible que haya notado que se agregan nuevos dispositivos casi a diario. El equipo de jQuery Mobile hace todo lo posible para probar la mayor cantidad de dispositivos posible. Recientemente se agregaron a la lista de plataformas de grado A los siguientes dispositivos / sistemas operativos / navegadores: iOS 6, Android 4.1 (Jellybean), Tizen, Firefox para Android y Kindle Fire HD.

---

Lista completa de cambios

Puede encontrar una lista completa de los cambios realizados para la versión 1.2 en el blog de jQuery Mobile.

Espero que algunas de estas mejoras ayuden a mejorar sus aplicaciones. ¡Recuerda que el equipo de jQuery Mobile está de tu lado! Si ve algo que cree que sería valioso, pídalo: cree un problema en su repositorio de Github y sugiéralo. Mejor aún, bifurque su repo y agregue un código usted mismo!