Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

jQuery Mobile

Conoscere ed utilizzare jQuery Mobile, framework JavaScript in grado di trasformare una pagina HTML5 in una interfaccia responsiva mobile, tramite l'uso di semplici classi ed attributi.
Conoscere ed utilizzare jQuery Mobile, framework JavaScript in grado di trasformare una pagina HTML5 in una interfaccia responsiva mobile, tramite l'uso di semplici classi ed attributi.
Link copiato negli appunti

Il framework jQuery Mobile nasce come soluzione JavaScript adeguata alle esigenze del mobile, offrendo quindi funzionalità di reattivività, efficienza e responsività. Come suggerito dal nome, questo framework deriva da uno degli strumenti più
diffusi del panorama professionale web, ovvero jQuery, includendo anche parte di jQuery UI.

In questa lezione, ne introdurremo i concetti principali, rimandando per approfondimenti alla guida disponibile su HTML.it. In questa sede mostreremo come si possa imparare velocemente ad integrare le sue funzionalità all'interno di una pagina HTML5, e lo faremo su un progetto di Intel XDK che ci metterà da subito in condizione di scrivere codice ed eseguirlo nell'emulatore o su dispositivo.

Includere jQuery Mobile in una pagina HTML5

Per prima cosa dovremo includere jQuery Mobile nella pagina HTML5, specificandolo tramite il tag <script>. Spesso si utilizza fare riferimento ad una CDN (Content Delivery Network), dove possiamo trovare già online le versioni pubbliche ed aggiornate delle moderne e più diffuse librerie. Le CDN più aggiornate possono essere recuperate all'indirizzo jQuery CDN.

In alternativa a ciò, potremmo decidere di scaricare le librerie ed includerle come script statici all'interno della nostra app. Ciò può essere utile se vogliamo realizzare un'app che possa funzionare anche in modalità offline, evitando di dover scaricare ogni volta le librerie da Internet.

La seguente pagina è un template che può essere usato per iniziare a scrivere in jQuery Mobile:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://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>
<!-- Codice -->
</body>
</html>

Abbiamo insierito nel blocco <head> tre riferimenti: uno a jQuery, uno a jQuery Mobile ed un link al foglio di stile di quest'ultimo. Vedremo che tutto il resto del codice andrà inserito nel tag <body>.

Struttura delle pagine

jQuery Mobile si può integrare facilmente in HTML5 perchè, analogamente a quanto accadeva con Bootstrap, possiamo applicarlo limitandoci a specificare alcuni attributi sui singoli elementi. Molto spesso ci troveremo a scrivere blocchi <div> annidati, ognuno connotato da un attributo data-role il cui valore specifica "cosa" quell'elemento rappresenta all'interno della pagina.

Il primo ruolo che vedremo è page. Un elemento page rappresenta una pagina dell'app, ed ogni file HTML contiene tipicamente più elementi page:

<div data-role="page">
  <div data-role="header">
    <h2>jQuery Mobile</h2>
  </div>
  <div data-role="main" class="ui-content">
    <p>Hello jQuery Mobile!</p>
  </div>
  <div data-role="footer" data-position="fixed">
    <h1>2015 - Html.it</h1>
  </div>
</div>

Figura 1. Iniziamo con jQuery Mobile (click per ingrandire)

Iniziamo con jQuery Mobile

Il codice HTML da inserire nel <body> è composto da elementi che giocano ruoli diversi in base al data-role: ci sono un header, un footer ed un main. Tutto quanto è incluso in una pagina.

Creare un form

Anche per i form le modalità di creazione sono le medesime delle pagine web. Il seguente stralcio di HTML5 arricchito con gli attributi di
jQuery Mobile ne mostra un esempio:

<form method="post" action="">
  <div class="ui-field-contain">
    <fieldset class="ui-field-contain">
    <label for="nome">Nome:</label>
    <input type="text" name="nome" id="nome">
    </fieldset>
    <fieldset class="ui-field-contain">
    <label for="cognome">Cognome:</label>
    <input type="text" name="cognome" id="cognome">
    </fieldset>
    <fieldset data-role="controlgroup">
    <legend>Sesso:</legend>
      <label for="maschio">Maschio</label>
      <input type="radio" id="maschio" value="maschio">
      <label for="femmina">Femmina</label>
      <input type="radio" id="femmina" value="femmina">
  </fieldset>
    <fieldset class="ui-field-contain">
    <label for="statocivile">Stato civile</label>
    <select id="statocivile">
      <option value="nocon">Celibe/nubile</option>
      <option value="con">Coniugato/a</option>
      <option value="div">Divorziato/a</option>
    </select>
  </fieldset>
    <input type="submit" value="Invia..." data-icon="check" data-iconpos="right" data-inline="true">
  </div>
</form>

Il risultato, emulato in un iPhone6 Plus mediante Intel XDK, sarà il seguente:

Figura 2. Esempio di form (click per ingrandire)

Esempio di form

Come si vede, il codice è interamente in HTML5, e l'effetto di jQuery mobile si nota solo negli attributi del pulsante submit con cui scegliamo l'icona e la posizioniamo (attributi data-icon e data-iconpos). Anche il posizionamento degli elementi nel form è effettuato tramite jQuery Mobile, con la classe ui-field-contain.

Le liste

Ultimo elemento che consideriamo in questa breve rassegna sono le liste, molto utili per visualizzare una sequenza di dati della
stessa forma.

<ul data-role="listview" data-autodividers="true" data-inset="true">
    <li><a href="#">Arancioni Gianluca</a></li>
    <li><a href="#">Argenti Silvio</a></li>
    <li><a href="#">Azzurri Paolo</a></li>
    <li><a href="#">Bianchi Agnese</a></li>
    <li><a href="#">Gialli Lorenzo</a></li>
    <li><a href="#">Grigi Ernesto</a></li>
    <li><a href="#">Rossi Alberto</a></li>
    <li><a href="#">Neri Giorgio</a></li>
    <li><a href="#">Verdi Lorenzo</a></li>
</ul>

Come mostra la figura seguente, una listview con jQuery mobile non è altro che una normale lista HTML ed ogni voce è costituita da un link, l'elemento tipico per innescare azioni. Tanto per evidenziare un esempio di come questo framework venga incontro alle esigenze degli sviluppatori, si noti che è sufficiente usare l'attributo data-autodividers per richiedere la suddivisione della lista in base all'iniziale dei cognomi.

Figura 3. ListView con jQuery Mobile (click per ingrandire)

ListView con jQuery Mobile

Da questa breve panoramica si desume come, conoscendo HTML5, integrare jQuery Mobile è un'operazione abbastanza semplice: basta assegnare una classe o qualche attributo ad alcuni elementi e questi si trasformano in quello che vogliamo. Ciò che questo strumento conferisce non è altro che una modalità per creare interfacce utente idonee ai dispositivi mobili, ma per tutto il resto dell'interazione con il device dovremo utilizzare altri framework, che vedremo nel seguito della guida.

Per approfondire meglio jQuery Mobile, rimandiamo nuovamente alla guida completa disponibile su HTML.it.


Ti consigliamo anche