$.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
$.mobile.changePage
Uso
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.
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
aplicaciones diná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.
La definición de una página HTML ensimisma es !DOCTYPE html>, la cual
define un tipo de documento HTML5.
La sección head del HTML carga tres componentes importantes de jQuery
Mobile:
La librería Core de jQuery
La librería de jQuery Mobile: La parte específica para móviles del
framework de jQuery.
jQuery Mobile CSS – El CSS que define los elementos UI del core de
JQuery Mobile. Esto define las transiciones y distintos widgets UI, como los
sliders y botones, y hace un uso intensivo de animaciones y transformaciones
con Webkit.
Tomar de ejemplo la explicación con la multipage-template
0 comentarios:
Publicar un comentario