Comenzando con jquery-mobile
En esta página
Configuración
La versión actual de JQuery Mobile es 1.4.5 y se puede descargar aquí: https://jquerymobile.com/
- Descarga el archivo zip y extrae todos los archivos.
- Cree una carpeta de biblioteca (o lib) dentro de su aplicación (dentro de la carpeta www).
- Cree una carpeta jquery-mobile dentro de la carpeta lib (he llamado a la mía jqm).
- Coloque todos los archivos jquery-mobile que haya extraído dentro de la carpeta jquery-mobile. Ahora puede vincular estos archivos en su archivo index.html.
En el siguiente código, los archivos javascript y css están incluidos por URL. Alternativamente, puede seguir los puntos anteriores e incluirlo en la ruta en la que se encuentra en su máquina local, es decir:
<link href="lib/jqm/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
...
<script type="text/javascript" src="lib/jqm/jquery.mobile-1.4.5.min.js"></script>
Estas son las versiones minimizadas de los archivos css y js. Alternativamente, puede incluir la versión no minimizada durante el desarrollo para que sea más fácil de leer si necesita profundizar en ella. Si lo hace, le recomendaría volver a cambiarlas a las versiones minimizadas al implementarlas en producción.
<!-- it is imported inside head tags. -->
<!-- no additional files needed, if css and js referred with full path. -->
<!DOCTYPE html>
<html>
<head>
<!-- Viewport setup. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery Mobile styles come first before js. -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Basic jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- jQuery Mobile library kind of extends upon jQuery -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- example page element using jQuery mobile tags: -->
<div data-role="page" id="pageone">
<div data-role="header" id="pageone-header">
<h3>Insert Page header Here</h3>
</div><!-- /header -->
<div role="main" class="ui-content" id="pageone-content">
<center><h3>Page title</h3></center>
<!-- All HTML for the page content goes here -->
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Insert Page footer Here</h4>
</div><!-- /footer -->
</div>
</body>
</html>