Primeros pasos en jQuery Mobile


Hola, en este post mostraré como crear un formulario en jQueryMobile, nada complicado solo los primeros pasos y el manejo de los elementos, lo que me gusta de su documentación es que es muy clara, completa y sus ejemplos son buenos, te recomiendo la visites.

Puedes descargar su última versión ó únicamente hacer referencia a los archivos que necesitas, en este caso utilizará las URLs disponibles para hacer la llamada.

Crea una nueva página web para ir agregando poco a poco lo necesario y obtener como resultado el siguiente formulario:

Por supuesto cuando veas la versión en tu dispositivo móvil adoptará el tamaño correspondiente al mismo.

Lo primero que debes hacer es agregar el viewport para que obtenga el tamaño del dispositivo y una escala a 1, así como el archivo .js y .css de jquerymobile, por lo que te quedaría como lo siguiente:

Ahora deberemos crear la página que contendrá nuestro elementos y la cabecera (“Mi App”) y agregar el botón de lado derecho de la cabecera denominado Options.

La parte interesante viene a continuación, así como algunos comentarios que te haré para los elementos, en este caso el data-role se denomina “content” debido que es el que contendrá la parte central de tu interfaz; por lo que todo lo mencionado a continuación deberá ir entre el div data-role=”content”

Primero te explicaré lo correspondiente a los inputs y etiquetas, deberás crear un formulario de tipo post y con la acción al servicio que tu desees, en este caso no haré la parte de captura de datos, solo la interfaz. Para que tus elementos estén ordenados y contenidos debes crear un div con el data-role de fieldcontain, por lo que te quedaría como el siguiente código:

Agregué la propiedad data-mini=”true” para que mis elementos sean más pequeños de lo normal, si eliminas eso únicamente cambia el tamaño de los inputs, puedes hacer la prueba para que veas cual te gusta más.

Ahora crearemos una lista de opciones, en este caso 2 (Twitter y Email), y de la misma forma que lo anterior tengo el contenedor con la propiedad fieldcontain y data-mini=”true” para los elementos, la creación de los radiobutton son como ya los conoces, y te quedaría el código así:

Para finalizar la creación del formulario agregaremos dos botones, uno para cancelar y otro para guardar la información ingresada por el usuario. Puedes agregar un ícono al botón, para ello debes indicarlo con data-icon, en su documentación vienen el listado de imagenes disponibles, en este caso seleccioné delete para cancelar y check cuando deseo guardar; el código sería:

Si deseas puedes agregar un pie de página con la información de tu preferencia, para eso utiliza el data-role=”footer”

Una recomendación, si desearas cambiar los colores de tu aplicación puedes utilizar los temas que ya te proporciona jQueryMobile, por lo que solo debes agregar la propiedad de data-theme=“a”, “b”, “c”, “d” ó “e” tal y como lo hago con el botón de “save”

Con eso ya tienes una interfaz muy sencilla y útil con jQueryMobile, es mucho más sencillo que si deseas utilizar Sencha, realiza la prueba y visita la documentación para que veas las opciones que tienes.

Puedes ver la interfaz funcionando en esta dirección y el código completo aquí el cual puedes utilizarlo y modificarlo a tu gusto; hasta un siguiente post, se aceptan comentarios, sugerencias e ideas para más posts 🙂

@silvercorp | Mi cuenta personal
jQueryMobile | Sitio Oficial
Código Fuente | Gist

Anuncios

Acerca de silvercorp

Blog personal de Ye§i creado el 18/Ag/06 enfocado al diseño gráfico, tecnología y programación.

Publicado el junio 24, 2012 en Intermedios, Programación, Tutoriales. Añade a favoritos el enlace permanente. Deja un comentario.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: