jQuery Mobile #2 – Simple Layout

Vamos a comentar el código basico que compone una pagina en jquery mobile. Para ello creamos primero una con cabecera, cuerpo y pie.

<div data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>Pagina 01</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>Este es el contenido de la pagina 01</p>
  </div>
  <div data-role="footer" data-position="fixed">
    <h1>Pie - pagina 01</h1>
  </div>
</div>
  • data-role=”page” hace que la capa sea tratada como una pagina a mostrar. En realidad en un mismo HTML podemos tener varias page. Es una forma de no hacer llamadas al servidor cada vez que vamos de un sitio a otro. En este caso, de momento, dentro de nuestro HTML tenemos solo una page.
  • data-role=”header” establece la capa como cabecera de la page.
  • data-role=”main” es el contenido principal. La class=”ui-content” le da a la capa un padding para que el contenido no este pegado a los bordes de la pantalla. Recomendable.
  • data-role=”footer” hace que la capa sea el pie de la page.
  • data-position=”fixed” coloca de forma fija la capa. Suele ser lo mas recomendable para la cabecera y el pie.

Todas las capas anteriores admiten cualquier elemento HTML standard dentro.

El resultado final es este:

jqmobile-2

 

 

Estoy utilizando una extension para el navegador Chrome que es un simulador para moviles con varios dispositivos. Ahora en iPhone 4S en pantalla. La extension se llama Ripple.

jQuery Mobile #2 – Simple Layout

Un comentario en “jQuery Mobile #2 – Simple Layout

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s