DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
17-07-2014

jQuery Mobile es un framework que nos ayuda a crear Aplicaciones Web que se adapten correctamente en otros dispositivos o Sistemas Operativos; en otras palabras; permite adaptar nuestras Aplicaciones Web a un Diseño Web Adaptativo ademas de traer una serie de APIs que nos permiten una integración mayor de las Aplicaciones Web en el ecosistemas de los dispositivos móviles, una de ellas, nos permite detectar o capturar la rotación de un dispositivo como veremos en esta nueva entrega.

Esta detección o captura que indica cuando un dispositivo está rotando, no es más que un evento; el evento es provisto por jQuery Mobile y se conoce como orientationchange; funciona de la siguiente manera:

El evento orientationchange de jQuery Mobile

El evento de orientationchange se dispara cada vez que la orientación del dispositivo cambia; el objeto que compone al evento contiene la propiedad orientation la cual puede ser "portrait" o "landscape" (ver imagen promocional del artículo para visualizar la diferencia entre ambos modos):

if(event.orientation){
      if(event.orientation == 'portrait'){
                  //hacer algo
      }
      else if(event.orientation == 'landscape') {
                  //hacer algo
      }
}

Ejemplo del evento orientationchange en jQuery Mobile

El método que define al evento luce de la siguiente forma:

$( window ).on( "orientationchange", function( evento ) {});

Caso Práctico

Luego de que cambie la orientación del dispositivo debemos hacer "algo", para este ejemplo simplemente cambiaremos la descripción de un elemento con identificador "orientation" $( "#orientacion" ).

El HTML

<p class="orientacion" ></p>

El JavaScript

$( window ).on( "orientationchange", function( evento ) {
  $( "#orientacion" ).text( "El dispositivo esta en modo: " + evento.orientation);
});

Y lanzamos el evento cuando cargue el documento con:

$( window ).orientationchange();

Resultado Final

Enlace de Interés


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Slick: el carrusel para jQuery

Slick: el carrusel para jQuery

Monthly.js : Plugin de jQuery para eventos en el calendario

Monthly.js : Plugin de jQuery para eventos en el calendario

3D Box Control conTweenMax

3D Box Control conTweenMax

Algunos artículos que te pueden interesar

Carrusel fullscreen con menú lateral con jQuery y CSS

Carrusel fullscreen con menú lateral con jQuery y CSS

Se explica cómo crear una galería fullscreen o pantalla completa con un menú fijo lateral con jQuery y CSS.

Andrés Cruz 18-05-2017

¿Cómo Rotar Imágenes u otros elementos HTML con jQuery?

¿Cómo Rotar Imágenes u otros elementos HTML con jQuery?

En esta entrada veremos como podemos rotar una imagen empleando un plugin de jQuery.

Andrés Cruz 29-07-2014

¿Cómo evitar el reinicio de las actividades al rotar la pantalla en Android?

¿Cómo evitar el reinicio de las actividades al rotar la pantalla en Android?

Cuando se gira o rota la pantalla del dispositivo el método OnCreate es invocado y por ende se reinicia, en esta entrada veremos como evitar este reinicio.

Andrés Cruz 25-09-2014