jQuery Mobile - Configurazione

In questo capitolo, discuteremo come installare e configurare jQuery Mobile.

Scarica jQuery Mobile

Quando apri il collegamento jquerymobile.com/ , vedrai che ci sono due opzioni per scaricare la libreria mobile jQuery.

  • Custom Download - Fare clic su questo pulsante per scaricare una versione personalizzata della libreria.

  • Latest Stable - Fare clic su questo pulsante per ottenere la versione stabile e più recente della libreria mobile jQuery.

Download personalizzato con Download Builder

Utilizzando Download Builder, puoi creare una build personalizzata includendo solo le parti della libreria di cui hai bisogno. Quando scarichi questa nuova versione personalizzata di jQuery Mobile, vedrai la seguente schermata.

È possibile selezionare le librerie in base alle proprie esigenze e fare clic su Build My Download pulsante.

Download stabile

Fare clic sul pulsante Stabile , che porta direttamente a un file ZIP contenente i file CSS e JQuery, per l'ultima versione della libreria mobile jQuery. Estrai il contenuto del file ZIP in una directory mobile jQuery.

Questa versione contiene tutti i file comprese tutte le dipendenze, una vasta raccolta di demo e persino la suite di unit test della libreria. Questa versione è utile per iniziare.

Scarica jQuery Library da CDN

Un CDN (Content Delivery Network) è una rete di server progettati per fornire file agli utenti. Se si utilizza un collegamento CDN nella propria pagina Web, si sposta la responsabilità di ospitare i file dai propri server a una serie di quelli esterni. Questo offre anche il vantaggio che se un visitatore della tua pagina web ha già scaricato una copia di jQuery mobile dallo stesso CDN, non dovrà essere scaricata nuovamente. È possibile includere i seguenti file CDN nel documento HTML.

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Stiamo utilizzando le versioni CDN della libreria durante questo tutorial. Usiamo il server AMPPS (AMPPS è uno stack WAMP, MAMP e LAMP di Apache, MySQL, MongoDB, PHP, Perl e Python) per eseguire tutti i nostri esempi.

Esempio

Di seguito è riportato un semplice esempio di jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   
      
   <body>
      <div data-role = "page" id = "pageone">
         <div data-role = "header">
            <h1>Header Text</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
         </div>

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

I dettagli del codice sopra sono:

  • Questo codice è specificato all'interno dell'elemento head.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

    • Il viewport viene utilizzato per specificare (dal browser) per visualizzare il livello di zoom e la dimensione della pagina.

    • content = "width = device-width" viene utilizzato per impostare la larghezza in pixel della pagina o del dispositivo dello schermo.

    • initial-scale = 1 imposta il livello di zoom iniziale, quando la pagina viene caricata per la prima volta.

  • Includere i seguenti CDN

<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

  • Il contenuto all'interno del tag <body> è una pagina visualizzata nel browser.

<div data-role = "page">
   ...
</div>

  • data-role = "header" crea l'intestazione nella parte superiore della pagina.

  • data-role = "main" viene utilizzato per definire il contenuto della pagina.

  • data-role = "footer" crea il piè di pagina nella parte inferiore della pagina.

  • class = "ui-content" include il riempimento e il margine all'interno del contenuto della pagina.

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come simple_example.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/simple_example.html e verrà visualizzato il seguente output.