Share
El lanzamiento oficial de jQuery Mobile 1.0 se anunció recientemente, y este tutorial le proporcionará una visión general de cómo este marco popular puede ayudarlo en el desarrollo de aplicaciones multiplataforma y basadas en web.!
jQuery Mobile es una extensión del popular marco jQuery JavaScript. Como sugiere su nombre, es una implementación específicamente orientada a dispositivos móviles, y durante el último año ha avanzado mucho. Ahora es uno de los marcos más populares para el desarrollo de aplicaciones basadas en web en dispositivos móviles. Además de proporcionar una gran solución para aplicaciones web independientes, a menudo también se incluye en un SDK como PhoneGap para que sea un componente esencial para muchas aplicaciones nativas..
El equipo detrás de jQuery Mobile ha estado trabajando arduamente para conseguir el marco donde está hoy, y los últimos tres meses específicamente lo han tomado de una versión beta a un lanzamiento oficial..
Veamos algunas de las características que ofrece jQuery Mobile para que pueda ver rápidamente, puede configurar una aplicación básica con esta gran solución.!
Antes de comenzar, debemos asegurarnos de tener un par de cosas en el lugar correcto. Primero, debemos asegurarnos de que estamos configurando la ventana gráfica para nuestro dispositivo usando el meta etiqueta.
Luego, solo para que podamos usar esto como una página de inicio en iOS, podemos establecer la etiqueta meta para capaz de aplicación.
Las etiquetas meta anteriores no son estrictamente necesarias, pero creo que a menudo son una buena idea.
A continuación debemos incluir el CSS y Javascript para jQuery Mobile. En este momento, usaremos el CSS predeterminado, aunque más adelante discutiremos separar la estructura del estilo. Para JavaScript, debemos asegurarnos de incluir la versión 1.6.4 de jQuery y jQuery mobile 1.0. jQuery es una dependencia de jQuery Mobile, por lo que primero debe incluir la biblioteca principal. Al momento de escribir este artículo, la última versión de jQuery Core es 1.7, pero jQuery Mobile actualmente solo ofrece soporte para 1.6.4. Sin embargo, según el equipo detrás del proyecto, el soporte para 1.7 llegará pronto!
Ahora podemos pasar al cuerpo del documento y crear la estructura típica de una página. jQuery Mobile usa el HTML5 datos- Atribuir para asignar comportamientos específicos a los elementos., rol de datos siendo el más popular, ya que define el papel de los elementos dentro de la aplicación. Agregar el atributo data-role = "page" a tu primer elemento en la página.
No tiene que ser un div, puede ser una sección si así lo prefiere, pero el resultado final es el mismo: habrás creado tu primera página con jQuery Mobile.
Por ahora, puedes construir tu página usando solo el rol de datos atributos Puedes usar data-role = "header" y data-role = "pie de página" para el encabezado y pie de página respectivamente, y data-role = "contenido" para el contenido del cuerpo principal.
jQuery Mobile Page El encabezado
Esta es una plantilla de página única que puede copiar para crear su primera página de jQuery Mobile. Cada enlace o formulario desde aquí atraerá una nueva página a través de Ajax para admitir las transiciones de página animadas.
Solo vea la fuente y copie el código para comenzar. Todo el CSS y JS están vinculados a las versiones CDN de jQuery, por lo que es muy fácil de configurar. Recuerde incluir una etiqueta de vista meta en la cabeza para establecer el nivel de zoom.
Esta plantilla es un documento HTML estándar con un único contenedor de "página" dentro, a diferencia de una plantilla de varias páginas que tiene varias páginas dentro. Recomendamos encarecidamente crear su sitio o aplicación como una serie de páginas separadas como esta porque es más limpio, más liviano y funciona mejor sin JavaScript.
Tu aplicación ahora debería parecerse a la siguiente.
Y el código completo para esto está abajo:
Plantilla de una sola página El encabezado
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet odio ipsum, no volutpat sapiens. Esto se debe a la gravedad, la convulsión y la dieta. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum en. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum en. Curabitur ipsum leo, pulvinar tincidunt sodales vel, lobortis a massa. Pellentesque eget molestie mauris. Mauris aliquam dui rutrum in. Curabitur ipsum leo, pulvinar
El pie de página
Ahora, esto es bastante simple en cuanto a aplicaciones web, pero es un comienzo. Todo con jQuery Mobile se puede hacer con bastante rapidez, y es excelente tanto para el desarrollo rápido de un prototipo como para el desarrollo de aplicaciones completas..
Por supuesto, usar una biblioteca completa para una aplicación de una sola página es un poco exagerado, así que comencemos con lo dulce y agreguemos algunas páginas a nuestra aplicación..
Puede agregar dos contenedores div adicionales después de la etiqueta de cierre del div con data-role = "contenido" y data-role = "page", pero el rol de datos de la página debe tener el atributo id establecido en "dos" y "tres" respectivamente. Estoy seguro de que ves a dónde vamos con esto, así que adelante, agrega una identificación de "uno" a nuestra primera página también. Agregue encabezados, contenidos y pies de página a las páginas adicionales que desee..
El código adicional debe ser similar al siguiente:
El encabezado
Esta es la segunda pagina
El pie de página
El encabezado
Este es el contenido de la tercera página.
El pie de página
Si compruebas tu aplicación ahora, no verás ninguna diferencia. Esto se debe a que debemos seguir adelante y vincular esas páginas desde la primera página antes de que se muestren. Agrega algunos enlaces arbitrarios en la primera página, como este:
Página dos página tres
Si abre el primer enlace a la página dos, verá su primera animación de paginación, pero en este momento no hay manera de volver a la primera página. Continúe y agregue un enlace a las páginas dos y tres y luego a la página uno..
Todo debería estar paginando bien de un lado a otro ahora. Dulce!
Ahora, en este momento nuestros enlaces son un poco aburridos, pero sin demasiado esfuerzo podemos seguir adelante y cambiarlos a unos botones de aspecto agradable..
Si añades el atributo data-role = "button" a los enlaces en cada una de las páginas y actualice su aplicación, ahora debería tener algunos botones atractivos.
En este momento, nuestra página se está procesando bien y podemos navegar por un par de páginas, pero todo parece un poco aburrido. Afortunadamente, jQuery Mobile viene con temas. Estos temas permiten al desarrollador cambiar los colores y la apariencia general de la aplicación muy rápidamente. Esto es hecho por el tema de datos atributo. Adelante y añade data-theme = "a", data-theme = "b" y data-theme = "a" a cada uno de los divs de página que creamos arriba. Actualiza tu aplicación y verás lo que ha pasado. Cada una de tus páginas debe verse ligeramente diferente.!
Hasta hace poco, la única forma de rodar su propio tema personalizado era incluir una hoja de estilo adicional y anular el CSS importado con el jQuery CSS. Afortunadamente, cuando salió el segundo candidato de lanzamiento para jQuery Mobile en octubre, la hoja de estilo se separó en dos entidades separadas, lo que dejó espacio para el nuevo ThemeRoller. La primera hoja de estilo trata con la estructura de la aplicación y la segunda manejará todos los temas para la aplicación.
Diríjase a la página del rodillo de temas y verá la pantalla a continuación:
En el lado izquierdo, tiene su configuración de tema. Puede elegir filtrar a través de cada una de las secciones una a la vez y ajustar lo que quiera, o, como me gusta, seguir adelante y arrastrar y soltar los colores desde arriba para diseñar lo que desea, y luego refinar su selección usando El menú lateral. Puede crear sus temas, con un máximo de 26, y luego descargar su archivo de tema para usar dentro de su aplicación.
Cuando descargue el archivo ZIP y extraiga su contenido, tendrá un index.html archivo que contiene algunos estilos básicos y una confirmación de que su hoja de estilo se ha descargado correctamente. Luego tendrá una carpeta de temas y en su interior encontrará una carpeta de imágenes y dos hojas de estilo nombradas con el nombre que le dio al tema en la exportación. Hay una versión reducida para producción o una versión completa para cualquier edición que desee realizar..
Ahora, cuando esté comenzando su proyecto móvil, solo incluya esta hoja de estilo de Theme Roller en lugar del tema predeterminado CSS.
jQuery Mobile
Ahora, cuando accede a las muestras que creó de la forma habitual con jQuery Mobile arriba, configure el tema de datos atributo, hará referencia al CSS del rodillo de temas que creó en lugar de los valores predeterminados.
jQuery Mobile El encabezado
El contenido de la página va aquí..
El pie de página
Puedes agregar el tema de datos atribuir a cualquier elemento en la página. Si lo añades a la div con el data-role = "page" elemento, entonces esa muestra de tema se aplica a todos los elementos dentro de esa página. Probablemente no irás hasta 26 muestras diferentes, pero lo más probable es que uses 3 o 4 muestras diferentes para obtener una buena combinación de colores diferentes en tu aplicación. Juega con el ThemeRoller, hay muchas más opciones que simplemente arrastrar y soltar los colores predeterminados. Puede ajustar degradados, sombras, e incluso cambiar la luminosidad y la saturación de los colores..
Durante los últimos tres lanzamientos de RC, se han realizado algunas adiciones importantes al marco, por lo que si todavía está utilizando uno de los lanzamientos beta o simplemente no sabía que RC1, RC2 o RC3 se habían lanzado, lo siguiente es un poco ponerse al día con los cambios.
RC1 introdujo algunos ajustes de diseño en los elementos plegables, eliminando el estilo de botón adicional alrededor del icono +/- y agregando la capacidad al contenedor de contenido plegable. Añadiendo el atributo datos-contenido-tema Para el contenedor plegable también se cuadraron las esquinas del encabezado en la parte inferior, lo que le da al aspecto del contenedor una estética más fluida..
Si desea comenzar con collapsables, aquí está el código básico. Lo siguiente le dará un solo contenedor plegable:
Encabezado en la barra de título
Contenido dentro del contenedor plegable.
Si desea agrupar un grupo de contenedores plegables y lograr el popular efecto de corrección, todo lo que necesita hacer es envolver un grupo de contenedores plegables en una envoltura div con el rol de datos de conjunto plegable.
Las opciones de posición fija de iOS 5 se mejoraron desde el lanzamiento de la versión beta con este RC, pero todavía estaban desactivadas de forma predeterminada. Para poder utilizar esta función, deberá aplicar la anulación cuando el móvil en se desencadena el evento. De forma predeterminada, jQuery Mobile aplica algunas mejoras de marcado cuando se carga, y se carga antes document.ready incendios Afortunadamente, una de las mejores cosas de jQuery Mobile es que las configuraciones son fácilmente configurables utilizando jQuery $ .extender Método y vinculante para el móvil en evento. Asegúrese de que el archivo de script que contiene sus opciones está incluido después jQuery, pero antes de jQuery Mobile. Para hacer esto, su código se vería como a continuación:
Accentsconagua
$ (document) .bind ("mobileinit", function () $ .extend ($. mobile, touchOverflowEnabled: true);); Hay un montón de opciones configurables que puedes leer aquí. Algunos de los que he usado regularmente son:
cargando mensaje que es una cadena y, de forma predeterminada, se establece en "cargando". pageLoadErrorMessage otra vez es una cadena y, de forma predeterminada, se establece en "Error al cargar la página". defaultPageTransition es una cadena y, de forma predeterminada, se establece en "deslizar". RC2 fue relased a mediados de octubre y compró junto con algunos buenos cambios clave. Hubo adiciones al soporte HTML5 para los tipos de entrada incluyendo hora, fecha y color. Esto fue solo para asegurarse de que esos elementos tuvieran un estilo al aparecer en la página. Se introdujo la capacidad de tener selecciones personalizadas como parte de un grupo, para que parecieran más integrados. Si envuelves tu campo de campo en un div con el data-role = "controlgroup" Atributo, sus campos aparecerán agrupados en un solo módulo. Añadiendo tipo de datos = "horizontal" los agrupará horizontalmente.
Uno de los cambios más importantes en la última versión fue la separación de las hojas de estilo para la temática y la estructura. Antes se incluía una hoja de estilo de jQuery que incluía todo el CSS estructurado y los estilos para los diferentes temas. Si quisiera agregar personalización al CSS, tendría que tener su propia hoja de estilo que anularía cualquier elemento ya establecido. Por supuesto, como estamos desarrollando para dispositivos móviles y el ancho de banda es importante, la estructura y las hojas de estilo de los temas ahora se han separado..
Hubo otras adiciones y correcciones de errores que incluyeron la creación de formularios al 100% de ancho por defecto, los diálogos que tienen un ancho máximo y una nueva clase auxiliar para ocultar elementos de manera que aún puedan ser accedidos por tecnologías de asistencia como los lectores de pantalla. Compruebe las notas de la versión y el registro de cambios para todos los detalles.
El lanzamiento de RC3 A algunos les sorprendió el 13 de noviembre, ya que el equipo había dicho que la versión oficial 1.0 vendría justo después de RC2. RC3 valió la pena, ya que hubo un montón de mejoras en el rendimiento, el equipo solo quería asegurarse de que el código funcionaba bien antes de publicar una versión final. Puede leer sobre la versión RC3 aquí, y lo primero que notará son las mejoras de rendimiento. También hubo algunas nuevas adiciones:
Ahora puede configurar linkBindingEnabled a falso (verdadero de manera predeterminada) si desea manejar todos los eventos de clic con otra biblioteca o usando algún código personalizado. También puede aplicar estilo a la superposición que aparece con el cuadro de diálogo. tema de superposición de datos en el envoltorio de la página de superposición o en el módulo de selección.
Finalmente, la documentación recibió una revisión muy necesaria y se actualizó con demostraciones de todas las funciones, algunos consejos para comenzar y algunos consejos para crear aplicaciones jQuery junto con Phonegap, que se pueden encontrar aquí..
jQuery Mobile ha recorrido un largo camino en los últimos meses, por no hablar del año pasado, y si se parece a su biblioteca principal, se convertirá en la opción número uno para que muchos desarrolladores se sumerjan en la creación de aplicaciones web móviles. La curva de aprendizaje es mucho menor que una solución como SenchaTouch o Titanium Mobile, y en mi opinión, ese hecho hará que la adopción se dispare. ThemeRoller y las opciones de configuración global también ofrecen un nivel de personalización que es tan fácil de usar que incluso los programadores más avanzados deberían encontrarlo rápidamente y comenzar con temas personalizados..
Hay algunas cosas que estoy seguro de que a todos nos gustaría ver agregadas, y con el tiempo, al igual que con jQuery, no tengo dudas de que se realizarán mejoras adicionales. Le insto a que vaya a revisar jQuery Mobile si aún no lo ha hecho, y si está usando una versión anterior, asegúrese de revisar el registro de cambios para las notas de la versión de cada versión que está atrasada antes de actualizar.
Sin duda lo mantendremos informado sobre Mobiletuts + a medida que progrese jQuery Mobile, pero si desea ver más consejos y tutoriales de jQuery Mobile, háganoslo saber en los comentarios.!
