jQuery mobile - CGastrell/phonegap GitHub Wiki

Asi como anteriormente integramos Bootstrap, ahora incorporaremos jQuery Mobile.

jQuery Mobile es un sistema de interfaz basado en HTML5, diseñado para hacer sitios web y aplicaciones que sean responsive y accesibles en todos los telefonos, tablets y maquinas de escritorio

Crear un proyecto nuevo:

phonegap create prueba4 --id com.coderhouse.prueba4 --name "00 Prueba 4" -src templates\blank

Copiar los directorios resources/css y resources/js dentro de www:

xcopy /E /Y resources\css\*.* prueba4\www\css
xcopy /E /Y resources\js\*.* prueba4\www\js

En el archivo www/index.html reemplazar la referencia a css/index.css por css/jquery.mobile-1.4.5.min.css:

<!-- <link rel="stylesheet" type="text/css" href="css/index.css" /> -->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />

Y agregar llamadas para librerias jquery y jquery.mobile:

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>

Con estos pasos la pagina tiene todo lo que necesita para iniciarse correctamente.

Agregar una pagina. Una pagina en jQuery Mobile es un elemento con un atributo data-role=page. Agregamos siempre un id para luego identificarla.

  <div data-role="page" id="home">
    <div data-role="header">
      <h1>Encabezado</h1>
    </div>
    <div data-role="content">
      Contenido
    </div>
    <div data-role="footer">
      Pie
    </div>
  </div>

Las paginas tienen 3 componentes basicos: header, content y footer. Estos ayudaran a crear el contenido de manera ordenada.