Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Qu es jQuery Mobile?
Por qu Utilizarlo?
Para definir el grado de compatibilidad con los dispositivos, jQueryMobile nos ofrece el
siguiente sistema de clasificacin:
Versin Actual
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:
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
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.
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
Accordions
Form elements
Text input
Password input
Textarea
Search input
Slider
Radio buttons
Checkboxes
Select
Submit buttons
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/