TUTORIAL JQUERY
PARA MOVIL
Nuevos eventos
Ya hemos hablado del
evento "mobileinit", que nos permite utilizar JQuery
mobile cuando este ya
está disponible para ser utilizado. Luego tenemos
nuevos eventos, por
ejemplo para poder manejar gestos, que podemos
aplicar a todo el
documento o a algún elemento en particular, por ejemplo
podríamos tener una zona
de eventos y vía JQuery le podemos enlazar un
nuevo evento, por ejemplo
el evento "tap", que en realidad se parece al
evento "click"
(es la acción de tocar con el dedo una zona de la pantalla):
$("zona").bind("tap", function() {
// acción de tocar
con el dedo
});
El evento
"taphold" tambien conocido como Long Press es otro evento de
gestos que es, tocar y
mantener presionado durante unos instantes, por
ejemplo para mostrar un
menú. Este evento equivale a hacer click con
el botón derecho del
ratón en un ordenador personal:
$("zona").bind("taphold",
function() {
// acción de tocar
con el dedo y mantener presionado
});
Luego tenemos eventos
como "swipeLeft" o "swipeRight", que nos permite
la acción con un gesto de
derecha a izquierda o a la inversa de pasar de
página, mostrar una foto
etc:
$("zona").bind("swipeLeft", function() {
// acción de tocar y
desplazar con el dedo hacia la izquierda
});
$("zona").bind("swipeRight", function() {
// acción de tocar y
desplazar con el dedo hacia la derecha
});
Ademas de eventos de
gestos, tenemos otros eventos que se conocen
como eventos de mouse
virtuales. Hay equipos móviles que son táctiles
pero no poseen eventos de
TOUCH, por lo que tendríamos un problema
de compatibilidad, pero
por suerte JQuery mobile nos ofrece nuevos
eventos, que se pueden
enlazar con métodos como ".bind" o ".live" .
Por ejemplo
"vclick" lo que hace es emular un click o un touch, y se
ejecuta dependiendo de la
compatibilidad del equipo, si el equipo
soporta touch va a usar
eventos de touch para que sea más rápido,
si solamente soporta
eventos de click lo va a hacer con click.
Y así como tenemos
"vclick" también tenemos:
"vmousecancel", "vmousedown",
"vmousemove"
"vmouseout", "vmouseover",
"vmouseup" :
$("zona").bind("vclick",
function() {
// emula eventos
touch o click, depende compatibilidad
});
También existen eventos
de orientación. Con estos eventos podemos
detectar por ejemplo,
cuando el usuario cambia la orientación del
equipo, cuando pasa de
estar de posición horizontal a vertical o a la
inversa:
$(document).bind("orientationchange",
function() {
// evento de orientación, detecta la
posición del equipo
});
O eventos de scroll,
aunque tienen el problema de que en los móviles
normalmente hay varias
cosas que realizar con scroll. Lo primero
que sucede con el scroll
es que este tiene arrastre con el dedo para
el desplazamiento, y
cuando dejamos de hacer scroll y soltamos hay
un tiempo más de
desplazamiento, incluso a veces puede haber
un rebote. Por tanto si
capturamos en el scroll, se ejecutará cuando
finalice toda la acción y
a lo mejor nosotros queremos que se ejecute
cuando apenas se ha
dejado de hacer scroll, aunque todavía tenga
desplazamiento. JQuery
mobile ofrece eventos como "scrollstart",
que es cuando comienza el
scroll, o "scrollstop" que es cuando
realmente termina la
animación del scroll:
$(document).bind("scrollstart",
function() {
// evento de scroll
al inicio del mismo
});
$(document).bind("scrollstop", function() {
// evento de scroll
al finalizar él mismo totalmente
});
Y por supuesto tenemos
eventos de página. Recordemos que en
JQuery mobile tenemos un
elemento que representa a la página:
<div data-role="page"
id="pagina1">
// contenido de la página
</div>
si este elemento tiene un
identificador podemos capturar eventos
de página, que los hay de
varios tipos. El más importante es
cuando la página está
completamente cargada, es decir, está
lista en pantalla para
poder hacer algo: "pageinit", y este debería
ser nuestro lugar
predilecto para escribir código JavaScript que
va a manipular elementos
de esa página:
$(document).bind("pageinit", function() {
// evento para
manipular elementos de la página cuando está cargada
});
Luego tenemos eventos que
tienen que ver con la carga de la página
cuando esta se carga vía
Ajax, es decir, eventos de página externa.
Tenemos el evento
"pageload" que es cuando la página ya se cargó,
alguno más avanzado como
"pagebeforeload" que es antes de cargarse,
o
"pageloadfailed" que es cuando falla la carga de página y se puede
aplicar a una página en
particular o a todas:
$("pagina1").bind("pageinit", function() {
// evento a ejecutar
cuando está cargada la página
});
$(document).bind("pageloadfailed", function() {
alert("Ha fallado la
carga de la página");
});
También tenemos eventos
de cambio, que tienen que ver con una página
en particular
normalmente, por ejemplo "pagebeforechange" , que se
ejecuta antes de que la
página haga algún cambio, es decir, pasar de
una página a otra a
través de una transición, y tenemos "pagechange"
que se ejecuta después
del cambio:
$("pagina1").bind("pagebeforechange",
function() {
// evento a ejecutar
antes del cambio de la página
});
$("pagina1").bind("pagechange", function() {
// evento a ejecutar
después del cambio de la página
});
Y Hay otros que tienen
que ver con la transición, con el efecto, con la
animación, y son eventos
que nos permiten hacer algo antes o después
de que la animación se
ejecute:
$("pagina1").bind("pagebeforeshow", function()
{
// evento a ejecutar
antes de que se muestre "pagina1"
});
$("pagina1").bind("pageshow", function() {
// evento a ejecutar
cuando "pagina1" ya se ha mostrado
});
$("pagina1").bind("pagehide", function() {
// evento a ejecutar
cuando desaparezca "pagina1"
});
$("pagina1").bind("pagebeforehide", function()
{
// evento a ejecutar
antes de que desaparezca "pagina1"
});
$("pagina1").bind("pageremove", function() {
// evento a ejecutar
antes de que se salga "pagina1" del DOM
});
Por último vamos a hablar
de eventos de layout, por ejemplo el evento
"updatelayout".
Hay algunos controles, por ejemplo de elementos
colapsables que lo que
hacen es modificar el tamaño de la página.
Podemos capturar este
evento para darnos cuenta que en realidad se
ha actualizado el diseño
de la página o si queremos hacer algo al
respecto:
$(document).bind("updatelayout", function()
{
// evento a ejecutar al modificarse el
tamaño de una página
});
O
"animationComplete" que se ejecuta cuando una animación de CSS
ha finalizado:
$(document).bind("animationComplete", function() {
// evento a ejecutar
cuando terminen las animaciones CSS
});
RESUMEN
<head>
<script src="jquery_mobile/jquery.js"></script>
<script src="micodigo.js"></script>
<script src="jquery.mobile-1.0.min.js"></script>
</head>
Código del nuevo
documento: micodigo.js
$(document).bind("mobileinit",
function() {
// Código de inicio para JQuery
mobile
$.mobile.ajaxEnabled
= false;
$.mobile.defaultPageTransition = "slideup";
$.mobile.defaultDialogTransition = "flip";
$.mobile.loadingMessage
= "Por favor espere...";
$.mobile.pageLoadErrorMessage =
"No se ha podido cargar la página";
// Eventos de gestos
$("zona").bind("tap",
function() {
});
$("zona").bind("taphold",
function() {
});
$("zona").bind("swipeleft", function() {
});
$("zona").bind("swiperight", function() {
});
// Eventos de mouse virtuales
$("zona").bind("vclick",
function() {
});
// Eventos de orientación
$(document).bind("orientationchange",
function() {
});
// Eventos de scroll
$(document).bind("scrollstart", function() {
});
$(document).bind("scrollstop", function() {
});
// Eventos de página
$("pagina1").bind("pageinit", function() {
});
// Eventos de página externa
$(document).bind("pageloadfailed",
function() {
alert("Falló la carga de
la página");
});
$("pagina1").bind("pagechange", function() {
});
$("pagina1").bind("pageshow", function() {
});
$("pagina1").bind("pagehide", function() {
});
// Eventos layout
$(document).bind("updatelayout", function() {
});
$(document).bind("animacionComplete", function() {
});
});
