Sunteți pe pagina 1din 13

Manual de Mviles usando jQuery Mobile

PROGRAMACION PARA MOVILES

Qu es jQuery Mobile?

jQuery Mobile es un framework para desarrollo de


aplicaciones y sitios web optimizados para smartphones y
tablets.

Por qu Utilizarlo?

Podemos desarrollar una sola aplicacin que funcione en las


plataformas ms populares de smartphones y tablets, en vez de tener que escribir
aplicaciones nativas para cada dispositivo mvil o sistema operativo, siempre teniendo
en cuenta las limitaciones del navegador utilizado.

Algunas plataformas compatibles con jQuery Mobile son:

Para definir el grado de compatibilidad con los dispositivos, jQueryMobile nos ofrece el
siguiente sistema de clasificacin:

Sistema completo o de grado-A, con animaciones entre transiciones de pginas


basado en Ajax.
Sistema completo menos Ajax o de grado-B.
Sistema bsico o de grado-C, para smartphones antiguos.
Sistema no soportado oficialmente. Funciona en el dispositivo aunque no est
testeado.

Para ms informacin sobre el grado de compatibilidad con los dispositivos, visitar el


siguiente enlace http://jquerymobile.com/gbs/#gbs

Versin Actual

Actualmente (03/07/2015) est disponible la versin 1.4.5 del framework y lo puedes


descargar desde la siguiente direccin http://jquerymobile.com/download/

Estructura Bsica de una Pgina Web Mvil

En esta seccin dareamos una mirada rpida a la estructura de una pgina con
jQueryMobile. jQuery Mobile cuenta con unas directrices sobre la estructura de las
pginas en si mismas. En general, una estructura de pgina debe tener las siguientes
secciones:

Ing. Yosip Urquizo Gmez Pgina 1


Manual de Mviles usando jQuery Mobile

Barra de encabezado (Header Bar)

Normalmente contiene el ttulo de la pgina y el botn Atrs.

Contenido (Content section)

El contenido de nuestra aplicacin.

Barra de pi (Footer Bar)

Normalmente contiene los elementos de navegacin, la informacin de copyright o la


informacin que necesitemos aadir en el footer.

Por ejemplo, la siguiente imagen muestra las diferentes secciones.

La codificacin para el ejemplo anterior seria:

La seccin de footer es muy sencilla. Aadir una barra de navegacin no es muy


complicado, por ejemplo.

Ing. Yosip Urquizo Gmez Pgina 2


Manual de Mviles usando jQuery Mobile

El Cdigo fuente seria de esta forma:

Componentes de una Pgina Web mvil

Adems de poder utilizar elementos html bsicos como listas, headings o tablas,
jQuery Mobile nos proporciona los siguientes componentes.

Toolbars

En jQuery Mobile hay dos tipos estndar de toolbars. La Header bar y la Footer bar. La
Header bar, por ejemplo, podr incluir, sin necesidad de realizar ninguna modificacin
css, un ttulo y dos botones. Si queremos una barra de navegacin con ms de dos
enlaces lo correcto sera introducir el widget Navbar en la cabecera o en el pie.
Tambin podemos indicar si queremos las toolbars con posicin fija. Veamos el
siguiente ejemplo de header con 2 botones

Ing. Yosip Urquizo Gmez Pgina 3


Manual de Mviles usando jQuery Mobile

Ahora veamos un ejemplo de un footer con una barra de navegacin, con posicin fija,
que contiene seis enlaces (cuando contiene ms de cinco items los muestra en varias
lneas horizontales). Destacamos las propiedades data-role=footer, data-
position=fixed y data-role=navbar.

Ing. Yosip Urquizo Gmez Pgina 4


Manual de Mviles usando jQuery Mobile

Buttons

Podemos crear botones con o sin iconos y/o con o sin texto. Tambin podemos crear
agrupaciones de botones, posicionarlos en la misma lnea o posicionar su icono. En
este ejemplo podemos ver una agrupacin de dos botones en horizontal con su icono
correspondiente. Destacamos las propiedades data-role=controlgroup, data-
type=horizontal, data-role=button, data-icon=arrow-l y data-iconpos=right.

Grids

A continuacin podemos ver un ejemplo de un grid de 3 filas y 5 columnas. En este


caso particular para generar 5 columnas utilizamos la clase ui-grid-d (por ejemplo si
quisiramos generar nicamente un grid con dos columnas utilizaramos la clase ui-
grid-a o ui-grid-b para generar uno de 3 columnas). Luego para cada bloque la clase
ui-block-x siendo x=a cuando es la primera columna, x=b cuando es la segunda y as
sucesivamente empezando otra vez por ui-block-a cuando cambiamos de fila.

Ing. Yosip Urquizo Gmez Pgina 5


Manual de Mviles usando jQuery Mobile

Collapsible content blocks

A continuacin mostramos un ejemplo de un collapsible block sencillo. Destacamos las


propiedades data-role=collapsible para definir el tipo de elemento y data-
collapsed para indicar si queremos ver el contenido desplegado o no. El contenido,
como veremos en el ejemplo de accordions, puede ser de cualquier tipo (un listview,
un formulario, etc,)

Accordions

Es posible agrupar varios collapsible content blocks en un accordion. Tambin se


puede introducir cualquier elemento dentro de un bloque (por ejemplo un list view
bsico). Adems de las propiedades destacadas en el ejemplo anterior destacamos el
data-role=collapsible-set.

Ing. Yosip Urquizo Gmez Pgina 6


Manual de Mviles usando jQuery Mobile

Form elements

Veamos en varios ejemplos los elementos bsicos que se pueden introducir en un


formulario.

Ing. Yosip Urquizo Gmez Pgina 7


Manual de Mviles usando jQuery Mobile

Text input

Password input

Textarea

Ing. Yosip Urquizo Gmez Pgina 8


Manual de Mviles usando jQuery Mobile

Search input

Slider

Flip toggle switch

Ing. Yosip Urquizo Gmez Pgina 9


Manual de Mviles usando jQuery Mobile

Radio buttons

Checkboxes

Ing. Yosip Urquizo Gmez Pgina 10


Manual de Mviles usando jQuery Mobile

Select

Ing. Yosip Urquizo Gmez Pgina 11


Manual de Mviles usando jQuery Mobile

Select menu personalizado

Submit buttons

Ejemplo de List View

Ing. Yosip Urquizo Gmez Pgina 12


Manual de Mviles usando jQuery Mobile

List View 01

List View 02

Si deseas profundizar en muchas mas opciones sobre jQuery mobile, te invito a que
visites este link: http://jquerymobile.com/demos/1.1.0/

Ing. Yosip Urquizo Gmez Pgina 13

S-ar putea să vă placă și