JQuery Mobile es un
marco de interfaz de usuario, construido sobre jQuery Core y utilizado para
desarrollar aplicaciones o sitios web receptivos a los que se puede acceder
desde dispositivos móviles, tabletas y computadoras de escritorio. Utiliza
funciones de jQuery y jQueryUI para proporcionar funciones de API para
aplicaciones web móviles. Este tutorial le enseñará los conceptos básicos
del marco jQuery Mobile. También discutiremos algunos conceptos detallados
relacionados con jQuery Mobile.
jQuery ha sido
durante mucho tiempo una biblioteca de JavaScript popular para crear
aplicaciones web y sitios web interactivos enriquecidos. Sin embargo, dado que
fue diseñado principalmente para navegadores de escritorio, no tiene muchas
funciones diseñadas específicamente para crear aplicaciones web móviles.
jQuery Mobile es un
nuevo proyecto que aborda este déficit. Es un marco construido sobre jQuery que
proporciona una variedad de elementos y funciones de la interfaz de usuario
para que los use en sus aplicaciones móviles.
El marco es bastante
innovador en el momento de escribir este artículo; de hecho, la primera versión
alfa solo se lanzó el mes pasado, pero ya es posible hacer algunas cosas
geniales con él.
Entre sus ventajas
esta:
·
jQuery Mobile facilita el
desarrollo de interfaces de usuario para aplicaciones web móviles.
·
La configuración de la interfaz
se basa en el marcado, lo que significa que prácticamente puede crear toda la
interfaz básica de la aplicación en HTML, sin necesidad de escribir una sola
línea de JavaScript. (¡Por supuesto, aún necesitará escribir JavaScript si su
aplicación va a hacer algo útil!)
·
Proporciona una serie de nuevos
eventos personalizados que le permiten detectar móviles y tocar acciones
específicas como tocar, tocar y mantener, deslizar y cambiar de orientación (es
decir, girar el dispositivo).
·
Utiliza una mejora progresiva
para garantizar que la interfaz de su aplicación funcione en prácticamente
cualquier dispositivo habilitado para la web.
·
Utiliza temas para facilitar la
personalización del aspecto de su aplicación.
DEMOSTRACIÓN
En nuestro Proyecto y en la carpeta Shared
crearemos una vista parcial para el ejemplo Mobile
Una vez creado la
vista pacial, pegamos la información que tenemos en el portapapeles del PC y en
la estructura de las etiquetas <div> colocaremos la instrucción
‘@RenderBody()’
Despues nos dirigiremos al HomeController y
crearemos el método de tipo Action Result para una vista que denominaremos
‘MobileIndex’
Crearemos su vista
correspondiente y le colocaremos como master page la vista parcial que creamos
para el ejemplo Mobile
Ejecutamos nuestro aplicativo y vamos a colocar
la siguiente ruta en el navegador.
Y nos dirige a
nuestra pagina Mobile
Paramos la ejecución y nos situaremos en la
vista parcial ‘_LoyoutMobile’
Y modificaremos el
código html de la siguiente forma
Al ejecutar nuevamente la aplicación
Veremos los cambios
Paramos la ejecución
y nos situaremos en la vista ‘MobileIndex’
Y agregaremos el siguiente código html
Volvemos a ejecutar
el aplicativo
Y se nos muestras las opciones con los estilos
predeterminados
A continuación, nos
situaremos nuevamente en la vista parcial _LoyoutMobile
Agregaremos el siguiente código
Procedemos a ver los
cambios realizados
Colocaremos el navegador en vista Movil
Y vemos que nuestra
pagina se adapta al dispositivo
