phonegap y jquery mobile

phonegap

(Apache cordova)

+

jquery mobile

La forma más sencilla y rápida de desarrollar una aplicación móvil para múltiples plataformas

Cómo funciona?

Creación del proyecto

Para las plataformas más populares el proceso de creación del proyecto esta simplificado mediante un script que genera todos los recursos, este script de nombre create se encuentra en el subdirectorio bin del directorio de la plataforma despues de descomprimir PhoneGap

./create ~/tmp/MedellinJSApp com.MedellinJS.MedellinJSApp MedellinJSApp

Los parámetros son: ruta de creación, nombre del paquete y nombre del aplicativo

Página básica en

Jquery Mobile

<!DOCTYPE html>
<html>
 <head>
  <title>Página básica</title>
  <link rel="stylesheet" href="themes/medellinjs.min.css" />
  <link rel="stylesheet" href="css/jquery.mobile.structure.min.css" />
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.mobile.min.js"></script>
 </head>

Página básica en

Jquery Mobile

       
<body>       
   <div data-role="page" id="page1">
     <div data-role="header">
        <h3>Header</h3>
     </div>
     <div data-role="content">

     </div>
     <div data-role="footer">
        <h3>Footer</h3>
     </div>
   </div>
</body>
</html>

Definición de Algunos

Widgets

Un botón:

<a href="#" data-role="button" id="boton1">Un botón</a>

Un switch:

<select name="flip-1" id="flip-1" data-role="slider">
	<option value="off">Off</option>
	<option value="on">On</option>
</select>

Asignación de eventos a

los widgets

$("#mi_boton").on("click", function(event, ui) {
  miFuncion();
});

$("#mi_select").on( "change", function(event, ui) {
  miOtraFuncion();
});