Además, jQuery Mobile también ofrece varios eventos que están hechos a medida para la navegación móvil:
- Eventos táctiles: se activan cuando un usuario toca la pantalla (toca y desliza)
- Eventos de desplazamiento: se activa cuando un usuario se desplaza hacia arriba y hacia abajo
- Eventos de orientación: se activan cuando el dispositivo gira vertical u horizontalmente
- Eventos de página: se activan cuando una página se muestra, oculta, crea, carga y / o descarga
Inicializando eventos móviles de jQuery
En jQuery, aprendió a usar el evento de documento ready para evitar que se ejecute cualquier código de jQuery antes de que el documento termine de cargarse.
Evento de jQuery document ready
<script>
$(document).ready(function(){
// jQuery methods go here...
});
</script>
$(document).ready(function(){
// jQuery methods go here...
});
</script>
Sin embargo, en jQuery Mobile, usamos el evento pagecreate, que ocurre cuando la página se ha creado en el DOM, pero antes de que se complete la carga.
jQuery Mobile pagecreate event
<script>
$(document).on("pagecreate","#pageone",function(){
// jQuery events go here...
});
</script>
$(document).on("pagecreate","#pageone",function(){
// jQuery events go here...
});
</script>
Nota: el método jQuery on () se utiliza para adjuntar controladores de eventos.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
$("p").on("tap",function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>El tap Event</h1>
</div>
<div data-role="main" class="ui-content">
<p>Si me tocas, Desaparezco!!.</p>
<p>Tocame tambien!</p>
<p>Tocame!</p>
</div>
<div data-role="footer">
<h1>Pie de pagina</h1>
</div>
</div>
</body>
</html>
Resultado:
Al tocar la primera linea
No hay comentarios:
Publicar un comentario