jquery-mobileIniziare con jquery-mobile


Osservazioni

Questo è preso direttamente dal sito web di JQuery Mobile:

http://jquerymobile.com/about/

"jQuery Mobile è un sistema di interfaccia utente basato su HTML5 progettato per rendere i siti Web reattivi e le app accessibili su tutti i dispositivi smartphone, tablet e desktop, basato sulle solide fondamenta jQuery e jQuery UI e offre la navigazione Ajax con transizioni di pagina, eventi di tocco e vari widget.Il suo codice leggero è costruito con miglioramenti progressivi e ha un design flessibile e facilmente modificabile. " - Team JQuery Mobile

Consiglio vivamente di andare sul sito per saperne di più su JQuery Mobile. Questo è solo un estratto per aiutare i principianti.

Puoi anche trovare altri esempi e informazioni sulla pagina ufficiale di jquery-mobile: https://jquerymobile.com/demos

Impostare

La versione corrente di JQuery Mobile è 1.4.5 e può essere scaricata qui: https://jquerymobile.com/

  • Scarica il file zip ed estrai tutti i file.
  • Creare una cartella di libreria (o lib) all'interno dell'applicazione (all'interno della cartella www).
  • Crea una cartella jquery-mobile all'interno della cartella lib (che ho chiamato mine jqm).
  • Inserisci tutti i file jquery-mobile che hai estratto all'interno della cartella jquery-mobile. Ora puoi collegarti a questi file nel tuo file index.html.

Nel codice sottostante i file javascript e css sono inclusi dall'URL. In alternativa, puoi seguire i punti elenco sopra e includerlo per il percorso sul quale si trova sulla tua macchina locale, ovvero:

<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>
 

Queste sono le versioni minificate dei file css e js. In alternativa puoi includere la versione non minified durante lo sviluppo, in modo che sia più facile da leggere se hai bisogno di scavare. In tal caso, consiglierei di passare di nuovo alle versioni minificate al momento della distribuzione in produzione.

<!-- 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>