$.mobile y los métodos y eventos soportados
El objeto JavaScript jQuery la mayoría de veces es referido con el signo del dólar ($). jQuery Mobile framework extiende el core de jQuery con plugins móviles, que incluyen el mobile o $.mobile, los cuales definen varios eventos y métodos. Algunos de los métodos expuestos por $.mobile están descritos en la siguiente tabla.
| Método | Uso |
| $.mobile.changePage | Para cambiar la programación de una página a otra. Por ejemplo, para ir a una página weblog.php usando un slide de transición, usamos $.mobile.changePage(“weblog.php”, “slide”). |
| $.mobile. pageLoading | Para mostrar u ocultar el mensaje “Esta página se esta cargando”. Por ejemplo, para ocultar el mensaje, usamos $.mobile.pageLoading(true). |
| $.mobile.silentScroll | Para hacer scroll a una posición Y en particular, sin realizar el evento scroll. Por ejemplo, para hacer scroll a la posición Y=50, usamos $.mobile.silentScroll(100). |
| $.mobile.addResolutionBreakpoints | jQuery Mobile define algunos breakpoints para un mínimo/máximo de clases. Hay que llamar a este método para añadir breakpoints. Por ejemplo, para añadir una clase min/max de 800 pixeles de ancho, usamos $.mobile.addResolutionBreakpoints(800). |
| $.mobile.activePage | Refiere a la página activa actual. |
También hay varios eventos que se pueden usar con los métodos bind() o live(), como la inicialización de jQuery Mobile, eventos de toque, cambios de orientación, eventos de scroll, eventos de mostrar/ocultar página, eventos de inicialización de página y eventos de animación.
Por ejemplo, los eventos de toque (touch events) incluyen tap, taphold y varios eventosswipe. Los eventos de Scroll incluyen scrollstart y scrollstop. Los eventos de Página permiten recibir notificaciones: Antes de la creación de la página, cuando una página es creada, sólo antes que la página se muestre u oculte, y cuando la página es mostrada u ocultada.
En el siguiente ejemplo realizamos un evento específico cuando jQuery Mobile empieza a ejecutarse:
$(document).bind("mobileinit", function(){ //apply overrides here });
El evento de anterior nos permite reemplazar los valores por defecto cuando se inicia jQuery Mobile. Varias opciones pueden ser sobrescritas, por ejemplo:
- LoadingMessage – Define el texto por defecto que aparece cuando una página se carga.
- defaultTransition – Define la transición por defecto para los cambios de una página que usa Ajax.
Hay más parámetros de configuración que podemos sobreescribir si lo necesitamos. Podemos ver la documentación de jQuery Mobile o el código fuente del ejemplo, para más detalles.
También podemos enlazar otros eventos que nos permiten crear aplicacionesdinámicas basadas en los eventos “touch” y “page”.
Los atributos data-* de HTML5
jQuery Mobile se basa en los atributos data-* de HTML5 para soportar varios elementos de UI, transiciones y estructura de la página. Sin embargo, estos son descartados silenciosamente por los navegadores que no los soportan.
La siguiente tabla muestra como usar los atributos de data-* para crear componentes de UI.
| Componente | Atributo data-* de HTML5 |
| Barras de herramientas de Footer y Header |
<div data-role="header">
<div data-role="footer"> |
| Cuerpo del contenido | <div data-role="content"> |
| Botones |
<a href="index.html" data-role="button"
data-icon="info">Botón</a> |
| Botones agrupados |
<div data-role="controlgroup">
<a href="index.html" data-role="button">Si</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Muy bien</a> </div> |
| Botones en línea |
<div data-inline="true">
<a href="index.html" data-role="button">Foo</a> <a href="index.html" data-role="button" data-theme="b">Bar</a> </div> |
| Elemento del formulario (Menú select) |
<div data-role="fieldcontain">
<label for="select-options" class="select">Escoge una opción:</label> <select name="select-options" id="select-options"> <option value="option1">Opción 1</option> <option value="option2">Opción 2</option> <option value="option2">Opción 3</option> </select> </div> |
| Vistas de Lista Básica |
<ul data-role="listview">
<li><a href="index.html">Uno</a></li> <li><a href="index.html">Dos</a></li> <li><a href="index.html">Tres</a></li> </ul> |
| Diálogos |
<a href="foo.html" data-rel="dialog">Abrir diálogo</a>
<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Abrir diálogo</a> |
| Transiciones | <a href="index.html" data-transition="pop" data-back="true"> |
La documentación de jQuery Mobile tiene una lista completa de la sintaxis de data-*soportada.
Estructura de una página jQuery Mobile
En esta sección dareamos una mirada rápida a la estructura de una página con jQuery Mobile. jQuery Mobile cuenta con unas directrices sobre la estructura de las páginas en si mismas. En general, una estructura de página debe tener las siguientes secciones:
Barra de encabezado (Header Bar)
Normalmente contiene el título de la página y el botón Atrás.
Contenido (Content section)
El contenido de nuestra aplicación.
Barra de pié (Footer Bar)
Normalmente contiene los elementos de navegación, la información de copyright o la información que necesitemos añadir en el footer.
