Looking for jquery-mobile Keywords? Try Ask4Keywords

jquery-mobileEmpezando con jquery-mobile


Observaciones

Esta información se toma directamente del sitio web de JQuery Mobile:

http://jquerymobile.com/about/

"jQuery Mobile es un sistema de interfaz de usuario basado en HTML5 diseñado para crear sitios web sensibles y aplicaciones accesibles para todos los dispositivos de teléfonos inteligentes, tabletas y computadoras de escritorio. Está construido sobre la base jQuery y jQuery UI, y ofrece navegación Ajax con Transiciones de página, eventos táctiles y varios widgets. Su código liviano está construido con mejoras progresivas y tiene un diseño flexible y fácil de configurar ". - Equipo de JQuery Mobile.

Recomiendo encarecidamente visitar el sitio para obtener más información sobre JQuery Mobile. Esto es sólo un extracto para ayudar a los principiantes.

También puede encontrar más ejemplos e información en la página oficial de jquery-mobile: https://jquerymobile.com/demos

Preparar

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 mine jqm).
  • Coloque todos los archivos jquery-mobile que ha extraído dentro de la carpeta jquery-mobile. Ahora puede enlazar a estos archivos en su archivo index.html.

En el siguiente código, los archivos javascript y css se incluyen por URL. Alternativamente, puede seguir los puntos anteriores e incluirlos 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 reducidas 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 que las cambie de nuevo a las versiones minimizadas en el momento de la implementación a la 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>